Archived entry | Matt Wilcox .net

Time to forget 800x600? Dealing with display resolutions...

According to OneStat only 12% of web surfers use a resolution of 800x600, everyone else uses something higher. It’s good news like this which has lead me to giving 1024 designs much more prominence, as long as time and budgets allow for alternate 800 layouts. But how should we deal with multiple resolutions, without hurting either the low resolution minority, or hindering the high resolution majority? 12% doesn’t seem much, but we can’t afford to make life difficult for 12% of our visitors. On the other hand, why choose to restrict ourselves and everyone else to 800 designs if over 80% of your audience can handle more?

Accommodating diverse screen resolutions in website design

There are a number of ways to have the best of both worlds; A design that works well for both the low resolution minority, and the medium to high resolution majority.

Liquid layouts

Liquid layouts allow the size of the website to alter dynamically, to accommodate the width of the browser. There are multiple ways to accomplish the end result, and a quick Google will find most of the better ones. A good looking example site would be the Australian Amnesty International website. You can see how changing the width of the browser makes the content flow differently, and they’ve made sure it can’t be made too narrow by using the min-width attribute. Liquid layouts are an easy effect to achieve in principal, and as long as the design is reasonably simple it’s unlikely to run into any problems. But get a little too adventurous and it’s easy to run into a plethora of browser bugs (mostly in Internet Explorer) which makes some liquid layouts tricky from a technical standpoint. The system works best with text heavy pages that don’t have an intricate internal layout. Without specifying min-width or max-width the site will always fill the entire screen, no matter what resolution the user is running. This runs into it’s own problems, when line-length can become arduous and confusing at very high resolutions, so it’s best to choose a font size and line-spacing that will stand up to long lines, or to set a maximum width.

Dynamic resolution dependent layouts

A while back Cameron Adams of The Man in Blue wrote a neat Javascript solution that allowed the browser to switch which stylsheets it was using based on the reported resolution of the browser. Later on Kevin Hale of Particle Tree Improved upon the idea, and early this year Cameron did the same by improving his old script. Whether Cameron or Kevin’s implementation is ‘better’ will depend upon your own skills with Javascript and your particular programming bent, both seem to work very well for me.

The great thing about this technique is that one design can be explicitly tailored for low resolution screens, and another for high resolution. If you wanted you could even add a third, to cater for extremely high resolution. In this way, there are no compromises in either design. In fact, it’s possible that the look of the site could be totally different depending on the screen size. The downside is that you end up making two designs, and writing two sets of CSS files. It also depends upon JavaScript being turned on. That’s not much of an issue though, simply use the low resolution CSS as the default, to be sure that old computers with JavaScript incapable browsers still get full access. People with higher resolutions are likely to have JavaScript enabled and be running reasonably modern browsers anyway.

Rosenfeld Media is a nice example of a site using this technique. Look at it in a screen that’s only 800px wide, and you will see narrow columns. Expand your browser to something a bit higher, and you will see it switch to two wider columns. Both designs are fixed width, meaning it’s possible to get fancy with the internal layouts, without running into the problems that a liquid layout can throw up.

The best of both worlds

Earlier this year Andy ‘Malarkey’ Clarke and myself were working on a design for Fifth Wheel Co, and decided to try a blend of the above two techniques. The site uses Kevin’s resolution dependent layout script to provide the browser with one design at low resolution, and a slightly tweaked version at higher resolution. Both of those designs are also liquid. You can see the effect by starting with your browser window very small (minimum 800px). As you re-size the window you’ll see the columns re-flowing, until they get to a certain point, and then they ‘pop’ into the high resolution layout. Again, this is also liquid, so dragging the width still further will make the columns reflow, up to a set maximum width. In this way we got a degree of control afforded by using multiple stylesheets specifically designed for certain browser sizes, but we also got the nice ‘filling’ effects of a liquid layout at the same time.

Entry Information

Posted:

Sun, 25th Jun 2006 at 12:06 UTC

Filed under:

• Web Development

Tags:

• best practices
• css
• design
• javascript