{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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: 

screen resolution

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

Related research:
Web Design Best Practice Guide

Graham Charlton

Published 23 October, 2008 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (3)

Avatar-blank-50x50

Rick Whittington

If it's a redesign, we always look at what screen resolutions a site's visitors commonly use. 9 times out of 10, we design a fixed layout optimized for 1024x768.

about 8 years ago

Alan Charlesworth

Alan Charlesworth, lecturer / researcher at University of Sunderland

Sound article ... however, this thread could easily turn into a Harry Hill-esque ffffiiiigggghhhhttttt between marketers [the site must do a job] and designers [aesthetics and latest apps]

The answer is - of course [I'm a marketer] - design for the target audience.

My twopenneth is that many of the pages on my site will be printed by students, so I stick to 800x600 so that the default parameters of [most] printers are catered for.

Whilst I agree with your examples of BBC.co.uk and alistapart.com - try printing them out without playing with your printer set-up for a while [which I cannot, they are set by 'tech-support'].

about 8 years ago

Avatar-blank-50x50

Sprocket999

We struggle with this everyday with our clients as well. Regrettably, the average user out there has forgotten that the great wacking space on the right-hand side can be closed up with the browser window grip in the lower right corner, should that space be so 'annoying' or (my fave) 'unprofessional looking'.

I remember while I got a promotion AND a larger desk, I though: "Wow -- I have more space to organize my papers on my desk" instead of "My papers are too small for my desk now - I gotta find bigger paper".

Screwy world we live in, alright, but screwiest online for sure! (LOL)

about 7 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.