Russ Harvey Consulting - Computer and Internet Services

Design Considerations

Usability | Site Structure | Sales & Services

Websites and Internet services are viewed on many devices with many screen sizes
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.

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.
The Importance of Website Loading Speed

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 Slow?

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

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 has become a very lucrative practice.

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

Wordpress sites are much more easily compromised because they depend upon themes and plugins created by third parties.

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.

“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.

Using Video

Video can be a wonderful tool for getting your point across.

Younger viewers have embraced video.

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)

Source: Evgenia Kirpichnikova via Pexels.com

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 Gone

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.

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 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.
  1. The company building the app has considerable brand recognition.
  2. The company's product/service is the app.
Most smartphone users only use 6–10 apps per week. Statistically speaking, yours is probably not one of them. — 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 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 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

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.

Return to top

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.

Misusing Tables

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:

Wide Table Demonstration
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. — DZone

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.

The Downside

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.
  • JavaScript-driven dynamic menus appear attractive but can be frustrating for the visitor and can be confusing to assisted-reading devices and search engines.

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.

Additional Resources

This site contains additional information about website design techniques and technologies. See the Website Design index for a listing.

Got Questions? Call Now!

 

Sales & Services

If you're selling merchandise, services or subscriptions (including memberships or annual dues) on your site, you'll need a method to collect payment.

Site visitors want to make instant payments to enable instant downloads (where practical) rather than waiting.

“Buy-now” Options

There are several simple methods of collecting funds for “buy-now” purchases, memberships and similar services on your website.

Several online services allow your visitors to make online payments (including credit card transactions) without the need for a shopping cart or bank merchant account.

  • PayPal allows your visitors to purchase a single item (e.g. a workshop registration) by simply clicking on a “Buy Now” button. Subscriptions and memberships can be managed in the same way.
  • CanadaHelps allows site visitors to make a tax-deductible donation to non-profit organizations and provides everything from handling the donation to the tax receipt.

Sign up for PayPal and start accepting credit card payments instantly.

Shopping Carts

If you expect them to purchase several items or want your visitors to be able to continue shopping after selecting an item, you'll need to consider a shopping cart system.

  • Shopping cart pricing varies depending upon the service and complexity.
  • Most shopping cart systems require you to set up a database that includes all the pricing, size, colour and other variables of every item you sell and/or every service you provide.
  • Each item then needs to be integrated into the site in all the locations where it is offered to the site visitor. This process can be quite time-consuming (and therefore expensive) so you'll want to be sure you require this level of integration.
  • Some systems allow you to send your visitors to an external payment centre like PayPal. Others have an in-house payment system for which you'll be billed based upon your sales volume and other factors.

Call Now
to discuss my services!

Return to top

Related Pages

These other pages discuss the various aspects of designing a site:

 

Return to top
russharvey.bc.ca/considerations.html
Updated: March 30, 2021