Design Considerations
Usability | Site Structure | Sales & Services
It's not just mobile or desktop any longer — it's a world of specific device capabilities, screen sizes, and connection speeds, as well as considerations for how the page size affects the user experience in these many scenarios.
— DZone
Using Technology Effectively
This page discusses the elements that determine the appropriate web technology for meeting your site's goals.
The story, in a nutshell, is that readers are finally getting fed up. Fed up with incessant banner ads, obnoxious pop-ups, and videos that automatically start playing when you load a page.Fed up with fullscreen takeovers that force you to find, and click, a tiny "x" before you can read the article you actually came for.
Fed up with cookies and widgets that track their every move online, allowing advertisers to target them with increasing precision.
— Dylan Tweney
Don't Let Technology Get in the Way
Your site serves the wrong purpose if the content is obscured by excessive “eye candy” or if the underlying technology overpowers your message.
[W]ebsites should be small and fast enough to render on mobile devices rapidly using minimal resources. The only reason they are not is because we are addicted to tracking, surveillance, gratuitous animation, and bloated, inefficient frameworks.
— Idle Words
Modern techniques can ensure that your site works on both desktop and mobile screens, yet degrades gracefully on older browsers. That way, the content is still visible even if any special features or effects don't work.
Pop-ups Can Backfire
Many sites use pop-ups to encourage their visitors to sign up for newsletters or email alerts. While these may increase your conversion rates, they can also backfire and cause visitors to leave your site prematurely.
Increasingly attempts to monetize the Web and to discourage ad-blockers are making user experiences a nightmare.
Forget Ad Revenue
Google and Facebook have cornered the online advertising market. No one else has any significant revenue.
Participating in that market exposes your site visitors to privacy violations, yet produces minimal income for the effort.
Better alternatives are subscriptions and requests for donations.
Be careful how those are worded. Telling folks that you have 10,000 articles means nothing to someone simply following a link. Providing an article or two without payment could entice them into a subscription or to donate a small amount.
Loading Times Important
A fast-loading website makes a good first impressions to potential customers. A bad experience will cause them to go elsewhere.
A disproportionately high 47% of users expect your web page to load in under two seconds. Again, a disproportionately high 57% of your website visitors will abandon your page if its load time is 3 seconds or more. At peak traffic times, over 75% of online customers opted for a competitor's site instead of suffering inordinate delays.
— Keith Marlow
Design for Speed and Usability
You'll want to ensure that factors like poor design and fancy multimedia aren't slowing down your site.
Every added feature on a page contributes to longer load times as well as potential “page bloat” which in turn degrades the user experience unless that is what they're looking for.
WordPress Generates Pages on the Fly
WordPress and other CMS-based sites can suffer slow load times, particularly if images aren't optimized, because their need to convert a word-processor-like interface adds extra overhead which can affect how fast content appears.
While the flexibility of self-maintenance may sound attractive, it many be less convenient for your site visitors.
Wordpress sites are also much more easily compromised because they depend upon themes and plugins created by third parties.
Site Security
Site security is a significant consideration today.
Hacking tools are becoming more easily obtained and business sites are rapidly becoming the number one target for organized crime.
In today's world, all web sites are moving targets. It's always an arms race between website operators and the spammers and scammers out there who want to use them for anything from malware distribution to automated referrals to porn sites.
— ZDNet
Businesses Unprepared
Because so many businesses were unprepared, they are forced to cave in to ransomware demands. This very lucrative practice can hurt your business far beyond the cost of the ransom.
Critical Damage to Reputations
LifeLabs lost confidential medical data and had to pay to get it back. This breach resulted in a pending class-action lawsuit by those affected.
Your Website at Risk
What if your website were attacked and compromised?
Here's how absurdly easy it is for attackers to destroy your website in just ten minutes.All it takes is an insufficiently protected directory, an unpatched exploit, a poorly chosen FTP password, or even installing a free (but corrupted) site theme, and your website can become an entry point for a massive malware infection.
— ZDNet
LastPass, once a highly recommended password manager, let lax security and delays in reporting the loss of customer data destroy their reputation.
Ensuring Usability
You'll need to consider how demographics, technical ability and other factors will influence your visitors' user experience (or UX) on your site.
This can be a balancing act. You need to make decisions about which content is most important (and under what circumstances). Your knowledge about your potential audience will be an important factor in these decisions.
Carousel Images
One of the many features promoted as making your design look “modern” is carousel images. The following quotes an older study, but I still find such layouts provide a poor user experience.
Studies about carousel usage shows they barely have any usage beyond the first slide. Even then, the total engagement with the carousel element, even including the first item, tends to be very low too. As low as 1% of total visits, with only one site in the study going above 3%.
— Tom Kenny Design
Using Video
Video can be a wonderful tool for getting your point across.
Younger viewers have embraced video. If that is your target audience, video is essential.
HTML5 Technology
Newer web technology (HTML5) has made video easier to embed into a site. It runs natively and adapts well to mobile, desktop or other environments.
Sample audio and video controls are shown below:
Source: Free Sounds (Public Domain)
Media controls will vary in different browsers or devices because they are defined by the browser rather than the website.
Keywords for video are often hard to quantify. Be sure that the surrounding content conveys the story the video portrays in case they don't watch your video.
Flash Gone
Flash was the multimedia king for years, but is no longer supported.
Modern HTML5 supports multimedia natively in all modern browsers and devices and loads quickly.
Avoid Autoplay
Sites that instantly run video upon loading the page are annoying, especially when the same video reloads again or if the visitor has limited bandwidth available. Most browsers now stop the auto playing of videos or mute the sound by default.
What About an App?
Apps are popular and everyone seems to have an app.
However, apps don't replace a website. Consider the following:
There are two major criteria that justify investing in an app. You need to meet at least one for the app to have any level of relevance or desirability, and they both hinge on purpose.Most smartphone users only use 6–10 apps per week. Statistically speaking, yours is probably not one of them.
- The company building the app has considerable brand recognition.
- The company's product/service is the app.
— Webflow blog
Progressive Web Apps
A progressive Web app is similar to an app, but are launched from the home screen and don't require Internet access because they pre-cache content (save it on mobile devices).
Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a native application.
— Google web.dev
Determine if progressive web apps might work for you.
Site Navigation
How you expect your visitors to land onto your site will determine factors such as layout and navigation.
Group Your Content
Grouping content into logical sections will help site visitors to locate the information they are looking for regardless of where they land.
- Your marketing (advertising) most likely directs visitors to your home page or specific landing pages.
- However, independent searches for specific information may land them elsewhere.
Maximizing user experience will reduce the temptation to go elsewhere.
Site Search
The logical layout of your site and good site navigation is enhanced by a search function to help visitors find unlisted content.
On larger sites the search feature should be built into the site navigation. This requires a database of site content and anticipated search terms to work.
Small sites seldom justify this commitment of resources so I default to using Google Search for smaller sites with static information. The advantage is ease of implementation and no overhead.
Potential problems include:
- lags in cataloguing page contents if things change rapidly; or
- content not labeled in a manner that Google search recognizes as important.
Site Privacy & Conditions of Use
When creating sites, I always include a number of service pages:
- a customized 404 recovery page (for when a page can't be found);
- a terms and conditions (copyright) page;
- a privacy policy page with a PIPEDA declaration (required by law);
- a site map page; and
- a site navigation page.
Legal Pages
While you may wish not to have these pages, they are provided for your protection and to help site visitors stay on your site rather than seek out your competition.
- The privacy page is mandatory and regulated by law in most countries.
- The terms and conditions page protects your intellectual property.
- If your site uses cookies, then European Union cookie laws require you to clearly notify site visitors upon arrival.
The Personal Information Protection and Electronic Documents Act (PIPEDA) is Canada's law protecting user data. A PIPEDA declaration is legally required for most sites and is strongly recommended for your protection.
Under the PIPEDA Act, personal information means:any identifiable information about an individual whether recorded or not and it applies to the collection, use and disclosure of personal information by organizations during commercial activities.‘Organizations’ include associations, partnerships, persons and trade unions. ‘Bricks-and-mortar’ and e-commerce businesses are covered by the Act.
— PIPEDA
Canada is currently working on updated privacy legislation that will replace PIPEDA.
Navigation Assistance Pages
Navigation assistance pages enable your site visitors understand your site layout, particularly when they land on an unexpected page or if the page they seek can't be found.
- A customized 404 page means that your visitors land on a page with your branding and site navigation rather than on a nondescript page or cryptic message generated by your hosting company.
- A site navigation page contains a search feature and assists visitors that encounter technical difficulties while on your site.
- A site map lists the main pages on the site to help visitors find what they're looking for.
Other pages may include landing pages for PayPal transactions, form submissions, etc. Site visitors should not see these pages unless they engage in the activities that redirect them there.
Structure, Layout & Navigation
There are relatively few methods of organizing the site layout so that it works throughout the site.
- The header is your “branding” and should be consistent throughout the site.
- The site can have one, two or three-column layouts. Each has advantages.
- Most sites place copyright and site navigation options in a common footer.
Separating Content from Layout
Embedding layout within the page structure around the content was common in the early web. Editing such a site was a nightmare.
As CSS developed, many designers learned that it was much easier to modify layout if it was separated from the content. General site structure was modified using CSS to provide the layout. By changing a single CSS file the look and feel of an entire site could be changed without changing the HTML (site markup), and the site loaded much more quickly.
Issues with Tables
Tables were designed to present tabular data.
Early site builders began to misuse tables for site layout in the misguided attempt to duplicate the close control people had come to expect from print media.
Wide Data Tables Problematic
Wider tables can be problematic on a desktop computer; worse when viewed in mobile devices. I've created the following wide table to demonstrate the problem:
| City | Province | Avg. High | Avg. Low | Sunshine | Precipitation | Snowfall | Strong Wind |
|---|---|---|---|---|---|---|---|
| Victoria | BC | 14.1 °C | 5.3 °C | 2109 hrs | 926 mm | 7 days | 3 days |
| Regina | Saskatchewan | 9.1 °C | -3.4 °C | 2318 hrs | 390 mm | 56 days | 29 days |
| Québec City | Québec | 9.0 °C | -1.0 °C | 1916 hrs | 1184 mm | 70 days | 7 days |
| Halifax | Nova Scotia | 11.0 °C | 1.6 °C | 1962 hrs | 897 mm | 25 days | 18 days |
| St. John's | Newfoundland | 8.7 °C | 0.6 °C | 1633 hrs | 1534 mm | 79 days | 47 days |
Notice that the table is wider than this column allows, even on desktop computers.
Normally, such a table would break the site design, but I've used custom CSS to modify the table layout so that the viewer can scroll the table within the confines of variable column widths.
Mobile Now Dominant
The trend towards mobile devices started when the iPhone was released in 2007. Now some 80% of the audience is viewing the Web on smaller devices. 30% of all online shopping purchases now happen on mobile phones according to Google.
- Wide, multi-column designs no longer worked that well in mobile.
- Expensive data plans made users more concerned about page size.
- New Retina displays increased demand for better graphics and video.
A secondary “mobile-only” site was the first response, but this was difficult for smaller sites to afford and the assumptions were misplaced:
Mobile users turned out to be quite like users in the desktop context, in terms of wanting full functionality. What's more, they were put off when met with unfamiliar designs and structures.
— DZone
Some mobile visitors want quick access to key information such who you are, what you provide and where you're located. Younger audiences spend much more time on mobile and want to have the full site content available to them.
Responsive Sites: For Everyone
Responsive Web Design (RWD) bridges the layout requirements of those visiting your site using mobile devices as well as those viewing using larger screens.
The site's content is modified to fit the screen.
For example, the sidebar on this page is displayed as a narrow right column on larger screens, but placed beneath the main content on narrow devices.
The Downsides
As you might imagine, some compromises might be necessary since you can't view as much information as you can on a wider screen. If images are displayed too small, they become unusable.
Any compromises are offset by the ease of access to your site's content regardless of the device used to view it.
Responsive designs expand and reduce fluidly whereas adaptive solutions can hit snags as content overflows or fails to reshape itself correctly.
The top-navigation suitable for responsive designs generally limits you to no more than six navigation entries.
This limitation can be overcome using multi-column footers that can collapse into a single column when viewed on narrow devices.
RWD Won't Work for Every Site
Responsive design requires some thought because not all sites adapt well to smaller devices.
It is critical to know your intended target audience.
- The mobile user experience is critical to your site ranking for searches on mobile devices
- If your primary audience is viewing your site on a desktop or tablet you have more flexibility.
- If you cater to both, you may need to reconsider your content and how it is displayed.
Group Your Content
If your site is relatively complex, grouping content into logical sections will help visitors find the information they seek — even if the page they landed on doesn't have exactly what they want.
- There should be a purpose for every page on your site.
- Sites can be either linear (read from front to back) or have a clear grouping of similar content.
- Site navigation should include all the major sections.
- Each major section may require its own landing page.
Adding features like blogs and social media will require regular updates or you may appear to be inactive.
Ensure Information Can Be Found
If people can't find what they're looking for quickly, they'll go elsewhere.
The main navigation is usually found on the top of the site.
- Clearly-defined sub-sections on larger sites with a defined purpose make navigation choices easier for the visitor.
- JavaScript-driven dynamic menus appear attractive but can be frustrating for the visitor and can be confusing to assisted-reading devices and search engines.
Search
Adding a search feature can allow site visitors to find content you didn't expect them to look for, but effectiveness depends upon knowing the sorts of phrases they may use in the search.
Precision Layouts Are Impractical
Precise layouts are impractical on the web. Unlike in print media, the user is not given a “finished” product. The web browser (Firefox, Safari, Chrome, Edge, etc.) must “interpret” the site and display it within the confines of its hardware and software.
- Different browsers (or different versions of the same browser) can display the same content differently.
- Different operating systems, hardware and other factors can also cause content to display differently.
Your time is better spent focusing on the general layout so that content is viewable everywhere rather than worrying about the precise positioning of elements.
One example is the use of em-dashes. Technically they should have no space on either side but in web layouts I find it more practical to leave space so that the content can flow freely because — unlike print media — you don't have precise control.
Attempts to Control Layout have Weaknesses
Any techniques to enhance control have weaknesses. I find it is wiser to educate my clients than to allow unreasonable expectations to persist beyond the early stages of discussion.
Additional Resources
This site contains additional information about website design techniques and technologies. See the Website Design index for a listing.