Mortensen | We Like It Simple

Updated: 04/16/09

We've been working on complex website layouts lately, such as styling content heavy pages for online magazines, radio and television clients. Since time is not something we have in abundance, I thought we needed to speed up the design process and simplify the task of managing information.

Enter the grid based design system. I decided to research the subject and apply this concept to our web design.

I found quite a lot of information from people trying to translate this traditional concept from print to the web. Digging through all this information was time consuming and having to re-read the same information with different approaches on different web pages ended up being very tedious. So I thought it would be a good idea to summarize the best resources found, so that you can get right to the heart of the matter.

One of the first quality readings I stumbled upon was a PDF presentation from Mark Boulton (of Mark Boulton Design) and Khoi Vinh (Design Director for NYTimes.com), perfect for a quick introduction if you already have some knowledge on the subject. Check Grids are Good

The Basics:

If you don't have a graphic design background or feel you need to refresh your knowledge on the concept you can check these articles:

• Five simple steps to designing grid systems
• Grids: Order Out of Chaos, Invisible Structures: When and Why to Use Grids in Page Layout

You can also visit Khoi Vinh's Subtraction for a beautiful example on the usage of grids

Elaborating:

If you've checked these articles, or if you already know something about grids, you may think it's difficult to maintain vertical rhythm within web-pages due to the dynamic character of the content. But Richard Rutter has some advice on how to deal with this

• Compose to a Vertical Rhythm

And what about liquid layouts? Again, Mark Boulton has some suggestions

• Five simple steps to designing grid systems part 5, Flexible grids

The tools:

Here's a list of tools I've found very useful to start creating the optimal grid for all needs:

• Grid Calculator
  Helps you find the optimal dimension in pixels based on these variables: Base font size, number of columns, column width, and gutter width.
• Slammer
  It's basically a customizable grid overlay you can put over any application similar to Iconfactory's xScope. I find it useful to figure out how other web-heads dealt with their grids. It's still in beta stage but the planned features look very tasty.
• GridFox
  Similar to Slammer but as a Firefox plug-in, and the grid gets sticky to the content.
• Boks
  This one is an Adobe Air aplication that gives you similar results as grid calculator and even adds suggestions. But most important, it's based on the blueprint CSS framework (see below), so after you choose your grid configuration it can export an html/css layout with some goodies.
  Anyway, I find myself using only the Grid calculator part of the app for working on my Fireworks mockups rather than to create CSS frameworks.
• GridMaker
  GridMaker is a small script for Photoshop which allows speedy development of simple grids.
  Check also Gridmaster Reboot and GridMaster for CS4

The CSS frameworks:

I personally come from a graphic design background so I look at these with a bit of skepticism. Basically because I think the best way to start creating a web-page is to work with the layout in a graphic design application such as Illustrator or Fireworks and try to get as close as possible to the end result before writing any line of code. I think this approach however, speeds up the process a lot and simplifies the code work as every change the client introduces during the process can bring new problems that you can easily indentify and solve on the mock-up. Having to go through changes in the coding process is more time consuming.

Anyway, I feel I had to mention these frameworks as they may be quite useful for some die-hard code web developers:

• The 960 Grid System
  As the creators say, the 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
• Blueprint Css
  Blueprint is a CSS framework, which aims to cut down your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plug-ins, and even a style-sheet for printing.

So that's it. As you see, making things look simple is not that simple, so I hope my research can help you in this quest for simplicity.