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 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
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
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.