Grid systems in web design

By Tony Ball

To view the custom made grid for this site you have the option of selecting an alternative stylesheet.

Grids were introduced to web design to enforce visual hierarchy, maintain a coherent structure and build relationships between various elements within the webpage. They are in place to provide a sense of order and consistency, and particularly, if you work as part of a larger company, they work as a universal template for all front-end developers working on the same site without the need to decipher arbitrary calculations made by previous designers.

Grids are a guide in place to solve layout problems
- Boulton, M. (2011)

Element widths, Ad/image placement and content hierarchy are easily calculated with the aid of a grid and ensure regularity throughout your websites. I agree that the use of a grid may be the best avenue for a web design/development team. A grid will supply the team with a uniform set of parameters for which each member is tied down to. Chances are that in this type of situation, each member is contributing to a content driven site. For usability purposes this would most likely need to meet conventions of legible and logical layouts often depicted by e-commerce and blogging websites. Therefore, adhering to a grid aids in the production of a clean and accessible site.

Baseline Grids

Baseline grids attempt to implement a vertical rhythm to our content, Within Richard Rutter's article on 24 ways, it is suggested that a vertical rhythm is just as vital as a horizontal rhythm.

Without rhythm the reader becomes disorientated and lost
- Rutter, R. (2006)

I agree that consistency in our vertical padding and margins are vital for our site's legibility, but I don't believe working to a baseline grid is practical within the flexible medium of the web browser.

It’s incredibly difficult to maintain a baseline grid in a medium as inconsistent and fluid as a web page. Images, form elements, rendering differences between browsers and platforms: these can all throw a baseline grid out of phase.
- Santa Maria, J. (2012)

By simply scaling the text within Wilson Minor's demonstration of a baseline grid1 you can see the image becomes disconnected to the base of the text and the impact of the grid is lost.

For the amount of time it required to calculate the vertical margins in their variety of contexts I don't believe the method is feasible, nor economical, especially as a similar visual result can be achieved by reusing fabricated values.

Manuscript Grids

Manuscript Grids are good for extensive and continuous blocks of text. They’re used in books and long essays and perhaps lend themselves well to blog posts.
- Glicksman, S. (2011)

Manuscript grids are simple and very versatile. The single column layout lends itself to fantastic legibility on mobile devices and tablets.

jeffrey zeldman mobile screen grab

Mobile screen-grab of zeldman.com

If we take a closer look at Jeffrey Zeldman's personal site viewed from my 4.3 inch Samsung smartphone (fig 1), the layout, as well as the generous font size, provides a pleasurable reading experience. Now if we were to compare that to the 6 column, modular grid on thegridsystem.org (fig 2) we can see how the manuscript grid triumphs on smaller devices.

the grid system site mobile screen grab

(fig 1) Mobile screen-grab of thegridsystem.org

It seems more common that a manuscript grid is implemented within media queries. If you take a look at Kasia Drzyzga's personal site you can clearly see how her grid layout shifts from a 12 column grid system to a manuscript at 600px width. This would be my preferred approach to ensuring mobile readability is fully optimised with a manuscript grid.

Modular Grids

The lack of a hierarchical structure means that modular grids are ideal for displaying a large quantity of data of equal importance. We find this type of grid used on all variety of interfaces including offline devices. If you take a closer look at the menu on your smartphone you'll mostly likely see a modular grid being used to display icons.

pierrick calvez screen shot and wireframe

(fig 2) Mobile screen-grab of pierrickcalvez.com

Taking a closer look at the portfolio site of China based creative director, Pierrick Calvez2 we can see a clear use of a modular grid. Detailed descriptions to each project are absent until clicked on for further information. This grid encourages me to scan his portfolio in whichever fashion I please. The red block of colour naturally pulled my focus immediately but after that I found myself picking cells at random and scrolling up and down the screen.

Modular grids are good for complex projects that require more control than a column grid can offer. Image galleries and shopping carts are likely candidates for modular grids.
- Glicksman, S. (2011)

Like Steven says, modular grids can really only contain content of an unrelated manner. For instance, a continuous flow of text, like a blog, couldn't function in the strictly measured modules. Their size implies that the content within is related, but due to its segmented cells they would better serve as an e-commerce search result structure.

Conclusion

Through implementing my own grid within the online copy of this essay, I have grown to appreciate the practical uses a grid can have in layout design. A simple grid can take a fair amount pressure off the designer and provide guidance with calculating the size and positioning of various elements such as images, captions and margins.

The use of a grid implies the will to rationalise the creative and technical production processes [...] A suitable grid in visual design makes it easier to construct the argument objectively with the means of visual communication
- Müller-Brockmann, J (1981)

I felt the grid encouraged me to place the images and heading more adventurously. With an untrained eye for design, the unexpected overflow into the margins of the text seemed too bold for me to unconsciously implement, but I felt a reassurance as the grid defended my choices.

The grid also encouraged me to consider my typeface a lot more. With the layout looking a lot more like a magazine article, I wanted to find and incorporate a serif webfont to fully capture the print atmosphere.

Where content structure demands it, I can see myself working with grids in the future. I felt that a grid took care of the minor calculations that I would normally choose at random. When working with large blocks of text, I felt a clear logical layout makes for a more pleasant read. On this occasion I didn't experience any form of constraint in terms of design. However, I've yet to really implement one in a design-heavy website. Only then would I reach my final verdict.

How I built the grid

I built my site using a 4-column grid. I followed Khoi Vinh's and Mark Boulton's advice by first establishing a constraint. I chose to display my mobile phone screen shots to life size, giving me an image width of 420px.

I then chose a gutter dimension of 16px, to match the default font size leaving me with four 202px columns with three 16px gutters.

I applied a percentage width using Ethan Marcotte's formula3 with a maximum width of 856px on the div#wrap element so that the screen shots of my mobile wouldn't grow too large and pixelate. Finally, I applied a breakpoint at 800px so that my structure switches to a manuscript grid best viewed on mobile and tablets.

References

Download my essay notes