Book Review: Ordering Disorder – Grid Principles for Web Design

I pre-ordered Ordering Disorder: Grid Principles for Web Design by Khoi Vinh as soon as I heard about it being published. Vinh is a designer that I admire a great deal, and knew he was as good of an expert on web layout as anyone out there.

Overall, it is a great book on a subject that, while popular in the web design blogosphere, has not had much physically published about it. There are a plethora of books on grids in what Vinh refers to ‘analog design’, but none on grids in web design.

(It should be noted that Mark Bouton, author of a seminal set of blog posts on grid based web design, will be publishing a book on this subject through his own imprint, Five Simple Steps.)

I like that there is an entire book devoted to the concept – it gives Vinh the space to articulate thought than is sustainable in blog posts.

The book is broken down like this:

  1. Introduction
  2. Concept
  3. Process
  4. Execution – this is the meat of the book, and what you’re paying admission for
  5. Conclusion

I’m afraid that many readers might skip chapter 2, “Concept”, and it’s a pity. Vinh deals with what grids are, they’re history, and the difference when it comes to the internet.

The history of grids won’t necessarily help you when you’re on deadline, but it helps to know why and how grids were developed. They were developed to deal with a particular set of graphic problems, especially in the 20th century. While web design has similar problems to deal with, there are some fundamental differences – what Vinh calls the need for “conversational” solutions. A conversational solution takes into account what the designer is trying to accomplish, what the technological context of the solution is, and how the user is receiving it.

Chapter 3, “Process” is a short but vital chapter. Vinh (briefly) goes into researching solutions, figuring out what restraints one must deal with, sketching, and grid terminology. You could almost write a whole book on what he goes through in nine pages.

Example Page from Ordering Disorder
Khoi Vinh shows you how you can develop layouts
The main attraction is chapter 4, “Execution”, where Vinh takes an theoretical project and shows you how to develop a grid system for it. The example website has four ‘kinds’ of pages, and Vinh develops layouts for those four page types. For this sample site, he starts with the restraint of having to accommodate a large ad space, and works the rest of the system out from there.

Some highlights for me were:

  • Don’t start with the homepage when developing a grid system – start with content pages. I usually work this way anyway, but Vinh articulates the point well.
  • Grids on the web should account for the behavior of content – text should rarely but right up against the edges of columns in a grid
  • Baseline grids, while helpful, cannot be adhered to by every element on the page. It’s just not practical, so let it go!

Vinh has proven himself to be a clear, articulate author on his blog, and that is also the case in his first book. One thing that I really appreciate is that in the development of these layouts, he takes the time to go back and change things, to show you how a grid can evolve in the course of a project.

He does NOT delve into the technical how-to’s of how to execute a layout in HTML & CSS. You won’t find a tutorial on the 960 grid system. This is by design, and I think it’s a good decision. This book is about the thinking that goes into developing a grid, not trying to clear floats.

The one criticism that I can offer is that I wish that there was a greater range of example projects/problems. The example site has one restraint (an ad) that dictates how the rest of the layout is formulated. That same restraint is used over and over. I would have appreciated at least one example of a layout designed for a different restraint altogether – maybe a different example site.

I wholeheartedly recommend the book, though, for both beginning designers and seasoned pro’s. If you’ve also read it, or have questions, I would love to know in the comments below!