Mountains or Mole Hills
 

Common Layout Sizes

What size should you make your layout for a web site? Is there one layout that will fit all monitor sizes?

The basic width of a layout determines a lot of the internal layout sizes for panes, modules, images, and internal content. 

Some common layout widths.

  1. 960 pixels, 16 columns 10+40+10 pixels each
  2. 960 pixels, 12 columns 10+60+10 pixels each
  3. 820 pixels, 4 columns 10+180+10 pixels each + 10 pixel margin
  4. 740 pixels, 12 columns 10+40+10 pixels each + 10 pixel margin
  5. 740 pixels, 3 columns 10+220+10 + 10 pixel margin
  6. 740 pixels, 4 columns 10+160+10 + 10 pixel margin
  7. Yahoo UI, 750 pixels, 950 pixels, 974 pixels, 100%
  8. Blueprint CSS - 950 pixels, 24 columns, 30+10 pixels each

All of these layouts lead to some fairly common shared sizes for panes.  Any of these sizes will fit within the most common layouts.

  1. 520 pixels
  2. 460 pixels
  3. 240 pixels
  4. 180 pixels
  5. 120 pixels

820 4 Column Layout

740 3 Column Layout

740 4 Column Layout

References

  1. 960.gs
  2. Yahoo! UI Library: Grids CSS
  3. Blueprint CSS
 
Tags: | |
 

Related posts

Add comment


 

  Country flag

biuquote



Live preview

July 5. 2008 17:05