Russ Harvey Consulting - Computer and Internet Services

Design Considerations

Using technology effectively

The Technology | Usability | Structure, Layout & Navigation | 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.

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.

[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

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.

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

Ad Revenue Violates Privacy

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 Matter

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 2014

You'll want to ensure that factors like poor design and fancy multimedia aren't slowing down your site. Every “feature” added to a page contributes to longer load times, degrading the user experience.

WordPress

Sites built with WordPress and other content management systems often suffer slow load times. The word-processor-like interface adds extra overhead. Optimizing images and avoiding too many plugins can help.

WordPress sites are sold as “do-it-yourself” projects. The truth is that few people manage these sites well (most of my clients end up hiring me for maintenance).

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

Wordpress themes and plugins created by third parties may not be maintained and often the site owner doesn't know enough to ensure security.

Your Website at Risk

What if your website were attacked and compromised? Many businesses are unprepared when it comes to security.

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, allowed lax security and delays in reporting the loss of customer data compromise 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.

Decide which content is most important (and under what circumstances). Your knowledge about your potential market 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

Video

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

Younger viewers have embraced video. If that is your target market, video is essential.

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

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.

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 can't replace a website:

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.

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

Your site's layout and navigation should reflect how you expect your visitors to land on your site.

Your marketing likely directs visitors to your home page or specific landing pages. Searches for specific information may land them elsewhere.

Maximizing user experience will reduce the temptation to go elsewhere.

Help visitors find unlisted content. Grouping like content is recommended.

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. Google Search for your site is easy to implement as long as content is relatively static.

Site Privacy & Conditions of Use

When creating sites, I always include a number of service 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

Updated privacy legislation is pending in Canada.

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.

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.

Return to top

Structure, Layout & Navigation

There are relatively few methods of organizing the site layout so that it works throughout the site.

Separating Content from Layout

CSS allow your to separate content from layout making it much easier to modify and the site loaded much more quickly. By changing a single CSS file the look and feel of an entire site can be altered without changing the site markup (HTML).

Issues with Tables

Tables were designed to present tabular data.

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:

Demonstration Table
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 large screens).

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

Some 80% of site visitors are viewing the Web on smaller devices. More and more folks are shopping online using mobile phones according to Google.

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. Pages with a sidebar are displayed as a narrow right column on larger screens, but placed beneath the main content on narrow devices.

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.

I've gradually removed the sidebar on most of this site's pages because of that last issue.

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.

Responsive design requires some thought because not all sites adapt well to smaller devices.

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.

Adding features like blogs and social media will require regular updates or you may appear to be inactive.

Return to top

Precision Layouts

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.

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.

Got Questions? Call Now!

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 to enable instant downloads (where practical).

“Buy-now” Options

There are several simple methods of collecting funds for purchases, memberships and services.

The simplest of these allow your visitors to make online payments (including credit card transactions) without the need for a shopping cart or a merchant account.

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.

 

Call Now
to discuss my services!

 

Return to top

Web Design Index

  1. The Introduction.
  2. Design philosophy.
  3. Design considerations.
  4. Design criteria.
  5. Content Management Systems.
  6. Customized Blogs.
  7. Factors affecting price.
  8. Request a quote.
  9. Site maintenance.
  10. My design portfolio.

Questions? Call Now!

 

Return to top
russharvey.bc.ca/considerations.html
Updated: January 10, 2024