Chapter 11

Complexities of designing for the Web

Web development is a double-edged sword. On the one hand, no other industry has the abundance of information, examples and free components to re-use – it is perhaps the most supportive professional community of all time. On the other hand, hardware and software develops at such a pace that we must take into account an increasingly diverse set of technologies.

In this chapter we’ll take a look at the spectrum of technologies that you need to consider when designing a web app.

Connectivity

The type of internet connection that a customer uses affects their experience of your app in a number of ways.

Speed

Even in the US there is a huge discrepancy in connection speeds. An April 2010 report1 reveals an average download speed of 3.8Mbps, but with many college towns offering four times that average. Conversely, 8.6% of the population have narrowband speeds of 256Kbps or less, and 4.8% have just 56Kbps or less. The picture is muddied further by demographic differences, with varying levels of broadband adoption by age, income, education level and ethnicity2.

The effort required to address this disparity depends on the geography and demographic of your target market, though designing for the lowest common denominator is always a sensible strategy. We’ll discuss compression and other performance techniques that can help to alleviate slow connection issues in chapter 19.

Location

The geographical distance between your hosting server and the user can have an impact on performance. This can be negligible, but if your app relies on the download or upload of large media files, you should consider making use of a content delivery network.

A content delivery network, such as Amazon CloudFront3, provides a global network of servers and offers functionality for easily synchronising your files across the network and directing users to their nearest location.

Service provider

Internet service providers (ISPs) are the middlemen of web apps. Every request a customer makes to your service must pass through their systems.

In general you don’t need to worry about them. However, if you target a specific country or your web app uses advanced compression, streaming or similar technologies, you may want to research the potential impact of ISP systems. For example, some ISPs may use a transparent proxy that intercepts requests to your app; they may filter websites that appear to be a risk; they may insert their own cookies and headers into requests and responses, or place limitations on bandwidth and protocols.

Reliability

In 2009, the number of webpages accessed from mobile devices increased by 148% globally4, accounting for about 1% of all web consumption. In 2010, one iPad was sold every 2.3 seconds during the 80 days5 following its release, highlighting our continued obsession with mobile devices.

Wireless internet connections (for example, GPRS, 3G and 4G) are frequently unreliable. Even in areas with excellent coverage, mobile users may experience temporary or extended periods of disconnection due to environmental factors: subways, dead zones, and so on. If your app requires the user to enter or transfer significant amounts of data, such as a lengthy blog post or multiple photo uploads, you’ll need to take potentially unreliable connections into account.

Displays

There are dozens of common web display sizes, from low-resolution smartphones to very large computer monitors. This is complicated further by varying physical dimensions: a 23" monitor with a 1,024×768 pixels resolution will display an object on a web page at a different physical size to a 11" laptop with the same resolution.

As of February 2010, 94% of users reportedly have resolutions of at least 1,024×768 pixels6, which has become a popular target size for web designers. It has also become shrewd to create alternative web interfaces for smartphones.

Hardware capabilities

The beauty of accepted web standards and protocols is that variations in customers’ hardware are largely irrelevant. For the most part, we don’t need to worry about the machine at the other end, with a few exceptions.

Pointing device

Many customers will use a standard mouse to navigate your app; others will use a trackpad on a laptop. Then there are those on touch-sensitive smartphones and tablet computers who touch the screen to make their selection. This has two implications for web app design:

Peripherals

Not every user will have a webcam, speakers, headphones or other peripherals that you might rely on for multimedia content, so make alternative outputs available where possible, transcripts or subtitles for video files, for example.

Processor

It’s now easier than ever to create sophisticated graphics, animations and interactive content on the web. These can be resource-intensive1: the quality of video playback and advanced animation will depend on the CPU speed, graphics card and available resources of the host machine.

Software

The variations in user software are the bane of web developers. Customers’ selection and configuration of their software is a major cause of frustration.

Browser

img-11_2

Browser market share, June 2011

The market share of web browsers7 remains in a state of flux, thanks partly to the recent leap in sophistication of mobile web browsers and relatively new entries to the market (Google introduced Chrome in 2008).

The picture is confused further by the continued existence of outdated software: Internet Explorer 6 was released in 2001 yet continues to hold non-negligible browser market share.

Each browser and its versions support a different set of web standards and use a particular layout rendering engine to arrange the visual output of a webpage. To make things even more complicated, some browsers share the same rendering engine (Safari and Chrome both use WebKit), but there can be inconsistencies across platforms (such as Mac OS X and Windows).

This all sounds quite discouraging. Luckily for us, many web developers have put effort into simplifying and balancing out the inconsistencies. We’ll see how we can make use of their work in chapter 17.

Plug-ins and media support

As soon as you venture away from standard web technologies, you need to take into account the adoption rates and compatibility of your chosen plug-in or media. Even Flash, which Adobe purports to have a 99% adoption rate8, can no longer be relied on thanks in part to Apple doggedly not supporting it on their popular mobile devices9.

If you use multimedia, stick to popular cross-platform formats rather than Apple’s QuickTime .mov or Window’s .wmv files: use H.264/MPEG-410 for video and MP3 for audio.

User preferences

There are three user-configurable browser settings that you should keep in mind during web app development.

JavaScript

A 2007 survey showed that as many as three per cent of US web users disable JavaScript in their browser11. Combine this with inconsistent JavaScript support across popular web browsers, and screen readers that may be unable to correctly interpret changes made by scripts, and it’s clear that you should consider catering for non-JavaScript environments.

Privacy

Most web apps use cookies (small, semi-permanent text files inside the web browser) to improve the experience for the user by remembering their information across sessions. Some people are rightly concerned about marketing companies nefariously using the same technology to invisibly track their web use, and they may disable cookies. No accurate recent data exists to measure the extent of this concern, but a survey conducted in 2000 estimated that up to ten per cent of US users disable cookies12.

Browser chrome and window size

In addition to the variety of display resolutions, we must also contend with window size: a screen at 1,280×1,024 pixels won’t necessarily contain a browser at fullscreen. Furthermore, the browser chrome (the window borders and menus of the browser software) will differ from person to person depending on whether they choose to display toolbars, menus, bookmark bars, and so on.

Summary

Your customers will use assorted devices to access your web app, and consequently there are a number of technical factors outside your control that you should take account of throughout your web app design process:

Web App Success book coverAlso available to buy in a beautiful limited edition paperback and eBook.

This work is licensed under a Creative Commons Attribution 4.0 International License.