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 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
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.
Most smartphone users only use 6-10 apps per week. Statistically speaking, yours is probably not one of them. — Webflow blog
- The company building the app has considerable brand recognition.
- The company’s product/service is the app.
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 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 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.
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 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
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.
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.
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 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.
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.
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.
This site contains additional information about website design techniques and technologies. See the Website Design index for a listing.
to discuss my services!