Design & UX
Article

A Handy Resource for 1140px Designers

By Jennifer Farley

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.

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?

More:
  • http://www.cleverclick.gr Michael Persson

    It is always interesting to see how other designers work. I as an interactive designer have other ideas than a traditional designer for print. To merge experiences and find a combination of design strategies and thinking is always interesting and a challenge.

  • http://www.gmlimages.co.uk Gill Langridge

    A really useful article as I am trying to revamp a site and want it accessible for all devices.

  • David Ford

    NOT SO FAST!!! – I still have a useful laptop (running linux) with a 600×800 screen – sites that don’t ‘fit’ really wind me up.
    David

    • http://twitter.com/matt5409 Matt Saunders

      joke?

  • Mo M

    In the end, choosing the the width of your site depends on your audience.

    With simple analytics you have all the info you need to see who visits your site and on which resolution. But as always, fluidity is key

  • http://twitter.com/nathj07 Nathan Davies

    The increase in netbooks is worth considering. I have such a device and on it’s own most sites fit width ways. However, if I plug it into the old 4:3 monitor I’ve never replaced the wider sites force horizontal scrolling. I may be an exception here but as I do most of my design work at work I’ve never bothered upgrading at home.

    The other point is that a lot of schools – even very new ones in the UK still use 4:3 monitors which means 1024 is normally fine but anything wider and the horizontal scroll kicks in.

    I think that fluidity is key – working in such a way to make every reasonable effort to ensure the site looks good on 1024 upwards – it is finally safe to ignore 800 even though I have one.

    • http://designfestival.com Design Festival

      Hi Nathan,

      Thanks for your feedback on Design Festival, it will always be welcomed.

      I have forwarded this on to our development team.

      Thanks,

      JP Toral
      Customer Support Officer
      sitepoint.com

    • BPM

      “…make every reasonable effort to ensure the site looks good on 1024 upwards – it is finally safe to ignore 800…”

      What if I want to float my browser? Am I the only one that sometimes uses a browser NOT maximized? Say my monitor is 1280px wide. If I want to compare two sites side by side, they have to work at 640px wide.

      FLUID *is* the key. RESPONSIVE DESIGN is the way to go. But don’t forget small sizes.

  • http://twitter.com/hortongroup hortongroup

    Thanks for the grid!

  • FrozenBrowserHell

    I have a design suggestion. How about redesigning your site so it doesn’t take 5 minutes after any page loads before it will scroll or respond in anyway.

    You might find this process is aided by removing the half-ton of superfluous ad-tracking social-graphing JavaScript.

    • My Charlot

      I totally agree

    • Gotcha

      100% correct, of course. That’s why I never drive without NoScript. Nothing slips by. Yes, it can become a bit obtrusive since nearly ever webpage is cluttered with javascript diarrhea, but it’s worth the trade-off.

  • http://twitter.com/SigSeattle Sig

    I’ve had my monitor at 1280 and more for years now

  • http://twitter.com/matt5409 Matt Saunders

    experimenting with this grid layout – seems like a great solution so far

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.