Ordering Disorder Grid Principles in Web Design

*** Jan102011

I recently read Hardboiled Web Design, by Andy Clarke, and Ordering Disorder, by Khoi Vinh, in quick succession. Though they are as different as two books on web design can be (the former is mammoth, and full of detailed HTML and CSS, while the latter is brief, without a single line of code) they are essentially based on the same premise. Mr. Vinh states it elegantly on page 27:

[D]igital media asks “What is the solution—and how does it change based on the various circumstances under which the solution might be accessed?”

And follows up on page 33 with this:

The truer the solution is to the medium we’re designing for, the more apt it is.

Clarke and Vinh both understand that web design, unlike print, can and should adapt (for Clarke, it is to the viewer’s environment, while for Vinh, it is to the content being presented). However, each author also shares a desire for control—in Vinh’s case, control is exercised to maintain harmony and clear presentation of content. To achieve this control, Vinh advocates the use of a typographic grid, adapted for the web.

The process of developing and working with a grid

The most interesting and informative aspect of this book is simply learning an experienced designer’s approach to building and using a grid. While Mr. Vinh does not address implementing the grid in HTML and CSS (probably wisely, as best practices are constantly changing), he does present in detail the process of designing a grid and adapting layouts for different wireframes to the grid.

He walks the reader through the process of working within various constraints (such as fixed ad and branding sizes) to develop a columnar grid, and also explains the baseline grid and its utility in setting font sizes and line-heights. Most enlightening though, is how he works creatively within the grid to tailor layouts for the many different types of content on a site.

Appropriate limits to control

After reading a 24 Ways article on composing to a vertical rhythm, I found myself vacillating between precisely calculating vertical margins, padding, and borders, and thinking, frankly: “no one is ever going to notice this sh*t”. Mr. Vinh has relieved me of that burden. On page 69, he advocates a sensible approach:

Overly strict adherence to this [baseline] grid is impractical in Web design…put simply, alignment with the baseline grid is too subtle a design detail to benefit most users.

Huzzah.

Scant mention of “responsive” web design

Obviously, responsive web design is all the rage at the moment; the idea being that websites can be built to adapt to the environment in which they are being viewed. This concept would seem to directly address the question I quoted above, but it is only briefly addressed in the last few pages of this book. The solutions Mr. Vinh presents are instead based on a fixed, 960px-wide grid, though he certainly doesn’t claim that will be appropriate in every case. This is a major drawback to this book—it fails to address the wide variation in browser sizes, resolutions, and the new challenges of designing for smaller devices.

I should also mention there are a couple of errors, which seemed even more out of place in this carefully considered book. On page 70, where it should read “a line-spacing of 36 pixels, or two baselines” it says “26 pixels”. On page 123 an entire paragraph is repeated from the previous section, which makes no sense in this context.

Conclusion

While the specific dimensions may change, the principles of a strong grid underlying a site design will remain, especially for information-heavy sites, and Khoi Vinh demonstrates those principles clearly in this book. If you aren’t familiar with grid principles or applying them to the web, this book is a good starting point, but look elsewhere for help with implementation (there is a list of resources at the end of the book).

Respond to this review

Author(s)Khoi Vinh
PublisherNew Riders
Pages192
Published2010
ISBN-100321703537
Category
Tags
Rating***

No comments yet…Be the first!

Comments are closed for this article.