By Jennifer Farley

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

By Jennifer Farley

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.


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?

  • Is the small font intentional? The content’s font here is too small to read…

    • goldfidget

      span style=”font-size: x-small” ?

      • Hi Angelee and Gold. The font size was my mistake, not quite sure how the span got in there, but it should be legible again now, thanks.

  • goldfidget

    Nice responsive design. I would be interested to see how it behaves in IE7 and 8 at resolutions below 768px. I don’t have my IE test box with me today.

  • 800px may be dead, but 1024px certainly isn’t! I generally go for 980px wide as a guide

    • York

      Just because screens are larger, does not mean you need to create sites to that width. As a professional and qualified graphic designer, I know for a fact that there is a maximum width a person can read and view a website. 1024 max is already pushing the width barrier. Remember optimum line length is no more than 10 words per line — approx 33em width and no grey text on white background. A lot of people tend to forget this.

      Also another note: Let’s say you create a site which the client can add more pages and content — this is from a vast amount of experience here — the client has a large screen and creates content for that large screen. They never think of reducing the width of their browser to the site’s minimum width. The content breaks the site. This happens for too often and the client has no idea they are ruining their revenue potential.

      If the site is too wide to take in all the site without moving your eyes or head, you will not be able to place advertising in locations which is close to the reader’s eye. The site would be far too hard to read.

      If you choose to go wider, please have a very long think about how it will change the way the viewer will read and take in content.

      Do we really need more disasters such a 100% width?

      • goldfidget

        But the content column is limited to 550px wide. I dont see this as a problem here.

    • rah

      Yes – I agree – even when freelancing I see a lot of people still have 1024 x 768 and i dont think that is dead as yet.

      I generally go for 980pm wide as well.

      • goldfidget

        …and this design degrades beautifully into 1024, 800 480 and below. 1024 isn’t dead but if you’re going to go responsive you might as well target the upper bracket.

  • Glutnix

    A major concern for sticking to 1024px wide is that most office data projectors are still 1024×768: wide-screen HD projectors are still not cheap. If you are intending to demonstrate your website to anyone in that way, you’ll need to stick to 1024px wide.

  • Thirteenva

    Too soon, many netbooks and tablets are only 1024 wide. Whether we like it or not, 1024 will be around for a little while.

  • Great article also much needed with all the devices on this planet we need fluid

  • goldfidget

    Just checked in IE. It looks alright in IE8 but because of the lack of support for conditional media queries, you don’t get the alternative layout at narrow screen widths. The dog image and transparent PNG download icon breaks in IE6 but I could live with that.

    Are we allowed to use browser scaling of images now? What do people think?

  • mathieuf

    While web page designers may think that the wider monitors offer a larger canvas to design for, keep in mind what the user may be doing. Wider monitors will often mean the user will have side-by-side applications open, such as a browser and email. Do not count on the browser being maximized to the monitor, or that the user has no side-bar open in the browser. Many things can limit the space available for a web page to display in.

    The Web offers more flexibility to the user to have the browser positioned and sized in a fashion that is right for them. Web site designers should use fluid design and other web features to let the users do what is right for themselves, not fit to what is right for the designer.

  • kaf

    This looks awesome. Or at least the idea is awesome. I sometimes use a similar technique in my designs but I never thought to make it generic and so flexible. I think I would like to create my own though as I don’t like dumping other peoples css in my sites. I like to know where everything is for when I have to modify it.

    And for all of you worried about the 1140 width. Just change it. The code is there. Its the columns that make this idea useful.

  • I’ve used this for my personal portfolio site:

    I think the concept is great. Great space to work with at the largest resolution but then the site displays really well on all devices and screen sizes. It was one of the easiest css frameworks to learn out of all the ones I’ve ever looked at. I am however working on a new design that isn’t based on this framework. The way it handles images at smaller sizes is a little inconcistent and if you want a border down each side of the container, it messes up how the design fits on an iPhone screen.

    I asked a client what he thought of it after he requested a site that displayed well on mobile devices and he didn’t like it as he thought websites should look like they do on a desktop when displayed on his iPhone and then just let him zoom in rather than trying to adapt to his needs.

    • Anonymous

      Beautiful but on wordpress

  • Layout that falls apart in Opera, (check the purple code section), breaks horribly scripting disabled, and relies upon presentational markup and classnames to even function? (at which point why not go back to using HTML 3.2?) IE conditional garbage for nothing? 6 separate stylesheets to do something as simple as a page layout?

    Sorry, but folks — just say NO to CSS frameworks.

    Especially for something as SIMPLE as a semi-fluid layout — seriously what the ?!?

  • Oh, and apparently it crashes opera 11 and FF2 when you try to close the tab is in — don’t know WHAT’s up with that.

  • A note on the widths that people read.

    Remember that resolution does not necessarily translate into real-world dimensions. You can have a 15″ screen with a resolution of 1280px, or a 30″ screen with a resolution of 800px. Not saying you would, but it is something to keep in mind, not just with this, but any design work that you do which is presented digitally.

  • Silver Firefly

    I like the idea of increasing the size. Okay 1024px isn’t dead, I still use 960px as a base for my designs, but there is no reason not to use 1140px whenever its reasonable to do so. I like the fact that grids can be fluid too. Too many times developers don’t use fluid grids. No-one has to use CSS frameworks to make a grid fluid either. Just do it yourselves!

  • AJZ-Studio

    I was reading over the comments about the grid, and I am a bit new to design and this site. Now I didn’t download the file as I am on my iPad at this time but if reading this correctly the grid acts as an elastic template and causes content to grow or shrink with monitor resolution. The question I ask is, would this mainly be for non IIS 7-7.5 web servers? I ask because I am running my site on IIS7.5 and it seems to deliver all the content at the correct sizes with out a lot of coding for monitor resolutions and such.

    I have about eight or so different projects on my server and I test them all with I.E 7 up, Firefox, Safari on desktop and laptop computers and have also tested them on iPhone 3 & 4 and my iPad and there does not seem to be much degradation from the way I wanted them to work. So guess I am not sure what the idea behind this is and was wondering if it’s mainly for an apache type server?

Get the latest in Front-end, once a week, for free.