Blogs

Moving up to 1140px? Here’s a Fluid Grid to Help

    Jennifer Farley
    Share

    Many designers have been designing for 1024px screen widths for the past few years. The 800px resolution is long dead and buried, but is it time now to start designing for a higher resolution screen? 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 & 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.

    1140Grid

    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?