Robin Whittleton

When grids fall apart

Around a couple of years ago the “what screen resolution should we design for?” argument had mostly become irrelevant. 640×480 was out, 800×600 was mostly out and 1024×768 was a reasonable minimum. With this step change over and new grids in place life should be easy, right?

Think again. The intervening time has seen an explosion in web use on mobile devices and the future looks to only diverge from your standard 1024×768 grid you’ve settled on. So what different screens can you reasonably expect your users to view your site on?

  • Standard 4:3 monitors (1024×768, 1600×1200)
  • Widescreen 16:10 monitors on newer laptops and desktops (1280×800, 1440×900, 1920×1200)
  • Netbooks (800×480, 1024×600)
  • Smartphones (generally 480×320, but some bigger)
  • Games consoles and other TV connected devices (640×480 equivalent, HD is generally 1280×720)

Luckily, device manufacturers for the most part have tried to accommodate the current web. It’s a selling point to support the “full web” so the CSS2.1 @media handheld declaration has fallen out of use. Smaller devices (mobiles and TV connected devices) try and solve the resolution problem by scaling the content dynamically, allowing the user to zoom in one one section of the screen then pan around to see the rest. This isn’t an ideal user experience but it’s perfectly acceptable.

Users with older netbooks might have more problems. Zooming isn’t as fluid or obviously accessible on these devices, and the horizontal and vertical screen resolution can be severely constricted, partially due to under-optimised browser menus/toolbars. Conversely, users with bigger monitors may find that content optimised for 1024×768 resolution is uncomfortably small.

A better experience for users

Luckily, we have several options to provide a decent experience to as many users as possible. For people with high resolution monitors, most current PC browsers (with the exception of Safari) support full content zooming. This means that when a user chooses to zoom the entire view gets bigger, not just the text size. Alternatively, now that large monitors are common people are more likely to not maximise their browser window, which lets them use the remaining screen space for other applications.

For really high pixel density machines (e.g. the recently announced Sony Vaio P which has a 1600×768 8″ screen) there’s not a lot that we can do as developers. In the future hopefully operating systems will be able to adapt better to high density screens, but for the time being users will have to learn to zoom for readable text.

For users with lower resolution screens we have a few options. Traditional netbooks are probably the hardest to support: users maybe be running old browsers (e.g. Internet Explorer 6) which don’t have the ability to zoom the page, and may not have much vertical space to view. To cope with these devices it’s a good idea to try and keep the right column free of essential information in case it’s not visible to the user, and to maximise the amount of information ‘above the fold’ if possible while still keeping it readable.

To cope with lots of different horizontal resolutions we could drop the fixed grid approach and use a liquid layout. These can be fairly difficult to produce in a user-friendly way, but a bit of thought (and judicious use of min-width and max-width) can produce a site that looks good and is friendly to use. The fact that browsers these days are very good at scaling images doesn’t hurt either. South Gloucestershire Council’s site is a good example of this approach: it copes well with a range of horizontal resolutions between 800 and 1000 pixels without breaking or getting excessively long lines of text.

Mobile and TV connected devices tend to have fairly advanced browsers – Opera and Webkit have both made big strides in this market. Luckily for us these browsers both support CSS3 Media Queries. This means that we can successfully target smaller screen sizes and create a nicer experience for them. We’ve used this method on our own site:

<link media="only screen and (max-device-width: 480px)"
  href="/stylesheets/iphone.css" type="text/css" rel="stylesheet" />

I probably should have called the CSS file something different as the same styles will work well for most low resolution devices, but it’ll suffice. By adding in the extra CSS file we can reformat the grid to work well on a small screen. For example, we compress the site menu onto two lines and change the portfolio grid into a portfolio list.

As long as you’re aware of the pitfalls we think it’s very possible to provide a good experience to users with many different resolutions.

See more posts

Comments: 4

Chris Simpson
commented on

Do you think that this means there will be a shift towards 'liquid' layouts once again?

Robin
commented on

I doubt it to be honest. I think we’ll see some sites using them, but it won’t be on sites with advertising (sizes are fixed and standardised) so its impact will be minimal. It’s also harder from a visual design standpoint to come up with a design that works well across a spread of different widths.

Which is a shame really.

Gavin
commented on

@Chris

I actually think we will see more liquid layouts again. Now that Min/Max width has far greater support it's easier to have a liquid framework whilst ensuring your content area doesn't become unreadable.

Also we'll see more 'adaptive' designs: UX mag, shopcomposition.com... heck, even eBay is adaptive these days!

Robin
commented on

shopcomposition.com is interesting Gav! They’re doing what I suggested above: if you’re going to have a wide site then make sure that it’s non-essential content on the right hand side. But they’ve got a little design hint in their alpha gradient fade that indicates that there’s stuff you’re missing out on. I approve.

Add a comment

Note: comments are moderated before publication.

Most Popular

Kyan.com design process

Lee Whitelock

It’s great when you get a project you can really sink your teeth into. We pride ourselves on the effort we put into all our projects, of course, but when it’s for your own agency you can really ‘go to town’ and try new things. Our current website was out…

The Entifyr

Steven Wake

The Entifyr is a small web application that started life as an personal experiment to automate the removal of problem characters from client supplied content (usually Microsoft Word documents). The offending characters are replaced with corresponding entities (hence the name) al…

Is imitation really the sincerest form of flattery?

Piers Palmer

A new site has appeared on the wonderful inter-tubes, brought to us by a web design firm in Minnesota – Rocket 55 – that looks remarkably similar to ours. As designers we all stand on the shoulders of giants, borrowing ideas and concepts, using the same typefaces, co…

Writing is hard, so do it

Neil Middleton

Over the last few months I’ve been working on something that I wouldn’t have seen myself doing at any point in my life, and that’s the task of writing a book. I’m not talking about a ‘Janet & John’ novel, or some sort of ‘Fifty Shade…

Google+