Grids are used to establish order for content by creating horizontal and vertical sections where content can sit, aligned structured and visually pleasing. They help establish a perfect and organised layout by aiding precision alignment through use of horizontal and vertical lines. A grid doesn’t need to mean that creativity is lost or everything appears squared, I believe they can do the opposite, they enhance designs by allowing the designer to achieve balance and harmony.
“Grid systems can facilitate creativity by providing a framework and already answer some designers’ questions such as ‘where should the folios go’, ‘how wide should the measure be?’ etc. A well designed grid system will go some way to answer these questions and more.” (Mark Boulton)
With responsiveness and fluid websites becoming the holy grail for designers and their clients, are fixed pixel grids still relevant?
“Using a predefined grid seems to make as much sense as using a predefined colour scheme.” 2 (Jeremy Keith)
In this essay I will be discussing the origins of grids and their application to the most modern medium of websites. I will be using government websites as a case study on the use of grids in a responsive context as opposed to the more traditional fixed pixel grid layouts to highlight that the infinite canvas of a web page unlike their fixed width print predecessors or even fixed width webpages can still use grids to achieve responsive designs.
What are the origins of the grid?
As long as there has been print grids have been in existence in order to provide a frame to a page. From the earliest books and early centuries, books such as the Bible, where there are columns of text to today’s novels where one column layouts abet with fixed margins and spacing, enabled a ordered sequence of text from which the reader can comfortably view the information.
In Ellen Lupton’s book Thinking with Type, in which she advises Typography as a frame in itself, puts forward that the advent of the newspapers and magazines in the nineteenth century, changed the way information was laid out and “made way for the new typologies of the grid” . The grid was embraced by forward thinking artists and designers who created art using the grid as a more flexible tool than before.
In post-World War 2 a group of Swiss Graphic Designers including Josef Muller-Brockmann and Karl Gerster, pioneered new design ideas based around the grid and computer programming, radically cropping images to fit around content and column structures to provide a clean and ascetically pleasing layout. These ideas were embraced by Graphic Designers and in turn commercial publications such as today’s newspapers still use their grid layout principles.
Print publications have fixed edges and sizes. If you think of a broadsheet newspaper there is one standard size in which the content needs to fit and therefore it makes sense to have a grid layout in which the content could be comfortably fit whilst maintaining a good clear experience for the reader. By creating a pre-defined grid layout the copy could be placed to align with the grid and create a streamlined visual effect. The copy does not always fit within a column and overlaps but as long as all elements follow the same guides for text or images the pieces fit together like jigsaw. Newspapers ideas follow the Swiss Design ideals that images should be wrapped around text to the left or right rather than previously bad layouts, highlighted by Gerster, where images appeared embedded into the centre of the page with text wrapping to the left and right therefore the image stopping the flow of text.
Grids and their use on the Web
With print in mind it makes absolute sense as to why designers should follow a grid layout but with the advent of the web the discipline wasn’t as clear cut. Web Designers weren’t necessarily (aren’t necessarily) graphic designers and with CSS and HTML as a brave new world in design the grid principles for web pages didn’t seem to apply the same way as in print or fixed width electronic documents such as PDFs or Word documents.
Tables were a popular feature of earlier websites, the coded tables provide order to the web pages in the same way grids provided to print. With advances in HTML and CSS more websites focused on design and creation of websites which weren’t just plain text or text scattered with some images but a new medium of art, of electronic graphic design. Where graphics designers built for a fixed page size the boundaries of websites are not so clear.
Web Designers and Web Standards advocates have been embracing the grid as a layout tool but it has been traditional for a 960 pixel width to be the standard fixed pixel width for many browsers. Designers using this size and a variety of column and box layouts using the grid layout found it useful to design in software such as Photoshop and Firefox.
However, a new issue has arisen for grid layouts and which should be adopted. Where Websites were previously viewed on either a laptop or monitor with a fairly standard 1024 resolution more and more web browsers are using multiple devices such as mobile phones, tablets, laptops and monitors of varying sizes. The 960 grid, although still a safe option for many websites, does not have the same weight anymore if a Designer wants to move forward with responsive web design, that is design which adapts to the device in which the User is viewing the site to allow a good User Experience. No one using their mobile phone likes to see the full size layout of a site and having to scroll up and down and left to right when trying to find the information they require, especially in a hurry (which I often am).
Chris Brauckmuller, a Web Designer, advises in a Smashing Magazone article that he has observed via conservation and research that Web Designers believe grids can constrain them, curb creativity by making measurements and having to fit design elements into sections. This does contrast with the original thinking of the grid by the Swiss Design collective, that:
“The typographic grid is a proportional regulator for type-matter, tables, pictures and so on. It is a priority programme for a content as yet unknown. The difficulty lies in finding the balance between maximum formality and maximum freedom, or in other words, the greatest number of constant factors combined with the greatest possible variability.”
The same can be applied for the emergence of responsive web design, the problem of fixed width grid tools such as 960.js may not be fit for purpose in the near future but as Gerter in his comment above states, the balance needs to be found for a responsive grid without pre-defined measurements which suits the need to fluid layouts and responsive design.
An article on the A List Apart website by Chris Armstrong encapsulated this thinking, and Jeremy Keith’s statement in my introduction perfectly. Instead of saying grids only work for print or for fixed width he believes Web designs should use “An Infinite Grid”. Although responsiveness for the web is a new discipline and mobile and devices are new technology this fits with the thinking of the modernist theories and thinkers as the grid as an infinite space”
In his A List Apart article Chris Armstrong highlights that “we are designing for an infinite canvas and for that we need an infinite grid system”. Do we need to change out thinking of measurements and how we fit the content in? Grids are effective for ordering information, adding new content for usability and structuring design but although this remains should they be reversed? Should we think about content first then the canvas (our webpages) and how it accommodates the content rather than the traditional vice versa?
“In order to embrace designing native layouts for the web—whatever the device—we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out.”
The web is by its nature fluid, it is the Web Designers who have created fixed divs and areas for design and content in order for it to be viewed in one way only and to not expand and fill the screen with white space and therefore look bad. We still don’t want the site to expand to fit a browser without control over what will happen. We want the layout we would build in a grid with an element of white space but the key being we can control the content and design and also the all-important white space by creating for different states for different layouts. By creating grids with different measurements in ems or percentages and specifying at which point the layout depending on the relationship should change we can be responsive whilst maintain order and harmonious sites.
I have chosen 2 government websites who have embraced responsiveness whilst still using a grid layout which changes depending on the Users device. I think that the government, whilst not known for their ground breaking designs and websites, have embraced responsiveness and are in tune to Users’ needs in terms of accessing information digitally.
Figure 1: GOV.UK website larger device layout of the homepage. Built by Government Digital Services (GDS)
Britain has alot of government websites with many of the larger departments having a website of their own in which they publish information, news and material for public consumption. There was also the now defunct directgov website which hosted much of the task based information required by the public, for examples applying for a driving licence. They all cost time and money to maintain and upkeep. In a era of transformation and austerity the government of the day commissioned Martha Lane Fox, an Internet entrepreneur, to look at their websites with the view to providing an innovative solution. The result is GOV.UK which aims to be a one stop shop for all government information and citizen applications. It is still a work in process but it has already rationalised directgov and 6 bringing in all the departments under one roof. It has been gaining positive feedback for its use of HTML 5 and CSS3 and also for provision of a responsive site to meet the publics’ needs.
Using the spirit of the Internet established by Tim Berners Lee, for everyone, and more recently popularised in the Olympics 2012 ceremony, this site is for everyone. I believe this site achieves a universal usability by using a clear font and a clear grid layout. 3 columns in which lists of information, imagery and feature boxes comfortably sit. The text is clear, the large image provides a clear call to action for those wishing to view the Inside Gov section of the layout.
It looks relatively simple, the 3 columns grid layout, split into rectangles for each section of information betray what is a complex set of information. The use of white space provides a clean look and feel which is visually calm and stops any sense of information overload. The design flows and users can see through use of links and guides which sections they can go to.
The design uses @font face to display a font created by GDS called GDS Regular, this would have been created to accompany the manifesto of the site, clear and easily read, a modern typeface. If a Users’ browser cannot display this font it changes to Helvetica Neue, Arial or Helevtica depending on the Users device. Interestingly the helvertica typeface is a font created by the Swiss Design modernists who as above were forefront in advocating the use of the grid in design. The font itself is like the site, clear and clean and gives a little personality whilst still retaining an air of authority.
The 3 column grid layout allows the site to list the many different categories the User will require in order to complete or research the task they have come to the site to do. There is no top level or side navigation in the site. The columns are the navigation allowing for the entire home page to become the navigation thus restricting it to have to be compressed into one area.
The columns also allow for imagery to be added into different sections. The main advertisement spanning horizontally across the columns as a large advertisement or feature, different to the vertically laid text and links around it. The feature box in the right column draws the Users eye to the content by using a black background where the rest appears white, acting as a strong call to action from the users but keeping within the rest of the structure of the design.
Across the site the brand of GOV.UK appears as a black bar with the white title of the site in the far top left. The brand is strong yet discreet. It takes up a small proportion of the real estate on the page but it the User can identify immediately which site they are in. It spans across the columns, like the main call to action in the centre of the page differention from the rest of the content, it is at the top of the visual hierarchy but does not take over.
I spoke earlier about fluid layouts and the infinite grid and I think, as Chris Armstrong mentioned in his article, it is about designing a layout and a grid for states and working out where the break fits and this is where this site really provides a service for its users. As the User changes devices or screen size the 3 column layout stays the same but reduces in size and whitespace until it reaches the break point, the point where 3 columns are no longer viable, and it changes to a one column layout.
Figure 2: GOV.UK website smaller device layout of the homepage. Built by Government Digital Services
As you can see the content is the same as previously viewed in my 960 resolution, the change state or the break point of the design has indicated at a certain point the design as it stands in 3 columns will no longer be as accessible or user for the browser and has been calculated to change, to reformat into 1 column.
The canvas was built for the content, the grid around the content. No aspect of the user experience has been lost in the transition. The page has retained its usability and each part of the design still retains its impact, from the call to action for Inside Government still standing out to clearly linked sites. The branding retains its place at the top of the hierarchy, clearly showing where the branding ends and the content starts. The Search function is also retained. As there was no navigation in the site the structure of the navigation does not have to be lost in the transition and the design problem of how to recreate a navigation for a mobile device does not enter the equation. The columns seemlessly flow from one state to another. The grid although not infinite in its changes has been well designed and thought out and it is the content which has established the grid.
Although still in its early days I think this site is an achievement in providing information for everyone using clear design which is a uniform, orderly and user friendly. I don’t think it will make paying council tax a real joy though, no site in the world could!
Hillsborough Independent Panel
The next site I am going to talk about is the website set up for the enquiry into the tragic events at Hillsborough football ground on 15th April 1989. The website was commissioned by the UK Home Office to accompany the enquiry, which is currently taking place, to establish the truth about the events which took place on the day. The site hosts thousands of previously undisclosed documents release since the enquiry begun. A site like this can’t be easy to build given the nature of the content but in terms of design, usability and access to information this responsive site succeeds and will aid the on going enquiry in the best possible way. In the words of the UX designer , John Jones, on the Jones Olsen Agency Blog:
“useful, usable, serious but not pompous, able to successfully facilitate its users tasks, provide easy access to all the disclosed documents, and clearly communicate the message of the Panel’s report.”
Figure 3: Hillsborough Independant Panel Website Homepage, larger device layout. Agency responsible Jones Olson.
The website has been built using a 3 column grid layout which gives gravity to the page. A clear design which enables the site to be set out in 3 clear sections both horizontally 4 vertically. At the top of the hierarchy is the header of the site containing the name, search and a simple navigation containing the home link, site map, contact and glossary links, again the main navigation is in the middle of the page.
The top row in which the name of the site is contained is branded using only purple and white. The choice of purple for the site underlines the formality of the site, it gives the site colour but purple is a good choice as it is not gregarious or bright but divides the content (in the titles also) whilst retaining authority and serious, respect for inquiry and those who died. The brand, if it can be called that, is plain text, no embellishment or icons, to the point and clear understanding to those using the site.
The first part of the content across the site spans across 2 of the 3 columns and has a different colour, a light grey, to the rest of the whitespace of the site. It empathises the purpose of the site and draws the users eye to the area. The font used on this section and the rest of the site is again the Swiss designed Helvetica. This typeface again gives the site an authoritative tone and without “pompous” which would have been the designer’s intention. A clear font which fits with the layout of the different sections and one which User will find easy to read and clear. To the right of the statement of the site are a selection of links which aims to help the user navigate the vast amount of information contained within.
The remaining content is taken up by further links to content contained within the site. 6 boxes separate within the 3 columns which enables clearly labelled and sectioned areas. Within 4 of the boxes there are images of the Liverpool Football club where the tragedy happened which draw to the Users attention that this site is about those who died and not just a site of documents and links, it reminds the Users of the real reason behind the site. It does so formally and the grid layout enables these image sections to be standalone calls to action, in this case calls to think and remember.
Like the website before the content has influenced the design rather than the design created for content. The grid has layout has 2 further break points where the format changes, allowing for a responsive site in which the information and content flows to achieve the same result each time, accessible and usable.
Where the site breaks into 2 columns the content remains and is changed to fit accordingly. The images float to the right of the text rather than keeping the same structure as the 3 column layout. The main image dedicated to those who died expands out to become a wider image inline with the text, its message kept clear.
Figure 4: Hillsborough Independant Panel Website Homepage, medium device layout. Agency responsible Jones Olson.
The minimal navigation, as it did at the first break, stacks into the header area giving Users a clear journey to get to the content they require. Visually simple but with impact and quality the single column layout contains the a quality User experience and retains a quality design.
Figure 5: Hillsborough Independant Panel Website Homepage, small device layout. Agency responsible Jones Olson.
A serious site with a serious message, the grid layout used on this website has underlined this message and enabled Users of the site to undertake tasks related to the content . The responsiveness also gives access to everyone regardless of the device they view it in.
Conclusion
Grids have influenced design over the centuries and they continue to do so. I believe they are an essential tool in web design in order to create and design well organised and flowing sites. I am include to agree with Jeremy Keith that a pre-defined grid is not the way forward If we as web developers are to meet the demands of technology today. To design using fixed layouts such as the 960 grid layout although useful is not the future. Fluid or baseline grids like those used in the web examples I have used show that grid design can be achieved in a responsive manner to create harmonious sites. They can achieve trust from the User, convey a serious message, be fun and interactive, be essential tools for the User, be artistic but disciplined and also display dynamic or static content. However I do agree, regardless of the grid used content should be the first thing to think about, design the grid around that or as Chris Armstrong advises:
the goal is to make the most of the space available, relative to your content, to maximize readability and presentation.
References
Ellen Lupton. 2010. Thinking with Type. 2nd ed. New York: Princeton Architechtural Press. 161
Boulton, M. (2011) A Richer Canvas. The Personal Disquiet of Mark Boulton, [blog] 24 March 2011, Available at: http://www.markboulton.co.uk/journal/a-richer-canvas [Accessed: 20 January 2013].
Twitter (2012) Status Update. [online] Available at: https://twitter.com/adactio/status/161844989771513856 [Accessed: 22 Jan 2013].
Chris Armstrong. 2012. The Infinite Grid. [ONLINE] Available at: http://www.alistapart.com/articles/the-infinite-grid/ . [Accessed 21 January 13].
Brauckmuller, C. (2010) Grid based web design simplified. Smashing Magazine, Available at: http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/ [Accessed: 19 January 2013].
Wikipedia (2013) Josef Müller-Brockmann. [online] Available at: http://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann [Accessed: 22 Jan 2013].
Cabinet Office (2010) Directgov 2010 and beyond: Revolution not Evolution. [online] Available at: http://www.cabinetoffice.gov.uk/resource-library/directgov-2010-and-beyond-revolution-not-evolution [Accessed: 22 Jan 2013].
Jones Olson (2012) Designing for public understanding: the website of the Hillsborough Independent Panel. [online] Available at: designing-for-public-understanding-the-website-of-the-hillsborough-independent-panel/ [Accessed: 22 Jan 2013].
Ellen Lupton. 2010. Thinking with Type. 2nd ed. New York: Princeton Architechtural Press. 165