1. 1. Introduction
  2. 1.1. Tutorial websites
  3. 2. The grid method
  4. 2.1. Early history
  5. 2.2. Recent history
  6. 2.3. Present & future
  7. 3. Conclusion

To decide how useful grids are in this context, we first need to decide what constitutes a successful web design. All design is about communication, but perhaps the defining feature of web design is the interactive (as opposed to dictatorial) relationship between creator and audience. In his book Ordering Disorder: Grid Principles for Design, Khoi Vinh says:

“A solution for a Web design problem embodies a kind of conversation among the designer's intention, the technology at hand, and the user.”

The designer must strive to portray the content in the most visually appropriate and engaging manner. They must also take into account user behaviour and the context in which someone uses the site. Allowances should additionally be made for the variety of software and hardware through which the site is accessed.

In order to conclude how the grid may help or hinder the designer in achieving these goals, I will examine grid design principles and analyse several case studies.

Tutorial websites

I will be looking at grids in web design by focusing on their use in coding tutorial sites. All such sites are individual, with unique content and aims, and therefore the designer is required to approach each layout afresh. There are, however, some shared objectives that are interesting to examine with regards to grid use.

Many of these sites present large quantities of information. It is important that this content is easily searchable, as users with a specific query in mind may exit quickly if frustrated. At the same time, it is also important to consider that users could be reading large quantities of information in one sitting. So content must be easy to digest and presented in a manner that is conducive to learning.

If the site is to be seen as a trustworthy resource for coding advice, it should also be well designed and coded itself. Since those building these sites are likely to be well educated in this area, these projects should make great examples for me to look at for my own instruction.

The grid method

Unlike other design disciplines, grid use is inherent on the web as sites are rendered via a mathematically generated pixel grid. Despite this, it is still possible, and sometimes useful, to create a design without specifically considering mathematical principles.

It is also possible to misuse grids in web design. This can happen when the method (rather than the content) is allowed to rule the design, or because the design theory that has been applied was originally developed to serve another medium.

In order to determine the correct balance, I will consider the historical origins of grid design principles. By doing so, I aim to unravel the potential uses of a grid and then decide which uses are beneficial, and which detrimental on the web.

» Early History

Mathematical proportion has been used in design for thousands of years and can be traced back at least as far as ancient Greece. One of the most important principles (usually credited to Pythagoras and his followers) is the 'golden ratio', which was often used in classical architecture.

The 'golden section' (as it is also known) is a ratio of proportion that occurs commonly in nature. It can be calculated by dividing a length by the irrational number Φ (Phi), which is roughly 1.618.

fig 1. The golden ratio as seen in the human arm

Use of this formula in visual communication creates an effect considered to be "universally pleasing" (The Principles of Beautiful Web Design p.10). A reason for this is suggested by Aaron Walter in his book 'Designing for emotion'. He proposes that the instinctive attraction we feel for this proportion is “guided by our primordial desire for emotional connection with others” and that we feel subconsciously drawn to this pattern as we see it in our own and others' bodies.

If web design is a conversation between designer and user, then understanding and relating to our audience is of primary importance. The Media Equation theory proposes that we do in fact relate to media by the same 'rules' we have evolved to interact with other people, and it has been suggested that this effect is even more pronounced with new interactive media (Site-Seeing: A Visual Approach to Web Usability. p.170).

Using the golden ration in the design of tutorial websites could therefore help users to be more fully engaged. A greater emotional connection should facilitate greater understanding and memorability of content for a site's users.

Case study 1: Codecademy

fig 2. 'Codecademy' homepage with overlaid 3 column grid

This site features a Jquery screen emulator to encourage immediate action and engagement with content. This is backed up with the friendly, conversational style of text. Aligned with this, a simplified version of the golden ratio known as the 'rule of thirds' has been used. This helps the homepage create a cohesive, personable environment.

This top section of the page is simple and clear, comprising of text, straight lines, and block colours only. This combination could become clinical but the use of the rule of thirds helps it appear inviting and unintimidating to a novice coder.

Although good use can be made of the grid in this manner, it is important to recognise that there are also other methods that can add human quality to design. A more random and organic layout can be similarly successful:

Case study 2: Try Ruby

This website is also attempting to encourage participation with an interactive coding area. Although the design could be described as a simple grid of two columns, other elements on the page do not conform to any set of measurements. I would therefore suggest that the design was done instinctively by eye.

This freeform style results in something that is again friendly and clear. It is also perhaps more unique, fun and memorable than the Codecademy homepage. So whilst mathematical principles can assist us in engaging an audience, they are not necessarily required.

fig 3. Non-grid design:'Try Ruby' homepage

» Recent History

Although mathematical design principles have been around since ancient times, the most direct influence of grid theory comes from the field of graphic design. It first began to be developed with the Modernist approach to typography in the 1920's and 30's. This influenced a number of graphic designers to develop the modern typographic grid during the period following World War II. Often known as the 'Swiss International Style', these ideas were incorporated into the design curriculum in Europe and the US by the 1970's and have remained an important element ever since.

This means we have a large body of knowledge to draw from to assist us with web design. To truly learn from this however, we should also recognise that the theory was developed as a response to the societal and industrial reality of the time. As technological change creates new requirements and possibilities for the web, it is appropriate that our thinking change also, and that our design principles be considered afresh.

Web design is fundamentally different to graphic design as its meaning is not primarily constructed with visual appearance, but via semantic code. Accessibility requirements demand that websites be understandable by users with a variety of devices, as well as individual abilities. In this scenario, grids cannot retain their position as the ultimate foundation of visual design.

Despite this, much of the theory developed by those such as by Müller-Brockmann, in his seminal work Grid Systems in Graphic Design, is still highly relevant. It recognises and responds to our instinctive urge to seek meaning through structure and order. In addition to this, it provides a process through which the designer is able to consciously consider and come to an understanding of the task at hand.

When examining these principles in action, perhaps the most obvious place to start is with the typographical grid. To be read comfortably (to Western eyes), text should be aligned to the left. It should be set in columns of a width that can be easily followed by the eye without 'losing' the line beneath. It must also have an appropriate text size and base line. The ideal proportions differ from paper to screen, however the principle remains the same:

“Every difficulty standing in the reader's way means loss of quality in communication and memorability”.(Grid Systems in Graphic Design p.30)

Considering that the objective is for the styling to remain as invisible as possible (so as to avoid distracting from the content itself), the clearest way to illustrate this is with examples of poorly designed text:

Case Study 3: Ensembl Core API Tutorial

fig 4. API tutorial screenshot

This site ignores these typographical grid principles, and its overly long lines of text are difficult to scan and process. As little attempt is made to break up the content, it is also somewhat overwhelming and uninspiring to the potential 'student'.

Case Study 4: A tutorial on character code issues

fig 5. Tutorial page on character coding with poor typographic grid

Alhough this design does apply columns, an insufficient base line and margin size has been set (A). This results in a claustrophobic, cluttered space, lacking clarity. Text has been set to over-short lines (B) that unnecessarily tire the reader by requiring the eye to be in constant motion.

Beyond typography, the grid assists a designer in choosing where best to place elements. When considering online behaviour and interaction, this is very important. This is because an internet user typically has a specific aim in mind, and will only scan a page very briefly to seek what they require. Thus, the job of the designer is to predict those content elements that are likely to be of the greatest importance and place them at a relevant size and location to assist navigation.

Case Study 5: Codecademy (revisited)

fig 6. Codecademy page layout with overlaid 9 column grid

The designer of this site has been decisive in grouping different sections of content, and has laid out the options using columns and fields. This has resulted in a clear and harmonious interface that clearly indicates the hierarchy of content to the user. Even though a visitor is likely to look at only a tiny percentage of the whole site, it is very important that they intuitively sense a solid underlying structure in order to feel that the source of information is trustworthy and credible.

I would suggest that this page been built to a fixed-grid, 9 or 18 column layout. Although the baseline is not held throughout (this can be difficult and impractical to achieve), the text has been scaled proportionately (A), and provides a clear hierarchical route into the content.

Use of a grid can also help a designer make the best use of data about where people tend to look on a screen (e.g. top left first). Here, the eye is instinctively drawn to the large introductory text on the left. This however, has been proportionally balanced with the larger size of the interactive coding element (B) making the latter prominent enough to be considered the main element of the page. The user therefore immediately grasps that they are to take action by interacting with it.

The design appears to use horizontal fields of regular size, with the footer half the size of the top section. The middle section of content (C) uses a smaller font and module size to that at the top, indicating that it is of less importance to the majority of the audience.

Despite the success of the homepage in these matters, the Codecademy site as a whole does not make the most of the grid system to create continuity and strong brand identity. The structure of internal pages should suit their own specific content, rather than being forced into the homepage template. However, a designer should consider that the site is usually experienced as a sequence of pages. Some continuing structural elements could have created a more unified feel.

As it is, the impression the site gives is that it has been put together by many contributors over a long time period, and with little consideration as to how it would develop. Part of the nature of the web is that content will need to be added as time goes on, and that many people may be collaborating on a single site. This should be considered and accounted for in the layout from the outset.

So, as we can see, use of grids can be very helpful in allowing the designer to carefully consider and construct the message they are putting across. Having said this, over-reliance on a grid can have negative consequences also. One of the biggest dangers of using grids is that the design can become monotonous and predictable. As there are many frameworks available for commonly used grids (e.g. 12 and 16 columns), these have been overused and become devalued.

We should remember that a grid is merely a tool that provides a framework the designer can either accept or ignore as they see fit. Deliberate breaks to a grid can help draw attention to chosen elements, and can be used to link disparate parts of a page:

“A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience.” (Grid-Based Design: Six Creative Column Techniques [Online])

Case Study 6: Team Treehouse

fig 7. teamtreehouse.com homepage layout

This design creates a sense of rhythm and harmony through repeating measurement patterns. However, it does not conform to a simple grid structure as we might expect. Most obviously, the illustration breaks out of its containing field (A), suggesting a liveliness that is echoed in the subject of the image.

The placing of this element also helps draw attention to the similarly coloured 'call to action' above. As the only element that does not follow the pattern established over the rest of the page, the eye immediately finds focus here.

Examination further down the page reveals different grids have been used for different fields (B). This helps to differentiate between sections more emphatically. A similar effect can be achieved if a grid of many units is divided into columns of noticeably different widths. The latter method should achieve a greater sense of internal logic within the design as a whole.

» Present and future

As previously stated, in addition to balancing control and uniformity, there are further considerations needed for website layout today. As is the case with many art forms, design techniques for the web grew out of techniques that were developed for previously existing media. Before advanced CSS techniques came along, tables were used for visual presentation purposes. The tables mimicked a grid-like structure, and so naturally graphic design ideas were borrowed.

Now, enhanced understanding of the online environment by both designer and user make it possible to see new opportunities. Mark Boulton describes the situation thus:

“Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.”

The internet is a landscape full of different browsers, devices and capabilities. Viewports may be portrait or landscape, and vary in size from a small mobile screen to a large wide screen TV. Pixel density also varies with device, and users are able to set their own preferences. Because of this we must embrace the fact that the essential nature of the web lies more in content than in structure.

Fluid layouts have been developed in response to this issue. Adhering to the 'one web' principle they allow the same site to be viewed appropriately on different devices without resorting to separate sheets of underlying code.

One downside to grids in this new environment is that:

“When columns and elements within them change width, all too easily a visual hierarchy can be broken and along with it the relationship between element sizes and the outer window or viewport.”(There's no Formula for Great Designs [Online])

Responsively designed sites help to combat this by using media queries to apply breakpoints. This allows the designer to adjust the design at various size intervals and re-coordinate elements in relation to one another and the viewport. This means that rather than creating one precise static comp and then coding this exactly, it may now be more appropriate to design in the browser. This will need to be accounted for when making use of a grid. Designers and developers may also need to collaborate more fully (and at an earlier stage in a project) on prototypes.

Case Study 7: Smashing Magazine

fig 8. Smashing Magazine Website at maximum width

fig 9. Smashing Magazine Website at reduced width (suitable for tablet device)

This site is very well thought out and structured, but still the control of the designer/s is limited. Different user options, text sizing and screen size mean that all the page elements are potentially in flux.To regain some control, media queries have been used and different CSS rules applied at different viewport widths. This has enabled the designer to decide what content should and shouldn't remain visible when different amounts of space are available.

A 'mobile first' ideology can be useful in these cases, so that the essential content is identified and available to all. Using this method, those with larger viewports are provided an enhanced experience, rather than those with small viewports being provided a limited one.

Both small and wide screen displays seem to have been well considered from the outset on this particular site. The full width grid seems to have been created to cater to a standard advertisement size. When the width becomes too small to accommodate ads comfortably, they are no longer shown. Even at the smallest width, the layout is still well suited for viewing essential article content, with menus relocated to the top and bottom.

I don't know the working processes behind this site, but it is fairly large and there are multiple contributors. It therefore seems likely that different people will be working to add new material. Having a fluid grid system in place provides a way to add new content in a manner consistent with the site's predefined values.

Despite the choices now available to users via responsive web design, Khoi Vinh advises that users still want 'guided experiences' rather than full control of websites. Whilst they must feel empowered to control their experience, they must also feel that the site is reliable and stable. Where the grid cannot provide this, other variables such as shape, concept and colour now have a more important role to play in creating consistency of experience on site.

Conclusion

Grids have been used for a long time in design, and with good reason. Although at first glance they may appear restrictive or mechanical, they can actually help us to understand and direct our audience's natural, instinctive perceptions.

From a practical standpoint, grids also make the placement of elements that much more refined. This is vital to help resolve the complex organisation, presentation and usability issues common to the field. Though fluid layouts make a pixel perfect grid structure an impossibility, this added complexity makes the understanding and implementation of grid principles more important than ever. The loss of control means that we cannot afford to present users with any further ambiguity than we have to.

Of course, if a site is constructed only in service of the grid, the result is likely to be uniform, boxy and dull. However, the grid should be understood as a tool that can be used to meet the unique design challenges of every site. The optimal design process will always depend on the individual. However, rather than starting with ready-coded boxes and some Lorum Ipsom, it is better to begin with full site content, pencil and paper, and an open mind. A grid may then help to realise the design idea in the most successful manner. Ultimately, understanding the grid will make you more aware of what you are doing as a designer, whether you choose to actively employ a grid in your design or not.

Cited References

  1. Beaird, J., 2010. The Principles of Beautiful Web Design. SitePoint Pty Ltd
  2. Boulton, M. 2007. A Richer Canvas [Online] (24th March 2011). Available at: www.markboulton.co.uk/journal/comments/a-richer-canvas
  3. Clarke, A., 2011. There's no Formula for Great Designs [Online] (23rd Dec 2011). Available at: http://24ways.org/2011/theres-no-formula-for-great-designs/
  4. Hodge, S., 2008. Grid-Based Design: Six Creative Column Techniques [Online] (26th March 2008). Available at: www.smashingmagazine.com/2008/03/26/grid-based-design-six-creative-column-techniques/
  5. Marcotte, E., 2011. Responsive Web Design. New York: A Book Apart
  6. Müller-Brockmann, J., 1981. Grid Systems in Graphic Design
  7. Wroblewski, L., 2002. Site-Seeing: A Visual Approach to Web Usability. Wiley
  8. Vinh, K., 2011. Ordering Disorder: Grid Principles for Web Design. Berkeley, CA (USA): New Riders
  9. Walter, A., 2011. Designing for Emotion. New York: A Book Apart

Bibliography

  1. Boulton, M., 2005. Five simple steps to designing grid systems [Online] (4th July 2005). Available at: www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
  2. Holzschlag, M E., 2005. Thinking Outside the Grid [Online] (19th Dec 2005) Available at: www.alistapart.com/articles/outsidethegrid
  3. Krug, S., 2006. Don't Make Me Think! A Common Sense Approach to Web Usability. 2nd ed. Berkeley, CA (USA): New Riders
  4. Reeves, B., & Nass, C. (1996). The Media Equation: How People Treat Computers, Television, and New Media Like Real People and Places. Cambridge University Press.
  5. Rutter, R., 2006. Compose to a Vertical Rhythm [Online] (12th Dec 2006) Available at: http://24ways.org/2006/compose-to-a-vertical-rhythm/
  6. Samara, T., 2007. Design Elements: a graphic style manual: understanding the rules and knowing when to break them. Beverly, MA (USA): Rockport Publishers
  7. Stocks, E J., 2009. Sexy Web Design. Victoria (Australia): SitePoint Pty Ltd
  8. Lupton, E., 2009. Thinking with type [Online]Available at www.thinkingwithtype.com/contents/grid/
  9. Lynch, P J and Horton, S., 2008. Web Style Guide 3rd ed. New Haven & London: Yale University Press
  10. Marcotte, E., 2009. Fluid Grids [Online] (3rd March 2009) Available at: http://www.alistapart.com/articles/fluidgrids/
  11. Vinh, K., 2004. Grid Computing...and Design [Online] (31st Dec 2004). Available at: www.subtraction.com/2004/12/31/grid-computi