At the start of every online project, a series of technical specifications need to be compiled, ranging from complex issues like what server-side technologies will be used through to what browsers will be supported.
Among these specifications lies one of the most apparently simple: what screen resolutions should we support? The number of pixels left to right, and the number of pixels top to bottom: most people using the internet (rightly) never consider their screen resolution, they simply use what they are given. For those creating online environments however, clear decisions need to be made regarding how to make best use of the screen space available. Simple, right?
In fact, what appears to be simple turns out to have far-reaching implications for a project. At the most basic level, we need to ensure that the sites we create can be viewed comfortably on the screens in use by the maximum number of target (more on this later) customers. A good first step then is to turn to reputable published statistics on what screen resolutions are in use. These statistics give us a baseline percentage: 'if we design to this resolution, the site will be usable for x% of the internet population'.
What these statistics actually define, in most cases, is the maximum width of pages to be designed, as pages that are designed to be too wide will cause page elements to continue beyond the visible area of the browser window. This leads to horizontal scrolling, which makes passages of text , in particular, almost impossible to follow.
Of course, there are occasions when horizontal scrolling is central to the design scheme (making the maximum height the crucial dimension). This is rare (although it can be an excellent approach for some sites) and will generally ensure that the user does not have to scroll vertically instead.
So far, so good: we design a site to fit, say, 800x600 pixel monitors which ensures that about 95% of internet users can see our pages properly, with no horizontal scrolling. In many cases, this is as far as the decision-making process goes, when really it is just the start.
It is important to remember that web pages can be designed and built to expand to the window size available to them. Normally, this means that a page made of several columns will widen either its main content column, or will widen all columns equally. The effect is that text lines will run wider and page lengths will shorten. In some cases, this works well, in others it can be disastrous, destroying legibility and fragmenting the page elements so much that usability is seriously affected.
Another approach is to use a scalable, vector-based technology like Flash, and to scale up everything in proportion to the window area available. Unfortunately, while this can be a highly effective technique, it creates a new set of problems: text can become too big (try reading a poster from a few feet away) and images, which are generally stored at one fixed resolution, degrade dramatically as they are scaled up.
We believe there are three key areas to consider when making decisions about using screen space well: legibility and usability; accessibility; and brand. These three factors, when considered together with the basic statistics, give us the framework we need to make sensible decisions about how to make best use of the screen.
Our primary concern is always legibility and usability. The screen usage we design for can have an effect on the approach we take to information architecture, but it rarely does. In theory, longer pages equals fewer pages: more screen space equals more on each page. In practice, we are usually more concerned with designing pages that have a good visual hierarchy, so our focus is on creating clearer pages, not busier.
Legibility primarily (but not exclusively) affects text, and here there are numerous lessons to learn from both traditional print media and broadcast media like TV. It is generally recognised that long passages of text can be read comfortably when each line of text is between 8 and 11 words long. The larger the text (for example in a headline), the shorter the line length should be. Side-bars and short passages can use much shorter line lengths (particularly if they use a smaller text size), but they should be carefully written to avoid too much hyphenation. And so on.
Online, many sites ignore these well-established principles. In reality, they are even more crucial on screen as reading from a screen is generally less comfortable than from paper (mainly due to contrast and resolution, but that's a whole new article).
So we should consider carefully how wide columns of text are when we design sites: we frequently see sites that use a three-column layout where the central column is too narrow and a page of text in print runs to pages and pages long on-screen. Some allow scaling on larger monitors, but rarely do it well.
In most cases, to guarantee a good combination of legibility and usability, a fixed-width design will work well: if the user expands their browser window, the site pages retain their width, but more of their height will be visible. We still always try to contain every important element 'above the fold' however, so that those on smaller monitors are not forced to scroll to access major elements of a page.
Fixed width designs also help some areas of usability as we can define the relationships between elements of the user interface more precisely: if they are spread too far apart as a site is stretched, they can become less obvious leading to a degradation in the site's ease of use.
If you think this article will be of use to someone else, fill in their details below and we will email a link to them.
Each time we create a new Viewpoint article, we can notify you by email.