Designing with Grids - finding the right width for Column, Gutter and Page
Like many other designers, in the last year or two I’ve come to learn the importance of grid-based design, and now consistently use grids when mocking-up site layouts.
However, one of the annoyances when you first sit down to turn your initial sketches into a Photoshop mock is calculating the precise width to use for the various elements that make up the grid. I like to ensure that there is a relationship between the type and the dimensions used for the columns and the gutters, but finding the ideal combination of widths—while still ensuring that the total width of the page fits inside your chosen minimum browser resolution—can be a tedious exercise in calculation.
Grid Calculator
To that end, I’ve built a little tool that does all the hard work for me. My Grid Calculator allows you to choose the font size you are going to use, and then select the number of columns, column width, and gutter width based on that base font size. As you fiddle with the dimensions, the total width is dynamically updated, so you can check that you haven’t gone over that magic 1024px!
If you’re not bothered about the column and gutter widths having an exact proportional relationship to the font size, you can edit the values directly (they are plain text input boxes). The total width will reflect changes as you type.
The tool uses the jQuery library and the Interface plugin for the sliders.
Let me know if you find it useful, or if you have any feedback or ideas to improve it.
Visit the Grid Calculator tool
Filed under: Design.
Technorati tags: jquery grid grid design calculator
Bookmark this article with del.icio.us
Previously: Beating Wii Tennis
Next: Grid Calculator 1.1
Comments
- Nathan Smith
- 427 days ago
Great job. One suggestion though: Restore the borders on the inputs, so that people realize they’re edit-able at first glance. It took me awhile to realize I could just change the values manually.
- #2
- Matthew Pennell
- 427 days ago
@Anthony: Haha, sorry! I only built it this morning though.
@Nathan: Good idea – I liked the way they looked like plain text, but I guess that does make them slightly less easy to use. I’ve changed it now so they are more obviously text boxes.
- #3
- Dragan Babić
- 426 days ago
Good job Mathew, a very useful tool you’ve built, so simple but saves us a lot of trouble.
The only thing I wish it supported is letting me choose my overall width, number of columns and the (approximate?) width of gutters, and than it could spit out the needed width for my columns. So I guess it is the reverse of what it’s doing right now, we must think in opposing directions. :)
- #4
- Baxter
- 426 days ago
Nice. One suggestion would be to tap into an imaging library to create a background grid based on the parameters for download (if that makes sense).
- #5
- James John Malcolm
- 426 days ago
Damn fine job.
- #6
- Jeff Croft
- 426 days ago
Very cool, Matthew—but why only up to 12 columns!? :)
- #7
- Conrad Miguel E. Gozalo
- 426 days ago
Nice one, I like it. Pretty useful tool. :D
- #8
- Arpit Jacob
- 426 days ago
Just what I needed Thanks for this tool.
- #10
- Jens Wedin
- 426 days ago
I’m reading this from mobile phone with Opera so I don’t have any good way of checking the output of the tool. What I wonder if it is possible to use a mix of em or percent. I’ve but a few grid designs but then used a mix of ems and percent just to make the design more scaleable.
Thanx for a great tool, two thumbs up.
- #11
- Jens Wedin
- 426 days ago
...built a few…
Also to let you know, the tool works on my mobile with Opera.
- #12
- Matthew Pennell
- 426 days ago
@Baxter: Good idea, man! I hadn’t thought of doing that, although I was planning on adding a dynamically updated mock-up of the grid structure using CSS+JS.
@Jeff: Because the math was making my head hurt! The jQuery slider widget only provides output from 0-100, so I had to convert it into a number of columns. I’ll have a play and see if I can make it a bit more flexible.
@Robin: I don’t know whether you’d call it a rule, but I have read in a few places that the dimensions of your grid should have a relationship to the size of your type.
- #13
- Matthew Pennell
- 426 days ago
@Jens: Yes, I guess it would be possible to build a switch between px, em and percent into the tool to allow you to use any one of those measurements. I don’t know about using a mixture of em and % though…
- #14
- Derek Allard
- 425 days ago
Matthew! This is ridiculously brilliant in its simplicity. Fantastic work my friend, I’m duly impressed.
- #15
- Jens Wedin
- 425 days ago
I can explain what I mean by mixing them. I mostly use em for the #wrap, for example “width: 53.2em”. Then within the #wrap I add lets say three columns, that are 20%,70% and 10%. Why I use percent is that I don’t want to sit and calculate the ems within in #wrap. Last I add the gutters, either with px, percent or ems. I also stir this with a min-width and max-width just to make the size readable for low and high resolutions.
Keep it up.
- #16
- Matthew Pennell
- 425 days ago
@Jens: Yes, I’ve used a similar approach (especially when designing flexible width forms) – I meant I don’t know how this tool could be adapted to use that approach.
- #17
- Matthew Pennell
- 425 days ago
I’ve just adjusted the available number of columns and made the possible widths smaller as well.
- #18
- Baxter
- 423 days ago
If creating an image on the fly is too much of a pain, one could screenshot a css/js version, so that would be cool, too.
- #19
- Monika
- 416 days ago
Hi
Grids are beautiful – maybe.But I have to realize that the grid hype doesnt’t mean to design with the focus of accessibility.
I’m sorry about that and your wonderful calculator initiate this development.
To use px for fonts is more than one step to the past of webdesign.
To use px for fonts to become a wonderful grid is to mistake webdesign for printdesign.
webdesign is more than printdesign … and printdesign is more than webdesign
because this are two different things.
kindly regards
Monika- #20
- Matthew Pennell
- 415 days ago
Monika: There’s nothing wrong with using px for fonts in modern browsers that are able to resize pixel fonts – that’s not affecting accessibility. I tend to favour the YUI fonts.css approach, where the base font is specified in px for compliant browsers, and keywords (x-small) for IE.
- #21
- Adam Messinger
- 415 days ago
This could be incredibly handy. I haven’t had an opportunity to work with a grid-based design yet, but I plan to do so on the next redesign project I land. Your calculator should make the transition that much easier.
- #22
- Monika
- 415 days ago
Matthew Pennell
Yes I know modern browser are able to resize px fonts, but I also know that only 5% of my reader use IE7. ;)
Most of them have an older OS. I like to use modern technics but every time with an eye backwards.And do you have seen what IE does with some grid design… You calculate more than one hour and then IE … :(
Why not use grid with em or % – I’m sure you would like to control everything – like printdesign- ;);)
kindl regards
Moniks- #23
- Matthew Pennell
- 414 days ago
Monika: As I said, I would only specify pixel fonts for modern browsers, and allow older ones to use resizable keyword or em-based font sizes.
If you build your grid sensibly, there’s no reason for it not to work in IE, and equally there’s nothing stopping you building a grid using & or em. However, regardless of the way that your grid is created, the columns will still have a width that can be measured in pixels – and it is that that this tool can help with.
- #24
- Douglas Gottlieb
- 412 days ago
Nice work. Feature request:
Ability to set overall width and let the tool calculate the other values
- #25
Typical!
You couldn’t have released this last week could you?
Noooo!
You had to wait until a week after I’d struggled my way through two separate grid layouts using my lousy maths and trail and error!
I’m liking the grids thing though. It gives a fresh way of looking at things and I’m finding it annoying when I look at my old sites that don’t line up as neatly.