Resolution dependent layout
21 September 2004
Updated: 19 January 2006 (See the new entry for details)
A few weeks ago I thought that I might try out 1280 x 960. 1024 wasn't really doing my 19" any justice and I thought that if I cranked it up I might actually be able to design a full web page in Photoshop without having to squeeze between palettes and grope at scrollbars.
Boy, was it luxurious – way more content on screen, smoother edges, and plenty more squinting. But after I'd put out my first design at super-res and looked at it on another system, I had to swap back. Why? Because there was too much freedom for me. With so much space available – particularly in my browser – it was too tempting to use it, and people from the year 1998 be dammned!
I've said it before: Web design is about working well within restrictions. This often means catering for the lowest common denominator. Nowadays, in the case of page layout, this means making sure your site doesn't have horizontal scrollbars on a maximised 800 x 600 screen. That's 25% more than the baseline of six years ago – 640 x 480. Who knows what it will be in 10 years?
The nature of technology is change; better, faster, stronger. The challenge for those who design applications that rely on technology is to provide forward-thinking design while still allowing those with outmoded technology to access the new applications.
Speaking entirely visually, there's quite a few technologies in flux at the moment that affect web design – font support, CSS 1/2/3, Standards support, SVG – but I would consider most of these to be efficiency gains; they don't affect what we do, so much as how we do it. Monitor resolution, however, I think has the capability to affect the fundamental design of web pages.
A good example is the new(ish) Coudal site. Designed specifically for 1024 or greater, its layout is something that just wouldn't work on 800. Three columns begins to look a bit cramped at that width, and even though it might be readable, it certainly wouldn't be the pretty image that Coudal would like to convey, so they've left 800 x 600 by the wayside.
Of course, this probably isn't viable in a commercial setting (depending upon your target market). That is why, on a soon to be released web project, I've utilised the inherent separation of content and style in XHTML/CSS to allow for two distinct layouts. One for 800 and below, one for above.
It's essentially a news site, so the homepage – with its snippets of articles and pictures – is a prime candidate for columnification. But you don't get too many words per line at squishy widths, so at lower resolutions it's better to present the user with a single column of teasers. Of course, it all has to be degradeable.
Granted, it is extra work (the scale of which depends on the complexity of your design), but when it improves the overall usability, readability and browseability of your site without leaving anyone behind, it can be a worthwhile investment.
Tested in IE6, Firefox 0.8, Opera 7.5. IE5.x (Win) receives single column layout by default, as support for % widths is buggy.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout