A Handy Resource for 1140px Designers

A Handy Resource for 1140px Designers

Many designers have been designing for 1024px screen widths for the past few years. The 800px resolution is dead and buried, but with many... 00:21

Many designers have been designing for 1024px screen widths for the past few years. The 800px resolution is dead and buried, but with many users on monitors and laptops of 1280px wide and wider screens, how do you go about designing for that size?
A resource you may find useful is the 1140px Grid created by Australian designer Andy Taylor. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. The grid consists of twelve columns, which can be evenly divided into columns of two, three, four or six. In terms of browser support, Andy’s grid works in Chrome, Safari, Firefox, IE7, and IE8. IE6 (there’s always one, isn’t there?) doesn’t support max-​​width, so the grid doesn’t fix to 1140px. It spans the full width of the browser.

Gutters and Images

The gutters vary in size because the grid is based on percentages. At full width the gutters are 40px wide. When using images, if an image is smaller than the column it is contained in, it will be displayed at its original size. If it is larger then it will be shrunk to the width of the column. For this reason the width and height of the images should not be defined.

Grid for Mobile

The grid has not been designed to support older WAP phones, but has been tested and supports the iPhone 3 and 4, iPad, some Android phones and the Blackberry. It works for devices that recognize ‘handheld’ in the style sheet media and/​or media queries. With media queries you can even include x2 images for the iPhone 4 Retina Display.
You can download the grid for free from here. The download features an index.html file and six style sheets. It is licensed under a Creative Commons Attribution-​​ShareAlike 3.0 Australia License. You can also download a Photoshop template of the grid at 1140px here, which is based on how it’s displayed in Web Kit, so it’s actually 1133px, as all browsers round sub-​​pixels slightly differently.
What resolution are you designing for? Is is too soon to move to a 1280 pixel layout?