Cheat Sheets, Code, Tutorials and just about any Web Development resource that can be snatched

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.

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.

About Me

A Graphic Designer turned Web Designer turned Web Developer. I also work on other things such as translations, but those activities above are what take up most of my working time. And even part of my sleeping time, I often dream I'm working on websites.