Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

A better Photoshop grid for responsive web design

Posted on 20 January 2012 90 comments

Article illustration for A better Photoshop grid for responsive web design

In making the move to responsive web design, one of the potential hurdles is the rather awkward maths for calculating the percentage-based widths necessary for fluid layouts. If, for example, you’re designing with a 960px grid in Photoshop and you have six columns, each 140px wide, you divide 140 by 960 to get your percentage-based width: 14.583333%. Now, I don’t know about you, but numbers like that look a little scary. It doesn’t matter that there are great calculation tools built into TextMate to do the maths for you; the point is that the final figure looks like an arbitrary number with no immediate relation to either the container’s pixel width (960) or the element’s pixel width (140).

Compare that to a container that has a width of 1000px. 1000 is a nice, easy, round number. Dividing by 1000 results in clean percentages and better still, dividing by 1000 is something we can do in our heads: just remove the zero. A 140px column inside a 1000px container is 14%. A 500px column in a 1000px container is 50%. 320px is 32%. Easy!

Here’s the PSD. And, in the interest of showing how a static Photoshop file can translate into a fluid web page, here’s an HTML demo.

But what about our precious 960 grids? I hear you cry. That holy number has served us perfectly well, dividing easily into multiple columns and accounting for browser chrome on 1024 screens to define an accepted ‘safe area’. But the 960 grid was born in a world of fixed-width layouts. If we’re building fluid designs, the simple reality is that your grid can be whatever size you want, because we’re concerned only with relative widths. The days of worrying about absolute widths have passed.

I should point out here that I’m not proposing a new framework. In fact, I’m not even saying that we should all start using grids whose containers are specifically 1000px. The point is that it’s about making our lives easier, and 1000px happens to be an extremely easy number to deal with.

Caveat 1: margins

A small caveat is that the 1000px grid assumes you’re not bothered about gutters on either side of the container, which might bother some people depending on the way you do your column margins. I’ve included guides in the PSD to indicate where they’d usually be, if that helps. I expect some people will also complain about there only being six columns, but personally I like to keep things simple: nice big numbers and nice big columns. Adapt as you see fit.

Caveat 2: rounding errors

In Webkit browsers, an error with the way the rendering engine treats percentages means that although we’re dealing with whole numbers, the widths can actually appear as if they’re slightly off:

Screenshot of browser inconsistencies
Left: at certain browser widths, Safari fails to interpret percentages correctly and introduces slight alignment inconsistencies. Right: Firefox gets it spot on.

If you’re a pedant, this might keep you awake at night, but I tend to take a more pragmatic approach to web design and accept that a little inconsistency never killed anyone. In the example the misalignment is obvious because of the way the columns are shown, but in the real world it would barely be noticable, especially when dealing with ragged-right type.

I’d love to know if you find this useful!

90 comments

  1. katie

    katie

    20 January 2012 @ 05:28PM #

    Wonderfully simple approach to what might else be a massive headache. Trying to break into responsive design myself so this is very helpful!

  2. Dave Rupert

    Dave Rupert

    20 January 2012 @ 05:47PM #

    Great post, Elliot!

    I’ve noticed the rounding inconsistencies as well, it’s particularly bad in Opera. Near as I can tell, this is a really old sub-pixel problem. Maybe we can lobby our browser friends for better support of sub-pixel calculations since ratios and proportions are becoming more important in modern web design. The method that Firefox is using seems to perform the best.

  3. Alan Houser

    Alan Houser

    20 January 2012 @ 06:19PM #

    Yes— great post! Thanks for the math(s).

  4. Jen Wilhelm

    Jen Wilhelm

    20 January 2012 @ 06:32PM #

    This will be perfect for when you want to design a site that fills a wider portion of the screen (even more than 1000px) to target users with high screen resolutions (like myself). Thanks!

  5. Andy G

    Andy G

    20 January 2012 @ 07:05PM #

    [speaks with developer hat on] I love to see websites that conform to a grid, have consistent line heights, borders and all that design-in-perfect-proportion stuff. But if I’ve learned anything from #naconf in the past 2 days it is that “we” should be prepared to push out into the unknown and stretch the boundaries to roll with the punches of a dynamic canvas. Nothing is fixed, nothing is regular. Call it responsive, call it a pain in ass [arse], but the norm has changed and shifted. Move with it, or move ahead of it if possible.
    Not “responsive layout”.“Adaptive design”.

  6. Kev Adamson

    Kev Adamson

    20 January 2012 @ 07:16PM #

    Nice.

    I tend to use inline-block instead of floating, and wondered if this might inadvertently fix the sub-pixel issue. It didn’t.

    I’d say this needs fixing urgently, especially with the uptake of responsive layouts, and the big part percentages will play in many cases.

  7. Steve

    Steve

    20 January 2012 @ 09:06PM #

    Nice,
    Simple is good. Lets stay simple.

  8. Andy Owen

    Andy Owen

    20 January 2012 @ 10:57PM #

    I like the simplicity of this as a starting point – 1000 pixels is much easier to work with, and the template is a useful demonstration of how the canvas can be divided up. For anyone wanting to incorporate margins (or increase the size of gutters) within the 1000 pixel width, you’ve demonstrated that it’s easy enough to adapt your example.

    As a more extreme example, I worked with a canvas of (25) 40 pixel columns for a recent design. This unit became the base for my margins, gutters and wider content columns, which were then (mostly) converted to percentages, of course!

  9. Alexandru Nastase

    Alexandru Nastase

    21 January 2012 @ 01:43AM #

    It really gave me a new view on how I imagine and design my websites, thanks Elliot, simply brilliant.
    Cheers!

  10. Tieson Wooten

    Tieson Wooten

    21 January 2012 @ 02:06AM #

    Great article! Kicked me in the rear to create my own PSD layout for a responsive site. Thanks!

  11. Aghosh Babu

    Aghosh Babu

    21 January 2012 @ 05:19AM #

    What happens if one uses this layout and set a maximum width of 960px to a root container ?

  12. Tebbott

    Tebbott

    20 January 2012 @ 05:45PM #

    After NAConf yesterday, I promised myself I’d make more of an effort with responsive design, and this has just given me a brilliant starting point. Cheers Elliot.

  13. Josh Green

    Josh Green

    20 January 2012 @ 05:48PM #

    Lovely article Elliot, thanks for taking the time to write this. I think this gets the closest I have seen to what I would describe as a easy to use framework of CSS for the purposes responsive web design.

  14. Joris

    Joris

    21 January 2012 @ 11:09AM #

    Thanks for putting this out. I just got started with my classic 960 grid, but then calculations start becoming a mess quickly. I’ll now take the 1000px as a starting point and see where this goes. Look like a great solution to my problem, thanks Elliot.

  15. ZonTonk

    ZonTonk

    21 January 2012 @ 04:52PM #

    Great one mastah, but Not working well in IE

  16. Jon

    Jon

    21 January 2012 @ 06:20PM #

    Simple, elegant, beautiful grid! Thanks for a great post.

  17. toribloger

    toribloger

    21 January 2012 @ 09:19PM #

    Simple and really useful! Thank you

  18. Adam Wilson

    Adam Wilson

    21 January 2012 @ 12:29PM #

    As a traditional designer who has just always accepted the 960px grid as ‘the way’ this is refreshing. I’m starting on this on Monday, 1000px does just sound lovely.

    The old newspaper designer in me kind of wants to adapt this to an 8/16 column grid though, might see what I can come up with.

  19. Jozsef Deak

    Jozsef Deak

    21 January 2012 @ 09:00PM #

    Thanks, helped me a lot. Just working on some fluid site and the whole rounding stuff caused me a lot of headache. Now I see things a bit differently

  20. shreejaya

    shreejaya

    21 January 2012 @ 10:45AM #

    Thanks for sharing with us.

  21. Adam Wilson

    Adam Wilson

    22 January 2012 @ 10:41PM #

    Ah ha, for those of you wanting a few more columns, could all just be divided by 2 again, making this a 12 column grid. This way you get a few extra options:

    1 column = 65px (handy for white space)
    4 column = 235px

  22. Andrés Botero

    Andrés Botero

    24 January 2012 @ 09:43AM #

    Thank you! is nice to hear someone else thinks the same.
    I stopped using the 960 grids in my last two projects, I had the same issues you spoted.

    Thank you for the psd, very useful.

  23. Ryan Glover

    Ryan Glover

    25 January 2012 @ 01:52PM #

    Thanks for sharing this, Elliot. Your note about percentage inconsistencies in Webkit really helped me to understand some issues I’ve had in the past (I found myself tweaking numbers to get it ‘just right’ every time). Excited to grab the PSD and try a new approach.

  24. David Ashkanasy

    David Ashkanasy

    26 January 2012 @ 04:02AM #

    I appreicate this template and will give it a go for the projects that require extensive design prototyping.

    That said – I’ve found that my workflow process has had to change significantly when it has come to responsive web design, with PS in particular leading to excessive additional work to show the changes as well as not being relfective of real world possibilities. The past year has seen me change to mostly HTML prototyping, after wireframes, with elements being imported directly from photoshop.

    I find there are just far too many variables with responsive web design for a static display system like PS to handle.

    Is this just me? Or has PS begun to run its course as a prototyping tool for web design?

  25. Andreas Sauer

    Andreas Sauer

    27 January 2012 @ 12:38AM #

    Elliot,
    belive it or not. I’ve had a similar idea a few weeks ago, but i never got around realizing it. Oh, me and my lazy behind.
    I hope you don’t mind me being so impertinent to mix in my thoughts by fiddling with that container a bit…

    div.container {
    background: yellow;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;
    padding: 0 2%;
    max-width: 96%;
    }

    I’d modify the outer container to have paddings of 2% each to the left and right. I’d also would add a maximum width to the container, because on multiple occasions I ran into buggled clients, that ran their browsers on 23+ inch screens in fullscreen.
    That way the grid would also break down into the rightfully beloved 960px, and any smaller common denominator.
    I think Safari’s rounding behavior can be treated using floating values for the grids, maybe by further correcting the total width at the the div.row div:last-child. I’ve fear what IE’s idea of that’ll be, though.

  26. Luke Connolly

    Luke Connolly

    30 January 2012 @ 09:07PM #

    This is one of those “so simple it’s genius” ideas. I agree that repeating decimals just feel wrong… this is a wonderful solution. I can’t wait to steal it and pretend that I came up with it. :)

  27. Kieran

    Kieran

    30 January 2012 @ 11:10PM #

    Thanks! This is The last reason to start and try fluid layouts

  28. Enrique García

    Enrique García

    30 January 2012 @ 11:24PM #

    I like nestable grids, and percentual margins just don’t allow those – The width of the margins in the interior grids get gradually smaller, while I usually want them constant-sized.

    Is there a way to have the percentages in the margins relate to the “root container” while the dimensions of the cells relate to their container?

  29. Gene Locklin

    Gene Locklin

    31 January 2012 @ 01:25AM #

    Thank you.

    As someone who uses a large screen, I’m always happy to see ideas that push beyond 960. Now, if we can just find a way to get people to bump up their text size, as well .

    I’ve created a Gist of your grid, albeit slightly amended, as a SASS mixin. https://gist.github.com/1708004

    Cheers.

  30. Ron Waldon

    Ron Waldon

    31 January 2012 @ 01:31AM #

    [insert comparison to Imperial-versus-Metric debate here]

    Sorry, couldn’t resist. :P

  31. Francesco @ Fornace

    Francesco @ Fornace

    31 January 2012 @ 01:36AM #

    I love it when is easy :)
    Enrique, you could experiment with paddings, I suppose.

  32. Fraser

    Fraser

    31 January 2012 @ 03:39AM #

    Awesome!

    The 1 col, 2 col etc terminology confuses me though. And it doesn’t quite allow for a quarter / three-quarter split of the full width.

    I’ll definitely use your idea in my dev work/play but probably use whole, half, third, quarter, sixth etc

    Kinda like this.

    http://farser.com/img/share/ejs_1000px_responsive_grid-with-quarters.jpg

  33. Joel Evans

    Joel Evans

    31 January 2012 @ 03:57AM #

    Brilliant, although as with most responsive layouts, there’s a limit to how far it’ll stretch before you get horrid, unreadably-long lines of text… but I guess that’s what max-width is for (or does that violate the principles of RD?)

    Either way, responsive layouts are certainly becoming more mainstream — a sign of how far and fast the web is changing now that IE6 is tumbling into the eternal flames of browser hell, and we can finally breathe easy when using display:table-cell, inline-blocks, and floats.

  34. Bert Smith

    Bert Smith

    31 January 2012 @ 05:47AM #

    I’m still fairly new to web design, but when I first started and learned about the 960 px default layout even as a beginner the numbers and fixing the sizes for each element seemed a bit daunting. I from the beginning just went ahead and went with the 1000 px. Great post and fantastic insight!

  35. Michael Shmichael

    Michael Shmichael

    31 January 2012 @ 09:14AM #

    Would it be fair to say that this is more “fluid” than responsive?
    In that it doesn’t account for the “responses” involved in “responsive” design.

    Just sayin’…

  36. Stephen

    Stephen

    31 January 2012 @ 09:14AM #

    Thanks for sharing ..

  37. Espen Brunborg

    Espen Brunborg

    31 January 2012 @ 09:17AM #

    Good idea this, though I’d feel restrained by the relatively small gutter width, which is one of the reasons I dropped 960 a while back (now I’m using 978 or the modular grid). The one thing I don’t get though, is the insistence on 1000px width or, indeed, 960. Sure, this makes sense when you’re dealing with pixels, because you want your columns to be nice even pixel numbers – but isn’t it completely irrelevant when it comes to percentages? I mean 15% is 15% no matter how you look at it, right? Who cares if that translates to 148 or 150 px… Furthermore, as we’re talking responsive design, whatever width you set will presumably change by definition – throwing pixels further out the window.

    Also agree with other comments on the lack of a 4-way split – but that should be easy enough to work out.

    Great contribution!

  38. Petar Acanski

    Petar Acanski

    31 January 2012 @ 11:09AM #

    Great stuff!
    It is better treatmen for IE8 if you change logic div:last-child to first-child {margin-left: 0;}

  39. Binyamin

    Binyamin

    31 January 2012 @ 11:12AM #

    http://static.elliotjaystocks.com/responsive-grid/html-demo/ is fine just on Firefox and IE9.
    The best solution would be CSS3 Flexible Box Layout http://www.w3.org/TR/css3-flexbox/, but it will take time till it will be fully supported http://caniuse.com/#search=flexbox and the must featured browsers will be only-used browsers http://gs.statcounter.com/#browser_version-ww-yearly-2011-2012

  40. Edson

    Edson

    31 January 2012 @ 01:17PM #

    Man! I didn’t realize that we could deal with a rounded value (like 1000px) just to specify the %s. It’s so obvious!
    I’ll keep these two sentences in my mind from this moment on:
    1. The 960 grid was born in a world of fixed-width layouts.
    2. The days of worrying about absolute widths have passed.
    Thanks for the enlightening article!

  41. Simon

    Simon

    31 January 2012 @ 01:26PM #

    What you doing in that hole?

    Great article, thanks :o)

    Simon

  42. Colin Oakes

    Colin Oakes

    31 January 2012 @ 03:19PM #

    Great post Elliot! This definitely makes the math a lot easier, 1000px makes way more sense then 960px for a fluid layout.

    Only problem is that your code currently does not work in IE7, not sure if that would be an easy fix (IE overrides) or not but would be that much more useful if it did support IE7.

  43. corfu webdesign

    corfu webdesign

    31 January 2012 @ 05:50PM #

    useful article for an unusual subject..thanks

  44. egiova

    egiova

    31 January 2012 @ 07:12PM #

    As it seems, I think it’s a perfect match with “blucss framework”(http://www.designlunatic.com/projects/blucss/) who took the same “math” approach.
    I totally agree about your comments on 960gs grid, and your hypothesis is simply clearer on a fluid world. Just as they said: keep it simple (among other things).
    Have a good day.

  45. Morten Brunbjerg Bech

    Morten Brunbjerg Bech

    31 January 2012 @ 08:33PM #

    Man! That is so simple and obvious, I’m almost embarrassed I’ve never thought of it.

    I’m definitely going to try it out. Thanks for sharing.

  46. lukens

    lukens

    31 January 2012 @ 11:34AM #

    @MICHAEL SHMICHAEL – I thought the very same thing when viewing the demo. It’s certainly not what I’ve come to think of as “responsive web design”. I think of responsive web design as techniques such as content stacking to change the layout and flow of the page (see http://trentwalton.com/2011/07/14/content-choreography/), rather than just squishing the columns up on a smaller screens. I not saying something like this grid doesn’t have its place, but I think it’s some way away from what is generally referred to as “responsive design”. I may also be missing something about how this fluid grid could be used in conjunction with other techniques (if so, maybe a demo to show this would be good?).

  47. Dan Malarkey

    Dan Malarkey

    31 January 2012 @ 02:02PM #

    Thanks so much Elliot for this article. I am a web designer trying to move into the development world, and I believe this will help me. I appreciate it!

    -Dan

  48. Mayur Chaudhary

    Mayur Chaudhary

    31 January 2012 @ 06:12AM #

    Great Post! Though i am not bothered about Caveat 1 when dealing with fluid design.

  49. Dan Malarkey

    Dan Malarkey

    31 January 2012 @ 02:15PM #

    Thanks so much Elliot for this article. I am a web designer trying to move into the development world, and I believe this will help me. I appreciate it!

    -Dan

  50. Alastair Hodgson

    Alastair Hodgson

    31 January 2012 @ 10:23AM #

    Nice little grid, I like that fact that it’s 1000px base width, but can quite happily stretch bigger or smaller an retain it’s proportions.

    Doing a a quick browser test and I was surprised to see that this actually looks flawless in IE9! I was shocked too lol, Firefox comes in a close second with opera and webkit not handling it as good, the top row of small columns suffering most.

    Good stuff E.J.S, Thanks

  51. Jeff Finley

    Jeff Finley

    31 January 2012 @ 07:06PM #

    I wish I saw this post sooner before I dove into designing our first responsive site. I made my own grid and tried to figure things out, then we ended up trying to work with the 1140 responsive grid framework.

  52. Johannes Viström

    Johannes Viström

    31 January 2012 @ 08:59PM #

    I really like the simplicity. I’m definitely going to try it out on my new projects.
    Thanks for sharing.

  53. Bjarni Wark

    Bjarni Wark

    31 January 2012 @ 11:00PM #

    Thank you for the clear explanation of what you have done and sharing this online, this is definitely one for the tool box.

    In simple after reading it made it so easy to follow that if I was to have 30 pixel gutters ( I like the touch of extra space for gutters, depending upon content of course) then the math was very simple, 30px gutters @ 1000px means CSS { margin:0 3% 3% 0; } and adjust columns % width accordingly, very simple indeed you have made this.

    Now some homework about about responsive images to go with the 1000px layout.

  54. Bjarni Wark

    Bjarni Wark

    31 January 2012 @ 11:33PM #

    Oh just to add to the above comments, having gutters at 30px { margin:0 3% 3% 0; } makes wonky math for column percentages.

    A nice addition to your layout could be to set max-width:1000px on the container.

  55. Bjarni Wark

    Bjarni Wark

    31 January 2012 @ 11:38PM #

    Thank you for the clear explanation of what you have done and sharing this online, this is definitely one for the tool box.

    In simple after reading it made it so easy to follow that if I was to have 30 pixel gutters ( I like the touch of extra space for gutters, depending upon content of course) then the math was very simple, 30px gutters @ 1000px means CSS { margin:0 3% 3% 0; } and adjust columns % width accordingly, very simple indeed you have made this.

    Now some homework about about responsive images to go with the 1000px layout.

  56. dj

    dj

    01 February 2012 @ 04:07AM #

    Just FYI… there is NO margin problem like you mentioned in either Firefox OR IE9, nice to know covering 98% of my viewers – also FYI, it seems like (for me at least) IE6 has gone to where vanished objects go – that is to say into a state of non-being. Last monthly stats showed 0% ie6. How about for you Elliot – are you close to 0?

  57. dj

    dj

    01 February 2012 @ 04:07AM #

    Just FYI… there is NO margin problem like you mentioned in either Firefox OR IE9, nice to know covering 98% of my viewers – also FYI, it seems like (for me at least) IE6 has gone to where vanished objects go – that is to say into a state of non-being. Last monthly stats showed 0% ie6. How about for you Elliot – are you close to 0?

  58. Jack

    Jack

    01 February 2012 @ 05:03AM #

    If you have a fixed-width container then percentages is a stupid idea because the numbers will never change. Use a regular, pixel-based design and save somebody the headache of trying to read your terrible CSS.

  59. Rich Dooley

    Rich Dooley

    01 February 2012 @ 08:56AM #

    @Jack: Have you taken the time to read the 12 whole lines of ‘terrible’ CSS in the demo? There’s not a fixed with in sight! The idea here is that everything is based on being a percentage of 1000px to make for easy maths, then the .container div is set to 90% to make the whole thing fluid.

    Don’t focus too much on the 1000px thing folks, that’s only for doing the initial maths.

    Thanks for this, Elliot. This really is a useful resource for developing a basic fluid grid to fit all screen sizes.

  60. Tom

    Tom

    01 February 2012 @ 09:06AM #

    That’s neat, I like.

    One thing worth noting: as a bare minimum, if you’re stuck with a 1024px wide screen, and still using Windows XP, majority of browsers viewports are below 1000px, so there will be some tiny amounts of horizontal scrolling.
    (For example, IE6-8 have a viewport of 993px by my measurements)

    Great for forward thinking though :)

  61. Wil Linssen

    Wil Linssen

    01 February 2012 @ 01:19PM #

    Hi Elliot
    A few of us at Erskine put a grid generator together recently, it actually uses a lot of the same principles herein. It also lets you change the parameters of your grid (padding / gutters / media queries etc.) on the fly.

    You might find it useful, or you might have some feedback. Either way, take a look: http://gridpak.com/

  62. Udit Goenka

    Udit Goenka

    01 February 2012 @ 05:24PM #

    This is quite an awesome technique Elliot. After reading your article, I have been playing the whole day with the % and it seems to work very nicely.

    Thank You :)

  63. derry birkett

    derry birkett

    01 February 2012 @ 12:27PM #

    (caveat 2) Yikes! What is that! Webkit better get its sh+t together – nobody uses firefox anymore! And what designer could sleep (as you say) with that jagged column action going on… it’s like a pea under the mattress!

    btw How’s Bristol? Spent my uni days there and miss the old place…

  64. Adam S.

    Adam S.

    02 February 2012 @ 07:54AM #

    Thanks so much for this, makes it a lot easier! Keep up the good work!

  65. Jan

    Jan

    03 February 2012 @ 06:49AM #

    You really had a good knowledge about web design. This is very good information. Good effort. Thanks for sharing.

  66. ChrisPlaneta

    ChrisPlaneta

    03 February 2012 @ 11:43AM #

    Hi Elliot,

    Every now and again the subject of grids returns like a boomerang. They surely have some good aspects but also a lot of disadvantages.

    Grids are like false friends. Even though they let you progress with the development quicker they are very limiting. Only if properly applied they can be a valuable addition to the repertoire of designer’s tools.

    First of all adding all these classes to the markup – apart from being non-semantic – cripple your possibilities to apply mobile-first approach with media queries (I hope you know what I mean).

    If it is speed of development that you are going but you still need the flexibility of applying dimenstions for media queries than you should definitely check out LESS. Don’t add classes to your HTML. Instead apply repaeted blocks of styles to your CSS. This is also a solution of how to properly use grid dimensions in the mobile first approach. But, let’s leave it for now.

    Second of all, you are limited by the 12, 16 or X columns you work with.

    I don’t know if you’ve heard about a Universal Grid used by chance of latest BBC sites redesign. They use there 61 widths dimentions – not columns. I will get back to it later in the text.

    Thirdly, if you are using grids based on percentages, there is the rounding error of some browsers – especially Opera is very weak in this area.

    Here, I developped a nifty solution called NegativeGrid that may not be a definite solution to this problem but it sure makes the width differences much smaller.

    Please, don’t take it as a way of self promoting myself but but I believe you should really check out these links to posts on my blog.

    You can check NegativeGrid with appropriate code generator if you want a classic approach to grids http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/.

    If I got you interested you might want to take a look at the BBC Universal Grid and generate your code here: http://chrisplaneta.com/free/bbc_universal_grid_generator/

    Few. I wanted to make this comment shorter but it went godzilla.

    Best,
    Chris Planeta

  67. ChrisPlaneta

    ChrisPlaneta

    03 February 2012 @ 11:43AM #

    Hi Elliot,

    Every now and again the subject of grids returns like a boomerang. They surely have some good aspects but also a lot of disadvantages.

    Grids are like false friends. Even though they let you progress with the development quicker they are very limiting. Only if properly applied they can be a valuable addition to the repertoire of designer’s tools.

    First of all adding all these classes to the markup – apart from being non-semantic – cripple your possibilities to apply mobile-first approach with media queries (I hope you know what I mean).

    If it is speed of development that you are going but you still need the flexibility of applying dimenstions for media queries than you should definitely check out LESS. Don’t add classes to your HTML. Instead apply repaeted blocks of styles to your CSS. This is also a solution of how to properly use grid dimensions in the mobile first approach. But, let’s leave it for now.

    Second of all, you are limited by the 12, 16 or X columns you work with.

    I don’t know if you’ve heard about a Universal Grid used by chance of latest BBC sites redesign. They use there 61 widths dimentions – not columns. I will get back to it later in the text.

    Thirdly, if you are using grids based on percentages, there is the rounding error of some browsers – especially Opera is very weak in this area.

    Here, I developped a nifty solution called NegativeGrid that may not be a definite solution to this problem but it sure makes the width differences much smaller.

    Please, don’t take it as a way of self promoting myself but but I believe you should really check out these links to posts on my blog.

    You can check NegativeGrid with appropriate code generator if you want a classic approach to grids http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/.

    If I got you interested you might want to take a look at the BBC Universal Grid and generate your code here: http://chrisplaneta.com/free/bbc_universal_grid_generator/

    Few. I wanted to make this comment shorter but it went godzilla.

    Best,
    Chris Planeta

  68. Patrick

    Patrick

    03 February 2012 @ 05:52PM #

    This is fantastic…the rounding errors drive me batty. Thanks for sharing!

  69. Ron Rattie

    Ron Rattie

    03 February 2012 @ 06:00PM #

    Another reason not to worry about the 960px grid.. most screens being sold are wide screens. Mostly in a 16:9 ratio instead of the old 4:3 ratio. With that, you tend to have users scrolling more vertically and not horizontally. So a 1000px base grid shouldn’t really bother too many people surfing the web.

  70. Michel

    Michel

    04 February 2012 @ 10:04AM #

    The approach is certainly interesting!

    I tested in latest Firefox, Opera, Safari, Chrome, and also IE8 (just in case).

    Only Firefox gets the % right.

    Opera, Safari, Chrome and IE, all of them have issues: IE8 simply doesn’t show the layout correctly at all; but let’s ignore IE for now, and return to all standards-compliant browsers:

    Opera, Safari, Chrome: All of them do not calculate % correctly so when I resize their windows, they often show wider/narrower columns, change margins incorrectly, etc. If I make a design with text mostly, the “1000px = 100%” idea will work great, and no one will see anything. If, however, I need to see near-perfect alignment of elements, this won’t work well… :-(

    So it’s not only Safari. modern browsers except Mozilla Firefox, cannot calculate this 1000 thing properly…

    Ideas, how this might be fixed/improved?…

  71. Javier Lo

    Javier Lo

    04 February 2012 @ 03:13PM #

    Amazing approach! This could be very useful!

  72. Sanjay

    Sanjay

    04 February 2012 @ 03:33PM #

    Cool approach! This is really helpful.

  73. Danielle spinks

    Danielle spinks

    03 February 2012 @ 09:54AM #

    I think the fluid but fixed 1000 px example is excellent. Also, adaptive design will become more and more important but could look very messy and unwieldy without understanding these fundamentals. Thanks for the post.

  74. Tobias

    Tobias

    04 February 2012 @ 04:35PM #

    it sounds that easy that sometimes i am wondering why human beings sometimes need so long for coming up with such ideas…thanks a lot from the ones (including me) that sometimes think way to complicated =)

  75. Carlo Rizzante

    Carlo Rizzante

    05 February 2012 @ 02:56PM #

    Seriously man, what the heck, you’re always source of good stuffs and inspiration.

    Thanks for sharing your thoughts. I’m playing with responsive since a while at various degree and I do like your approach. Neat and rational.

    There are so many sides that need to be properly handled when going responsive, like images. How does it work in your vision, Elliot? I would really like to read your thought about this other aspect.

    By the way, great job on Smashing Magazine, if I’m right you leaded the redesign.
    Have a good February ;)

  76. Carlos Ballena

    Carlos Ballena

    05 February 2012 @ 07:12PM #

    very interesting idea. I like how compact and efficient it is. I think it’s a great concept, applying the rule to the parent element and letting it cascade to the children.
    It’s sad that at the same time this limits the design to rows with even column widths. In order to create different widths you would need to add more classes which would kinda defeat the purpose.
    Still, very neat. there are definitely some scenarios where this code would apply beautifully.

    May I suggest adding mobile support so that at smaller sizes the width’s adapt to the screen. So for example, the row with 6 columns, would become 2 rows of 3 columns, then 3 of 2, and eventually 6 of 1. It would prevent text from being too crammed and the code is rather simple to implement.

    Great work, thanks for sharing!

  77. Pete in Atlanta

    Pete in Atlanta

    06 February 2012 @ 08:30AM #

    for IE7 & 8, it appears that maybe the rendering engines don’t understand % based widths that contain decimals.

    Here’s a hack that I’ve made some progress with:
    the hack works for ie8 and below.
    it’s the /9 that does the work.

    .column1{
    width:19.123%;
    width:19% \9; /* IE8 and below /
    }
    use the same technique for margins:
    .column1{
    margin:0 2.1234% 2.1234% 0;
    margin-right:2%\9; /
    IE8 and below /
    margin-bottom:2%\9; /
    IE8 and below */
    }

  78. Pete in Atlanta

    Pete in Atlanta

    06 February 2012 @ 08:51AM #

    for IE7 & 8, it appears that maybe the rendering engines don’t understand % based widths that contain decimals.

    Here’s a hack that I’ve made some progress with:
    the hack works for ie8 and below.
    it’s the /9 that does the work.

    .column1{
    width:19.123%;
    width:19% \9; /* IE8 and below /
    }
    use the same technique for margins:
    .column1{
    margin:0 2.1234% 2.1234% 0;
    margin-right:2%\9; /
    IE8 and below /
    margin-bottom:2%\9; /
    IE8 and below */
    }

  79. Boris

    Boris

    06 February 2012 @ 01:07PM #

    Thanks for this post! Elementary, but not so easy thing we should knew;)

    Go on with that:)

  80. Saeed Neamati

    Saeed Neamati

    09 February 2012 @ 08:58AM #

    You truly deserve more than 80 comments. Thanks for opening a new door on me about site width and responsive design. I took PSD file :D.

  81. Shawn McConnell

    Shawn McConnell

    09 February 2012 @ 10:32PM #

    I’m going to “muck about” with some PSD layouts and code them and see how it goes, thank you

  82. Nikolaj Bomann

    Nikolaj Bomann

    10 February 2012 @ 01:12PM #

    Awesome approach for creating responsive webdesign. And as Carlo says: “you’re always source of good stuffs and inspiration.” True that!
    Thanks for a great blogpost

  83. Nick Scott Turner

    Nick Scott Turner

    10 February 2012 @ 05:19PM #

    This sounds awesome, Elliot. I’d love to check out the PSD and HTML example, but all the links here lead to “Service Temporarily Unavailable” errors.

  84. Niall

    Niall

    15 February 2012 @ 12:07AM #

    Awesome stuff! Wish I’d seen this before I started on my new project.

  85. bob marteal

    bob marteal

    15 February 2012 @ 03:19PM #

    This is great. I’m working on two projects that have a fair amount of columns and just sticking with a nice round number like 1000 as a base would have made a lot of sense.

  86. Elke Hinze

    Elke Hinze

    16 February 2012 @ 03:40PM #

    The statement that it doesn’t have to be 960, 1000, or any other width is exactly right! The point to responsive design is that everything is relative so really the container width is arbitrary. Never thought about it that way.

  87. David Hernandez

    David Hernandez

    24 February 2012 @ 07:38PM #

    While I’m using a different page structure I’m working on a responsive site right now where the 1000px base has been really helpful. One practice I’ve found that might help others is locking in a max-width of 1000px during the development phase of the 960-ish width so that I can set nested margins visually based on an overlying grid (I’m using 960 gridder adjusted to 1000px with 12 columns) and I’m doing almost no math for the nested columns and their margins.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.