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

"DO NOT EAT" THROW AWAY

Steven Wake

I have the driest draw here at Kyan towers. You see, I am the proud owner of a Silica Gel collection. There is just something about them which compels me to not throw away the little fellas.

Get on the 'social media' bandwagon

Matt Hamm

‘Social media’ is the new buzz term. Everybody’s doing it, and why? Because it can generate masses amount of traffic to your website, which can easily turn into revenue. It’s really what ‘web 2.0’ is all about.

Free Wifi in Guildford

Peter Roome

I was asked by a friend today if I could recommend any bars/restaurants/cafés in Guildford where she could access free WiFi on her laptop. Besides Giraffe I wasn’t aware of anywhere else in town so I posted the question to Yammer in the office and received a number of help…

Web Meet Guildford, join us for a drink

Paul Sturgess

It’s been over a year now since we moved to Guildford and we’re really feeling settled in our new home on the High Street. We’ve got our artwork on the walls, an arcade machine setup and we’ve even hosted a live gig. However, one thing we haven’t done yet is meet our fellow web …

Google+