When reviewing new or redesigned websites, I’ve noticed a few that don’t fill the whole screen, which has got me thinking about the best way for designers to approach the issue.
It’s impossible to ensure that your website looks the same in every browser, mobile device, or screen resolution, but there are ways to deal with the problem.
Common practice used to be to approach the issue by designing for the lowest common denominator, which meant optimising for screen resolutions of 800 x 600 with a fixed width design.
However, this leaves a lot of blank space for users with higher resolutions, looking something like this:
There are a few possible approaches to the issue when designing a website:
- Fixed layouts – A traditional approach (as above) where the same width is deployed whatever the user’s screen resolution.
Fluid layouts – A more flexible approach where above a minimum fixed width, the website expands horizontally to support monitors with higher resolutions. Here’s an example.
Adaptive layouts – A more sophisticated version of fluid layouts where the coding enables different number of columns to be displayed at different screen resolutions, avoiding some of the problems associated with liquid layouts.
- User-selectable layouts – with this option users can select their preference, possibly in combination with an adaptive layout.
So what is the best layout option?
Fixed layouts are still common, possibly linked to the fact that designers tend to prefer them (as they allow more control over design, visuals and branding), but liquid or adaptive layouts should be considered, especially when it comes to redesigning your website.
However, the potential drawback of using a flexible layout is that static assets like images don’t stretch, so this can affect the look of the site on different resolutions.
Amazon has a flexible layout which looks good in a variety of screen resolutions, but this works well because there is a lot of text on the site. It limits Amazon’s options for ramping up the amount of images and graphics used.
If you do decide to go for a liquid layout then be sure to set parameters for minimum and maximum widths, so that the look isn’t either squashed too much on a smaller screen, or stretched out too far.
Which resolution should you optimise for?
The aim here is to make sure that important content, navigation and calls to action is placed above the fold, so this has to be in your thinking when deciding which screen resolution to optimise for.
Depending which stats you look at, only around 5% of web users now have screen resolutions of 800 x 600. The majority of people use 1024 x 768, or larger. Also, the BBC’s recent decision to broaden its site was based on the fact that 95% of web users have higher resolutions.
You should check your own website stats in any case to see what screen resolutions are the most common among your visitors, as this may vary according to the type of site / audience.
Also keep in mind that not all web users will be viewing their browser in full screen mode, so even if they have higher resolutions, then designing sites for wider than 1024 pixels may not be necessary.
Generally speaking though, it’s best to optimise for 1024 x 768 or higher; this way roughly 95% of web users are going to see your website at its best.
If you still want to optimise for lower resolutions, then at least centre the site and fill in the blank space with brand colours or symbols to give users a more aesthetically pleasing experience.
See me on Twitter
Web Design Best Practice Guide