• Home »
• Web Design »
• Design Considerations

Design Considerations

Using technology effectively

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

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:

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

Site Navigation

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.

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

Maximizing user experience will reduce the temptation to go elsewhere.

Site Search

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:

• a 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.

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

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.

• 404 page: 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.
• Site navigation page: assists visitors that encounter technical difficulties while on your site.
• Site map: lists the main pages on the site.

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.

• 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

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:

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.

• Wide, multi-column designs no longer work well in mobile.
• Expensive data plans made users more concerned about page size.
• New Retina displays increased demand for better graphics and video.

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.

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

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.

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

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.

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

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

Web Design Index

The design process and the factors involved are laid out on these pages:

1. Web design: An introduction.
2. Design philosophy: How I view the design process.
3. Design considerations: Using technology effectively.
4. Design criteria: Determining your needs.
5. Content management systems: “Do-it-yourself” websites.
6. Customized blogs:For time-sensitive information.
7. Factors affecting price: Developing your design budget.
8. Request a quote: Estimating your web design costs.
9. Site maintenance: Keeping it updated.
10. My design portfolio: Example websites & blogs.

Questions? Call Now!