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

Using Technology Effectively

This page discusses the elements of design decisions that determine the appropriate web technology used to meet 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 degrades gracefully on smaller screens and older browsers so that the content is still visible even if any special features or effects don't work.

“In Your Face” Prompting Can Backfire

Many sites use pop-up boxes 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.

Increasingly attempts to monetize the Web and to discourage ad-blockers (or what appears to be ad-blockers) are making user experiences a nightmare. You'll probably want to think carefully before engaging in these practices.

Loading Times Important

A fast-loading website makes a good first impressions to site visitors and potential customers. A bad experience will likely 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

You'll want to ensure that factors like poor design and fancy multimedia aren't slowing down your site.

WordPress and other CMS-based sites can suffer slow load times. While the flexibility and self-maintenance may sound attractive, these 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

Your Website Could be Destroyed in Just 10 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

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.

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

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.

What About an App?

Apps are all the rage 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 the mobile device). To determine if this might work for you, learn more about progressive web apps on Google Developer.

Help Visitors Find What They're Looking For

How you expect your visitors to land onto your site will determine factors such as layout and navigation. Grouping content into logical sections will help them to determine where the information they seek is likely to be found.

  • Your marketing (advertising) most likely directs visitors to your home page.
  • However, those searching for specific information may land elsewhere.
  • Visitors need to be able to navigate your site regardless of where they land.
  • Search utilities can help visitors find content if they don't see what they want.
  • Maximizing user experience will reduce the temptation to go elsewhere.

Site Privacy & Conditions of Use

When creating sites, I always include a number of service pages:

  • a customized 404 page (404 is Internet code for “I can't find that”);
  • a site 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 both your intellectual property and tells visitors that there are conditions of use for your site. It dispells the belief that anything on the Internet (including your site's content) is free to copy and reuse.
  • If your site uses cookies, then European Union laws require you to clearly notify site visitors upon arrival to your site so they can opt out.

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

The remaining pages enable your site visitors to better navigate your site, particularly when they land on an unexpected page or 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.

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.

Using Video Wisely

Video can be a wonderful tool for getting your point across, but only if used appropriately.

Sites that instantly run video upon loading the page are annoying, especially when the same video reloads again and if the visitor has limited bandwidth available.

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

Flash Disappearing

Flash has been the primary form of video on the Web for a number of years, but that is beginning to change.

[I]t's important to remember that Flash was developed in a time where the desktop was king. The long load times it commands simply aren't conducive to mobile environments — a deal-breaker for today's mobile-first world.

Over the years, Flash has become famous for a few less-than flattering features that can all play a role in hindering user experience, including intrusive experiences, increasing page-load times, lowering a site's search engine optimization (SEO) and security flaws. — TechCrunch

HTML5 Technology

While Flash requires a plugin to work, HTML5-based technology runs natively and adapts well to mobile, desktop or other environments. A sample audio control is shown below:

Source: Free Sounds (Public Domain)

Different browsers and mobile devices will display the controls differently.

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 early sites. Editing such a site is a nightmare.

As CSS was 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 (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 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.

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, Internet Explorer, 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.

Call Now
to discuss my services!

Return to top

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 and have instant downloads (where practical) rather than waiting.

“Buy-now” Options

There are several simple methods of collecting funds for “buy-now” purchases, memberships and other 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 buy a single item (or a workshop fee or subscription) by simply clicking on a “Buy Now” button. Subscriptions and memberships can be managed in the same way.
  • CanadaHelps allows your visitors to make a tax-deductible donation to your non-profit organization and provides everything from handling the donation to providing 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 to shop after selecting a single 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
Updated: September 4, 2018