Grids in Web Design 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 graphic design, 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 page layout, 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.