News

Pushing the boundaries of resolution

Posted 06/11/08 by David Web Permalink

What is the minimum resolution a web site should be designed for and should you penalise users with small displays.

The launch of the new website for graphic designers Duoh! is an interesting example of a site that rewards users with a high resolution display. The site uses large background images that can only be fully viewed on a resolution of around 1900 x 1200 pixels. 

What makes this site especially interesting is that Duoh! is the business site of Veerle Pieters, writer of the excellent Veerle's Blog. As you would expect the site is written in clean and precise xhmtl and css, but it is the large scale of the overall design and some of its main elements that has been a key issue in the blog discussion.

While I think the construction of the Duoh! site is a prime example of how to code a website, I do find the large size of the backgrounds an issue. On my laptop some are cropped at awkward positions which may give some users the impression that they aren't able to view the whole page.

Perhaps if the backgrounds were less text based this cropping problem wouldn't be an issue.  The very nature of web browsers means that your website could be viewed in one of a vast combination of heights and widths so what is the minimum resolution you should cater for?

Is 800 x 600 still the minimum?

For years now, web developers have been restricted to a maximum width of 800 pixels, but recently there has been a tendency to assume most users now have a minimum resolution of 1024 x 768.  This has led to wider designs becoming more common, with Web 2.0 styles often filling the whole browser.

I would recommend that ideally your website should be able to handle any width of browser.  A maximum width is a good idea, which can then collapse down as the browser is resized.  Generally I would keep the main content area of a website no wider than 800 pixels anyway, as I tend to find narrow columns are easier to scan and read.  Using relative rather than absolute dimensions will also help ensure that your site will scale down accordingly - though this can be difficult if your design contains a lot of graphical elements.

Vertical scrolling seems to be far more accepted now, with many designs actually using pages of content stacked on top of each other, rather than separate pages.  I am not sure if this is beneficial to your page rankings but it does prove that the height of your website isn't really an issue now.  I would still recommend that your logo, navigation and key content is contained within the top 600 pixels so that it is visible on the smaller displays.

What about the mobile web?

Designing for mobile phones causes a number of issues in terms of accessibility and functionality.  A key problem is the small display size.  With the current trend of creating larger websites, the increase in mobile web use is a direct contradiction to website dimensions.

The best approach is to develop a separate website tailored to the much smaller dimensions of a mobile display.  This can then be located on a sub-domain or other different location to your main website. Clean, accurate xhtml is a must here and a cautious approach to using too many graphics should ensure that users won't have to wait too long for pages to load and will be able to view and navigate the content as intended.

Conclusion

As the Duoh! site highlights, web design trends have changed towards making greater use of larger displays.  However, these must still scale down accurately to the smaller resolutions currently in use, so key content can be viewed by everyone.