Grids in 2012 Gary Pigott 25 January

1 | Page

Grids in Web Design

Purpose The purpose of this document is to examine the use of Grids in web design, in doing so we will be having a look at some of the concepts behind the use of the Grid System and looking at the benefits that grids can have in helping us to produce usable and aesthetically pleasing websites.

Introduction In the context that we are interested in a Grid can be considered as “a network of horizontal and vertical lines superimposed over a map, building plan, etc, for locating points” (Collins Dictionary). So what is the Grid System?

Essentially it is a design mechanism, used in a variety of design disciplines (be it , street layouts1 or other architectural designs), so the design grid is a series of guidelines, borders and columns into which elements of the design are placed or aligned.

If the system were being used for architectural design it would be: Where does the door go? Where do the windows go? How does everything line up? Does it make sense (both visually and practically)?

In web design the Grid System is used to help with the placement of content; it helps to provide a framework for the material being presented – helping us to organize the content in a consistent way that is both usable and visually pleasing.

In this document we will discuss some of the concepts behind the Grid System and then apply these ideas to the analysis of a real world websites looking at how they have made use of these ideas.

Wireframe vs. Grid Many people think about web design in terms of columns – e.g. 2 column layout, 3 column layout etc; but actual site design is more than that, web pages can be thought of in terms of grids of columns and rows.

Consider a typical layout (or anatomy) for a web page (Brian Miller, p26), shown right.

1 The grid plan, grid street plan or gridiron plan is a type of city plan in which streets run at right angles to each other forming a grid (Wikipedia) 2 | Page

This is a wireframe for a simple , notice the layout conforms to the standard user expectations that a web page should look like, namely:

. Header at the top, user expectation would imply inclusion of some form of banner heading, company logo, etc . Navigation bar just below header, although there are lots of accepted (expected) flavours of navigation which also includes above header, sidebar (left and right), etc . Feature and content areas, sidebar, and footer just where we expect; and the page surrounded with a (background) margin to provide a comfortable gap between the page and browser window

This layout would be one which the designer had chosen to meet the requirements of the content of this specific page – but is it using a Grid design, and where is the grid? (This will be answered shortly)

Analysing the wireframe, we see it is essentially a 3 column layout surrounded by a page border with each column separated by a gutter (or margin). This in itself is not a grid; rather the grid element is the combination of units that make up the page, these units are the building block of any grid and it is through the combination of these units that columns (and in fact any other page level container) are formed2.

The size of the units within the grid is dependent on the width of the (perceived) target browser and the level of flexibility that the designer wants to incorporate within the use of the grid system on his or her web pages. Typically the more grid units the more flexible the design may be (gives more possible size combinations) but this can have the unwanted effect of making the design less uniform.

2 The building block of any grid, a unit is the smallest vertical division of the page (i.e., units are measured in width), upon which columns are built. Units are typically too narrow to house most textual content (Khoi Vinh, p41) 3 | Page

To illustrate this, we will have a look at 2 examples of the 960 Grid System3 (so called because it is based on 960px width page layouts). We will then attempt to relate this layout back to the example wireframe shown earlier (full details of this grid system, including documentation and downloads, can be found at http://960.gs/)

In the above diagrams (courtesy of 960 Grid System) we can see both the 12 and 16 column versions of the grid – both use the same gutters and margins the difference is in the size of the grid units themselves.

Width = 960px, Unit Margin = 10px 12 column: Unit size = 60px (12 x 60) + (11 x (10+10)) = 940 + 10px left/right margin = 960px 16 column: Unit size = 40px (16 x 40) + (15 x (10+10)) = 940 + 10px left/right margin

The combination of units then give the areas that can be used for page content, and you can see that the 16 column format offers more potential layout designs using the combination of units.

3 The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12‐column grid is divided into portions that are 60 pixels wide. The 16‐column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. (http://960.gs/) 4 | Page

So how would the wireframe we saw earlier look if it was designed using the 12 column “sketch book” supplied by the 960 Grid System (supplied as a PDF downloadable file, notice the rectangular horizontal 12 grid structure, there is even a notes area).

Superimposing the wireframe (not to scale) over the sketch book, we can see that the layout fits the “12 column grid” structure.

The 3 column format is achieved as a combination of 4 (visible4) grid units; and the larger feature section fits in to this structure by combining 8 grid units to make up a single page element.

4 The Grid System employed would (or should) only be apparent during the development phase of the site (either through use of design tools employed, templates or whatever); any such layout tools should be disabled before site go live. 5 | Page

Following this grid design allows for variable sized elements whilst still maintaining a feeling of consistency between pages. Content such as images would need to be sized to fit into the grid design (possibly framed by additional whitespace should that be required).

The use of the grid design provides a nice balance when combined with a simple 3 column layout such as this; in fact subsequent pages could adopt a slightly different style (e.g. no feature, or feature at the bottom of page etc) but the general layout would still feel the same. Notice the above layout, using grid design, gives a visual balance to the page; but this may also be as a result of the layout conforming to the “Rule of Thirds”5. The grid units determine placement not necessarily size, for instance images can span multiple units – you use them (in terms of your layout) to establish an optimal size for the graphic in question such that it can be placed on the page in the desired location6.

It is important to remember that users have certain expectations (web conventions7) for how a website will work ‐ for instance the location and functionality of specific elements (e.g. header/footer/search bar locations, what does clicking on a header banner do, etc). As well as these web conventions users also have the expectation different pages on a site will have a consistent look – moving from one page to another will appear almost seamless, page design will be consistent, with all the expected elements in the same place.

Consistency, between site pages, as well as improving user experience (user comfort) also improves the readability (and scan‐ability8) of the site, having visited several pages the user knows where to look for specific content within subsequent pages.

This uniformity enhances the feel of the site giving a professional (complete) feel, and this further serves to promote the site brand – much in the same way that a poorly designed site acts as a negative advert for the company it purports to promote.

Baseline Grids As well as using grids for page layout (content alignment) we can also use the Baseline Grid9 to align the baselines of all text on a page, regardless of size or style ‐ and this can create “a smooth rhythm in the typography within a design” (Brian Miller, p 82).

Creating a baseline grid involves some calculation, essentially the designer starts with a type size for the (majority) of body text, applies a line height; all other measurements should be multiples of the line height, to ensure that all baselines will line up relative to each other.

5 The rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally, and placing our most important elements within those thirds. It is often difficult to establish vertical dimensions within a site due to factors outside of the designer’s control (e.g. end user browser settings, screen resolutions etc).

6 When formatting images for use on the site, their presentation will often depend on the constraints of the layout chosen.

7 “All conventions start life as somebody’s bright idea. If the idea works well enough, other sites will imitate it and eventually enough people have seen it in enough places that it needs no explanation” (Steve Krug, p34)

8 “We don’t read web pages we scan them” looking for “words or phrases that catch our eye” (Steve Krug p22).

9 A horizontal grid system that aligns baselines of the text on a page; a small image sized to the desired line height is repeated as a background image, which is turned off once the site has been designed (a design aid only). 6 | Page

Unlike the design layout using the Grid System, this is not really something that you can wireframe, instead a background image to each page within your site would be turned on for the duration of the development and then turned off once the design was completed (commented out in CSS etc).

Below shows screenshots from blog www.TheGridSystem.org ‐ with the baseline grid turned off and on.

Typically, the baseline is invisible to the site user; they only have a feeling of uniformity in terms of text alignment – it just looks right!

With the baseline turned on you can see how all elements of text line up to the baseline.

Why Use Grids? A grid “should focus on problem solving first and aesthetics second” be that “communication problems, organizational problems, or transactional problems, a grid derives its beauty from how well it resolves those challenges” (Khoi Vinh, p35) – and it may be that a grid structure is not appropriate for the site in question.

It has been suggested that the use of grids in web design (Khoi Vinh, p11) offers the following benefits:

. Grids add order, continuity, and harmony to the presentation of information on frequently high‐density web pages.

7 | Page

. Grids help users predict where to find information from page to page or from behavioral state to behavioral state, which aids in the communication of that information. . Grids make it easier to add new content to a website in a manner consistent with the overall vision of the original website. . Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.

We have seen how the use of grids can enhance the feeling of continuity within a site, improves user experience and page readability. The overall feeling of site consistency and organization gives a professional feeling to any site – this in turn reflects well on the company brand.

Use of a consistent grid design means that new content can be added more easily because the designer knows the constraints of the site vision, and using some of the “tools” we’ve already seen can (fairly) easily slot new content into the structure without upsetting the overall feel for the site.

An evidenced grid structure also helps collaboration within site design; all parties know which elements of the site they are working on, the dimensions available to them, and how it fits into the whole.

Visual Hierarchy Typically when using a grid, page elements are placed within recognized containers within the grid structure, objects can span multiple columns but have a clear relationship to the grid itself (through positioning and alignment). “Any element that relates to the grid in a unique way or breaks the grid system will rank higher on the hierarchy scale” (Brian Miller, p81).

So use of a grid structure gives the designer yet another tool in the visual hierarchy toolbox.

An example of this being used might be a company logo sitting outside the grid – thereby having more visual weight.

Logo outside grid

(http://aigalosangeles.org/)

8 | Page

Another example is to use part of the structure for what is essentially just “white space” (negative space) and place an important item in that area thereby creating a visually important item.

Use of white space to highlight element

(http://www.alistapart.com/articles/)

Real World Example Having looked at the concepts behind the Grid System, we will now have a look at a real world website to see how they have applied these ideas.

The website we will be looking at is that of a large software house, Civica PLC10 (www.civica.co.uk).

The site provides details of the products and services provided by the company, along with customer success stories which evidence the “benefits of doing business” with Civica. The aim of the website is to promote Civica and advertise the company, products, and services it provides.

This is not an e‐commerce site since its “Call To Action” (CTA) is not to buy something (from the site) instead it is to get the user to “Contact Us”, with the intention of then selling products or services ‐ the genre of the site could be seen as a corporate marketing vehicle.

The rationale behind the choice of this site is primarily that they are one of the sites that I am looking at in my Web Thesis project and I felt that further analysis of the design would prove (personally) useful.

10 Civica is an international software house employing over 1500 staff in 25 locations around the world; they provide various software products which includes housing management systems, document management, and workflow solutions. 9 | Page

Company Advanced search functionality Logo Main Navigation bar

Rollover content

Main content (banner style)

Fixed parts of layout

Sub content (links)

Call to Action Other links

Footer

The website has a very corporate look and feel which is appropriate to a large corporation like Civica; it has a professional but very formal (lacking personality) feel.

Visual interest is maintained by the use of appropriate images, the inclusion of rollover effects, and the use of banner sized graphics.

Navigation is implemented as a combination of page level links and drop down menus. The site structure is fairly clear (and logical) and usability is enhanced by the use of site level search functionality.

The website page footer includes icons for Facebook, Twitter, and LinkedIn.

The CTA is achieved via a large “Speak to Civica” contact area in the lower left of the page, and whilst it is below the fold it is added to by the “Contact Us” navigation link at the top of the page.

The header and footer sections of the page are consistent throughout the site layout, the colour scheme, (general) page layout, and overall look and feel is carried through all pages on the site. This maintains the feeling of uniformity throughout, and gives the impression of an organized and professional (albeit cold) website.

10 | Page

This look and feel seeks to promote the company as a professional software provider (perhaps the approachable feel could be improved).

Further analysis of the site reveals the site is 1080px wide, the graduated background fills any browser window greater than that size. At first glance this excludes the 960 system, however cutting down the page size to just the main content area (excluding white space) gives us a page that is actually 960px wide (see below).

With the page superimposed over the 12 column grid layout we can see how the system has been used to align the content within the page.

The central banner content is given visual weight by its central placement and the fact that it (slightly) overlaps the grid layout.

Below the central content, the page is structured as an evenly balanced 3 column layout (each column consisting of 4 grid units).

The CTA section is 3 columns but not evenly distributed, the first 2 columns are 3 grid units each and the “Speak to Civica” CTA makes up the remaining 6. Again like the central content banner the CTA region is allowed to overlap the border of the grid thereby giving it additional visual weight.

The main disadvantage of the positioning of this CTA is its location “below the fold” on this page (however subsequent pages are of different length and so this is not always the case).

The red line represents the fold when viewed in Firefox with a couple of toolbars; the green line represents the fold when viewed in Chrome with no toolbars; so the majority of this page is actually below the fold.

11 | Page

If we have a look at the “About Us” page we can see that the use of the grid system is consistent11.

The site feels uniform, organized and consistent; there is never any danger of the user feeling they have strayed from the Civica site. The style (and professionalism) of the site, even though it may lack character and visual excitement, reinforces the brand message “we are a professional company”.

11 The only differences being caused by my lack of superimposing skills within Photo Shop.

12 | Page

Conclusion The use of grids within a web site design can help organize the content and structure of a site (helping to bring order out of chaos), thereby providing a continuity across the various pages of our site.

Use of grids enable content to appear consistent throughout the site, headers are the same size, elements of repeated page content appears in consistent locations, the site appears professional and organized. This in turn improves site usability; users become familiar with the layout and know where to look for information ‐ with the structured (and organized) layout aiding both readability and scan‐ability.

By following a consistent structure, and making use of layout/design tools like the 960 Grid System, designers not only produce a better looking and functioning site but also one which is more easily amended.

The use of grids appears to be, in most cases, a no brainer; that said however it may be the case that for some sites it is not appropriate. It should be remembered that the use of a grid should not be at the sacrifice of the vision (or aims) of the site. The grid is after all just a tool to help you design a better site.

13 | Page

References

Books

Brian Miller (2011): Above The Fold; How Books

Craig Grannell (2007): CSS and HTML Web Design; Friends of Ed

Jason Beaird (2007): The Principles of Beautiful Web Design; Sitepoint books

Khoi Vinh (2011): Ordering Disorder, Grid Principles for Web Design;

Steve Krug (2006): Don’t Make Me Think (2nd Ed); New Riders

Site References

AIGA LA: http://aigalosangeles.org/

A List Apart: http://www.alistapart.com/articles/

Jennifer Kymin: Why Use a Grid to Design Your Page? http://webdesign.about.com/od/layout/qt/why_grids.htm

Jennifer Kymin: Grids, Order Out of Chaos http://desktoppub.about.com/od/grids/l/aa_gridsorder.htm

The Grid System: www.TheGridSystem.org

960 Grid System: http://960.gs

Wikipedia: http://en.wikipedia.org

14 | Page