Screen Resolution and Design Layout – The DILEMMA!
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.
Click image to enlarge
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.
You can also find out your screen resolution with
http://www.whatismyscreenresolution.com/
Online Screen Resolution Checking Tools for Web Designers
Theoretically all web sites should display properly in all screen resolutions, but practical it is not.
So when designing a website, web designer has to check the site in multiple resolutions to make sure that it works perfectly in all screen modes. But it is not easy to change the local resolution setting every time for testing.
http://viewlike.us/
This site provides a very easy and convenient methods to test web sites in different screen resolutions.
This article is also well worth a butchers….
http://mirificampress.com/permalink/handle_screen_resolution_w_dignity
