Thursday, May 14, 2009

Layout optimized for 1024

Designing for a 800x600 resolution as a minimum was easy: Account for browser chrome and scrollbars (usually 40-50px) and then use as much of the remaining space as possible.
This usually meant a layout width of 750-760px.
However the 800x600 days are over as you can see from the table below.

The most common computer display resolutions are as follows:
Resolution % of Internet Users
Higher than 1024×768 57%
1024×768 36%
800×600 4%
Lower than 800×600 <>
Unknown 3%
Note: These statistics were gathered from visitors to a website dedicated to web technologies, so there may be an over-representation of both higher resolution monitors and lower resolution handheld devices. Updated to January 2009 results.
1024×768 is the current minimum standard these days, and if we use the same logic as for 800x600, browser chrome being still the same, that leaves us with 974-984px as the “ideal” width.
However, many users don’t browse full screen, especially as display resolution is increased. Almost as if there’s an inverse relationship between browser width and display resolution — as the display gets wider, the browser width gets smaller (proportionately).

Additionally, in a time we all are, or should be, considering grid usage in layouts, using 960 pixels seems like a good choice, as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities).

890 pixels is also a good measurement, since it provides a grid of 18 columns (40 pixels each) and 17 gutters (10 pixels each), which you can use in a variety of ways from 2 or 3 equal sized columns or a wide selection of mixed width columns.


Source:
http://www.cameronmoll.com/archives/001220.html



Additional Resources

Five simple steps to designing grid systems
  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid
Khoi's Vihn has devised a way of using a grid as a background image.

1 comment: