Designing for diverse displays

Example of media queries in action

One of the challenges of designing a website is considering the variety of devices and browsers used to surf the web. The browser might be Internet Explorer 6, Chrome 7, or a text browser; it might be an audio screen reader or refreshable braille display; the page might end up going straight to a printer. And the gadgets we use are multiplying: smartphones form 19% of mobile phone sales – a figure set to shoot up; the iPad sold over a million units in its first month, reaching 4.2m a couple of months ago; there are tablets running Windows and Linux; Amazon’s Kindle, the ebook reader market leader sports a web browser, as do others; and we shouldn’t forget the 41m Playstation 3s and 75m Wiis, both with browsers. Even within the realm of desktop computers there is a variety of monitor sizes and resolutions, and of course you don’t always have your browser window occupying all of your screen.

Amid all this variety I’m going to focus on varying display sizes. How can website developers create a design that’s engaging and easy to use on different sized displays? I’ve outlined a few approaches below, each with their benefits and drawbacks.

Fixed width

A lot of sites have a static width set in pixels. These fixed width sites typically display the same in all browsers, though if the client area is below the design’s minimum size it won’t fit entirely on the one screen. To help with deciding upon a minimum size, you can use Google Lab’s Browser Size to see how much of your page will be visible to typical Google users, or get your own data from your current site users.

Pros

  • It allows a fixed design to be faithfully reproduced for a large number of users (if not at the same size). This might be a key requirement for a client.
  • It requires less design time, and is a more mature/understood design process.

Cons

  • If there are user stylesheets overriding font sizes, the text can look very untidy and difficult to read.
  • For large displays there’s a lot of wasted screen estate – it would be nice to do something useful with it.
  • It can alienate people with smaller displays, who might find the site difficult to use.

Fluid width

A fluid width layout is one where the designer has relinquished pixel-perfect control over the final page; rather the output should make the best use of the available screen estate. Typically sizes are specified relative to the window (eg 25%) or relative to the font size (eg. 3em).

pros

  • Lets you make full use of available screen estate.
  • Typically still looks good if you resize the font or window.
  • Allows one design to be used quite effectively at different sizes.

cons

  • Less control of the final output (will all stakeholders accept this?)
  • Involves more testing
  • Complicates the design process and requires more web-specific design skills
  • Gives you only limited flexibility when designing for different size displays

Dedicated mobile site

A simple tactic to deal with the multitude of display sizes is to broadly split them into two categories: ‘normal’ and mobile. For the mobile site, the web server will typically inspect the user agent string and decide whether to redirect a browser to the mobile site. This decision’s getting more complicated with larger smartphones that have a resolution capable of displaying the normal site, not to mention the effect of wildly varying pixel densities (the new iPhone retina display has four times the density of the old display).

pros

  • Covers a considerably larger group of users than a typical normal site.
  • Relatively simple solution – two fixed sites.
  • Allows the smaller site to be designed considering small displays and limited input.

cons

  • There’s still considerable variation in display sizes of internet-capable phones and computers, so you haven’t really solved the problem.

CSS3 media queries

A perfect companion to a fluid design is CSS3 media queries. These allow you to add style rules that will only be applied if certain criteria are met, eg. the horizontal resolution being over 500 pixels. This could be used to change the leading, the margins, picture sizes, column layout, and more. If you have a decent browser (sorry IE users) you should be able to see a page from a novel, and a more complex layout, both of which adapt as you change the size of your window.

pros

  • They allow your designs to flexibly take advantage of available screen estate.

cons

  • They aren’t fully supported across all browsers/devices.
  • They complicate and lengthen the design process.
  • They require further testing.

Others

These are just some of the ways to deal with the issue of variable display size. There are a couple of libraries that bring partial media query support to older browsers via Javascript. You could use Javascript to set a cookie with pertinent client attributes, eg display size, and have the server output different markup and CSS based on this.

An interesting alternative for mobile users is Opera Mini. With this installed, your phone requests pages through Opera Software’s servers, which process the pages to make them smaller, but also to make them display better on that particular device. This moves the problem out of the website developer’s domain, and gives it to the browser service.

And finally there’s a bookmarklet from arc90 called Readability that tries to automatically format any page on the web just how you like it, giving you a choice of style, font size and margin size. This moves the power to the end user, who gets to choose how to use their display.

Real life

So what do people actually use on the web then? I took a look at the Netcraft most popular sites list, and checked out the top five sites (ignoring similar sites like google.co.uk).

  • facebook.com uses a fixed width layout.
  • google.com uses a fixed width table for the main search form, and uses fluid display with pixel-based minimums and maximums for search result pages.
  • mail.google.com has a full screen fluid design.
  • youtube.com uses a fixed width layout.
  • wikipedia.org uses a full screen fluid design.

It’s interesting to note that the top five websites all have fairly minimal designs. None of them use media queries.

Looking forwards

I’m excited by the prospect of implementing designs that adapt to the user’s display capabilities, but it’s not a simple proposition just yet. This can be down to client expectations of a pixel-perfect design, increased design workload and complexity, and browser compatibility. I’m confident that this situation is changing, and look forward to seeing adaptive layout more prominent in tomorrow’s web.

Further reading

To read more of our web technology blog articles click here.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By submitting this form, you accept the Mollom privacy policy.