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.
Using Technology Effectively
This page discusses the elements that determine the appropriate web technology for meeting your site's goals.
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
I use techniques to ensure 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
Advertising revenues are minimal because Google and Facebook have cornered the online advertising market. No one else has any significant revenue.
Alternatives are subscriptions and requests for donations, but be careful how those are worded. Telling folks that you have 10,000 articles means nothing to someone simply following a link.
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 contributes to longer load time as well as potential “page bloat” and that impacts the user experience.
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 gives them extra overhead.
While the flexibility of self-maintenance may sound attractive, the resulting slowdowns are less convenient for your site visitors.
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.
Because so many businesses were unprepared, they are forced to cave in to ransomware demands. This has become a very lucrative practice.
Critical Damage to Reputations
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.
Wordpress sites are much more easily compromised because they depend upon themes and plugins created by third parties.
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.
“Modern” Design Features
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 these 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
The use of larger images works best in mobile while lots of white space works best in desktop layouts.
Video can be a wonderful tool for getting your point across.
Younger viewers have embraced video.
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 for those that don't watch your video.
Flash was the multimedia king for years, but required a plugin to work and never supported mobile devices. It is no longer supported.
Modern HTML5 supports multimedia natively in all modern browsers and devices and loads quickly. More about the shift to HTML5-based technology.
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 control autoplaying of videos.
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
What About an App?
Apps are popular and all the major brands seem to have an app. However, apps don't replace a website, even for mobile. 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
To determine if this might work for you, learn more about progressive web apps.
How you expect your visitors to land onto your site will determine factors such as layout and navigation.
Group Your Content
Visitors need to be able to navigate your site 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.
Grouping content into logical sections will help site visitors to locate the information they are looking for. Maximizing their experience will reduce the temptation to go elsewhere.
Reinforce the logical layout of your site and site navigation with a search function.
Search utilities help visitors find content if the site navigation doesn't list what they want.
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.
I default to using Google Search for most 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 site map page; and
- a site navigation page.
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.
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.
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.
- The 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.
- The site navigation page contains a search feature and assists visitors that encounter technical difficulties while on your site.
- The site map lists the main pages on the site and helps visitors find what they're looking for.
- On some sites the search feature is included in the page navigation.
Other pages may include landing pages for PayPal transactions, form submissions, etc. The site visitor should not see these pages unless they engage in site activities that direct 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 them for site layout in the misguided attempt to duplicate the close control people had come to expect from print media.
- Table-based sites suffer from longer page download times and serious display issues on modern mobile devices.
- When the layout is completely embedded in the content it becomes more difficult (and expensive) to modify content.
- The Problem with Using Tables (originally a series of slides) explains the problem with tables in greater detail.
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. When viewing this column on a mobile device (where the column width is narrower), it is the same width as the right sidebar of this site when displayed on a desktop computer.
Normally, such a table would break the site design, but I've used special CSS to modify the table layout so that the viewer can scroll the table within the confines of the existing column width.
Mobile Becomes 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.
- Smaller screens meant that wide, multi-column designs no longer worked that well.
- Expensive data plans meant that users were more concerned about page size.
- At the same time, the new Retina displays increased demand for better graphics and video was increasingly present.
Mobile-only sites were the first response, but this was difficult for smaller sites to accomplish 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.
Many mobile visitors want quick access to key information such who you are, what you provide and where you're located but others (particularly younger audiences) spend much more time on mobile and want to have the full site content available to them.
One Site 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.
Rather than forcing mobile users to scroll left and right to view your site's content (or choose to view it in a size too small to read comfortably), the site's content is modified to fit the screen.
As you might imagine, some compromises might be necessary since you can't view as much information as you can on a wider screen. But any compromises are offset by the improved accessibility and ease of access to your site's content.
Responsive designs expand and reduce fluidly whereas adaptive solutions can hit snags as content overflows or doesn't reshape itself correctly.
One huge advantage of sidebar navigation was that it was practical to include numerous navigation entries. The top-navigation suitable for responsive designs limits you to no more than six navigation entries (depending upon word size).
However, 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. If the target audience's experience will degrade too much this direction may not be advisable. This may hurt your site ranking for searches on mobile devices unless your primary audience is viewing your site on a desktop or decent tablet.
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.
- Site navigation should include all the major sections (and may require special landing pages).
- Adding features like blogs and social media will require regular updates to those areas or you may appear to be inactive.
- Sites can be either linear (read from front to back) or have a clear grouping of similar content.
Search is an important factor. If people can't find what they're looking for quickly, they'll go elsewhere.
Ensure Information Can Be Found
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.
Left column navigation worked fine when computers with larger screens accessed websites, but this has changed with the emerging dominance of mobile.
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 display content 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.
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.
This site contains additional information about website design techniques and technologies. See the Website Design index for a listing.