What resolutions should I design for?

For as long as I can remember there has been an unwritten rule in web design that you have to design for 800px by 600px screen resolution or use flexible widths.

The articles explores some of the myths behind that rule.

When I last looked at the rule in 2003 it still made good sense. The statistics indicated approximately a 50:50 ration between 800x600 and 1024x768 and above (after you discard the 10% misc obscure stuff).

  • 800×600 14,702,904 (44%)
  • 1024×768 13,992,243 (42%)
  • 1280×1024 1,636,875 (4%)

Well, things have changed dramatically since then.

Over 70% of browsers have a resolution of 1024 width or more!

This is backed up by recent statistics from www.upsdell.com/BrowserNews. And analysis of our sites (and those of our clients) indicates in some cases the higher resolution monitors exceed 95% of visitors.

Fixed width at 800 px resolution is a waste

In recent years we have developed a particular dislike for fixed width sites designed with a 800x600 resolution.  Why? Well you just neet to look at them on the average wide-screen laptops that Dell is pumping out for $1500 a pop, and you see your website is a thin stripe of content in the centre of the screen.

Designing at that resolution is wasting over half of the canvas for the vast majority of your visitors.

The problems with flexible width designs...

So in the last few years we focussed our designs on flexible widths.

But flexible width design has its own problems:

  • On widescreen laptops the paragraphs stretch so wide that you are left with single lines of long text.
  • Words become "orphaned", that is, stuck out on their own in isolation, especially as Mac and PC renders fonts size slightly differently.
  • Whatever the usability experts say, its nice from a design perspective to know exactly how the text and images are going to work together.  In flexible width designs this can be painfully slow to acheive, as you end up with odd results at some resolutions. For example, when text is wrapping around an image, you don't want to have just a single line of text drop under the image.

Fixed width web design is back. And we are recommending using it.

I’m now getting back on the fixed-width wagon. My main reason: lines are too hard to read in the flexible widths on wide-screen laptops. Now there are ways around this using max-width setting. Its supported in every browser except IE, and there’s even a hack for IE. But fixed width gives you that extra element of control. (My last frustration was with sentences leaving “orphaned” words on a new line, depending on browser and OS.)

So what are the pitfalls of fixed width at 1024 pixels?

800 x 600 resolution monitors will not see the right hand portion of your pages.

They still compromise up to 25% of the market, so we have to be nice to them. The simplest solution is just to accept a horizontal scroll (much as we did 10 years ago when we transitioned from 640 x 480 monitors, on their slide to oblivion.) Just be aware not to place any crucial information on the far right of your design. Our recommendations:

  • Keep the main content text legible at 800 x 600 without horizontal scrolling. Use the right area for “Call outs” or “Tesimonials” etc.
  • Ensure that any critical navigation elements are on the left. So don’t put your first or secondary navigation in the right hand area. Its OK to put non-crucial navigation on the right. eg Back-to-Top, Related Links etc
  • Don’t forget about that crucial stuff we tend to stick on the top right: logos, phone numbers, Login links. They’ll need to be moved!
  • Consider some flexible width sections. Lock the text in to a flexible width, but allow header and footer sections to fill out the screen.

Be nice to printers

At 1024px resolution you can no longer get away without a separate print style sheets. If you have full width text it will more than likely get chopped. If you are still using tables for layout then DON'T or at least remove the table widths from the code and set in CSS so that you can override in a separate style sheet.

Comments

We'd love to hear comments back from users perspective.  We'll add some links to our designs using the different methods shortly.

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
admin
Posts: 1
Comment
Test this
Reply #1 on : Thu May 10, 2007, 12:35:04
Test our comments