How are grids used in webdesign?

In this essay I will talk about the various advantages and disadvantages of using grids and will draw a conclusion relating to their use in web design and focus on an analyse their use in the online newspaper industry.

What is a grid?

According to the Oxford dictionary the definition of a grid is as follows: a framework of spaced bars that are parallel to or cross each other; a grating.

Grids for web design are a tool for laying out and placing text, images and various other media on a page in a proportional way. Grids are made up of a fore-edge/outer margin, gutters which provide the space between two columns, a baseline grid which is the vertical rows which go to making up a grid and columns. A grid is an attempt to rationalise the placement of the text/media on a page. Designers may sometimes know what looks right but they’re not entirely sure why - they are going on a gut feeling (Boulton 2005). The Golden Mean is an attempt to put a mathematical logic to why the placement of certain items, in this case on a screen, look better in some positions than others. The theory is that the Golden ratio can be applied as a way of defining an attractive layout that works visually.

©2002 Rockport

In history the first records of the discovery of harmonious ratios which were made by Pythagoras in around 570-495 BC when he found that proportionately reducing the length of string on a musical instrument created more harmonious sounds than un-proportionately reducing it. For example the ratios 2:3 and 3:4 create harmonious sounds where others wouldn’t. This discovery led to many studies into the application of mathematical principles to create beauty and harmony (E. Muir 2010).

Golden ratio and the Fibonacci sequence

The Golden Section, or the Divine Proportion is one of the most widely accepted grid concepts and is a visual representation of a number called Phi. Phi is a number produced by bisecting a line at a particular point. Phi is 1.618033988749895, or by the numerical sequence called the Fibonacci sequence. Using the Divine Proportion as a guide to your compositions can improve the communication of your design (Boulton, 2005). The golden ratio is tied to the Fibonacci sequence. The Fibonacci sequence commonly begins with 0 and then 1. Each succeeding number is equal to the sum of the two numbers that precede it so the first several numbers on the sequence are 0,1,1,2,3,5,,8,21,34,55 and so on (Vinh, 2011).

The first estimates of the Golden Ratio’s use in architecture design goes might go as far as 490BC with the Partheon.

Rule of thirds

Another commonly accepted principle for pleasing compositions is the rule of thirds. The basic principle of this is to take the viewable area and break it into thirds both horizontally and vertically. Studies suggest that the eye will naturally drift to the intersection points. This idea works very well for photography and can be used as a guideline for laying out websites but does not need to be followed strictly.

So how are grids used in web design?

Grids in graphic design were made popular by the International Typographic Style (ITS) movement in the 1950s. This ITS movement was led by Josef Müller-Brockmann and Wim Crouwel. According to Müller-Brockmann the use of a suitable grid in visual design makes it easier:

• to construct the argument objectively with the means of visual communication
• to constructs the text and illustrate material systematically and logically
• to organise the text and illustrations in a compact arrangement with its own rhythm
• to put together the visual material so that it is readily intelligible and structured with a high degree of tension.

Grids are generally accepted in the print industry as one of the basic, core elements of good design for print. However their use in web design is not as straight forward. The web standards renaissance has popularized the use of grids in the web community(Braukmuller, 2010).

Elements that make up a grid (Basics Design, Grids 2012)

• Type
• Baseline
• Images
• Horizontal and vertical alignment
• Columns

A basic way to apply the golden ratio to a website is take the total width and divide that by phi which is 1.62. This will give your main content width and and the remainder would be used as a sidebar. So for example for a website with a width of 960px we would divide 960 by 1.62 which gives 593 and a sidebar of 367.

Responsive grids

It is generally accepted that designing a website with a max-width of 960 pixels means that a desktop user will not get horizontal scrollbars when viewing/using the website. However with the advent of the smartphone/ipads/notebooks/tv/ games console etc it is also generally accepted that users will use many different/various devices to browse a website. As a result for grids to be truly useful they need be responsive grids.

There are various frameworks for creating fluid grids for web:

• 1140 grids
• Bootstrap scaffolding layout
• Susy responsive grids for compass
• Responsive Grid System

As with any framework, they are tools written by someone else to help designers/user achieve a certain outcome. Frameworks are not usually custom built and may contain lots of unnecessary code which will add nothing to the website and will only slow it down.

Hindrance on creativity

Working with a grid system means submitting to laws of universal validity - Josef Müller-Brockmann

According to Müller-Brockmann in Grid Systems in Graphic design by working with grids it implies:

• will to systemize and clarify
• will to penetrate the essentials, to concentrate
• to cultivate objectively instead of subjectively
• the will to rationalize the creative and technical production process

User experience

Grids can enable the users to predict where to locate items on a page and how the pages on a website will work. When there are a set of pre-set rules relating to how information on a website should be displayed and where then it may become easier for the addition of content and it will also encourage consistency for large websites which might have many authors/editors and designers.

K Vinh discusses how people see the absence of disorders as much as the presence of order he also goes on to say that like any ordering system grids work on two levels - the perception and then experience.

Grids can give users a sense of

• Proportion
• Hierarchy

Grids on news websites

The Guardian

Readers of the Guardian print edition will be instantly able to recognise the branding of the online version. It will feel familiar to them. The brand is not only displayed through the use of the logo, use of images, fonts, but also through the use of the grid system which lays out the headlines and text in a similar way to the print edition.

The Guardian mostly uses of six columns in their layout but the grid layout is probably based on 24 column layout. See green box annotation on the image. Although some of the columns span wider than the others in general the content does not break out of the grid thus presenting the information in a very organised and logical way. The columns on the farthest right of the page are used to display items that will make the Guardian money such as online dating, Guradian courses, Google adwords, offers and deals. The readers of a page will start to trail off towards the right of the page.

It’s very clear to the user where one piece of content begins and where the next piece starts this enabling the user to easily interpret the information without having to give it much thought.

As per the print version of the paper the date and the weather are displayed on the masthead. On the online version there are more items such as search, editions and various other options that wouldn’t be available in print version.

Visual hierarchy and user guidance of the three case studies I examined for this essay the Guardian website is the only news website that uses sentence case for the headlines. However this may be because the other two newspapers I am looking at are based in America.

The visual hierarchy is clearly achieved with the position of the most important text items on the top right which will be the items that will be viewed by most users first and then the eye is naturally lead along the page form left to right (orange annotation). The website is extremely legible and usable.

The layout is consistent with Guardian style and as the layout is very rigid and solid it give the impression of a very serious, intelligent and well thought out website.

The Guardian use Georgia for their headings and arial for their main text mirroring the serif for the heading and sans-serif body text screen typography best practice.

The use of images with captions (blue annotation) reinforce the brand identity as does the use of colour to highlight the different sections of the paper. On the article page the use of horizontal rules with varying thickness help to break up the main content from the headings, by lines and social media marks. The use of colour is an addition as colour in the print edition would not be used as much as it is free for use in online papers.

Boston Globe

The Boston Globe uses a 6 column fluid website. Using a fluid grid means that the content can be read on any almost every device without the need to download an app or go to a mobile only version of the site.

Related articles and other supplemental information is added as the browser size increases which means that the page is not clogged with information that is not important at smaller browser size – keeping the content clear and relevant.

Emphasis is achieved by use of larger images, text and size of grid sections. The leading article is set with the largest image on the page and the next most important article has larger headline text but no image.

As opposed to the Guardian website the articles pages appear to be far lest cluttered. This is partly to do with the fact that the Boston globe rely on a subscription model so they do not need to fit in adverts alongside the text. The lack of clutter will probably also to do with the fact that when the page is resized it will work better with less columns to fit in.

The Boston Globe uses Georgia for the main body text and a font called Miller Headline Bold which was designed for newspapers.

As with the other websites listed above the layout of the website gives it a serious, corporate, solid well-thought out feel.

The images in certain sections are displayed in the exact same height and width combinations giving a feeling of continuity across articles and event different sections with the indication of different sizes adding to the visual hierarchy of the articles/sections.

Boston Globe Responsive Designs

New York Times

The NY times using a 12 column grid. The first column which uses a narrower grid structure. Like the previous newspaper websites the website is extremely well laid out, solid and professional.

Colours are used to highlight the calls to action such as at the top of the page the large advertisement to subscribe for four weeks for 99c.Using text colour and variances in weight the user can quickly grasp how the grid works and the structure of the website. Scotch lines which are double horizontal lines mirror the print version emphasising that this is a print version originally/also.

The fonts used a re a combination of Georgia fo rthe heading and body text

On the homepage the logo is presented larger than it is on the sub-pages. The NY times is a big brand and the logo is easily recognisable and familiar to users. It is always present on the pages but it gets smaller on the other pages to allow for content.

Calls to actions such as the main page advert takes a prominent position on the page.

The flow of the websites follows ones that a user might expect having the weather , navigation, search box, logo and section heading at the top of the page. Login and additional sections are discreetly tucked away on the top right and this again would follow a users expectation of where to find these items.

Summary

Before starting out on a design the use of grids should be assessed and will not be required or necessary in all designs, and in some designs they could even be a hindrance and out of the scope of the client's requirements. For example it can be very difficult to implement fluid grids on eCommerce websites so a different approach might need to be taken.

Working with grids will be better suited to some designers rather than others as working with grids can be inherent to a personality/design type. The grid will suit designers who have a pre-disposition of order (K Vinh, 2011).

Grids are probably rightly seen as the enemy of individuality. If a website needs to be and look creative then I would stay away from the grid. However if the website needs to be uniform in it's appearance and is content heavy then the grid is the right solution. It is my belief that news websites absolutely need to make effective use of the grid to layout and display content.

It is better to have a faster website than a website laid out perfectly in grids. It might also be more pragmatic to lay a website out in an order that seems logical to the design rather than precisely lining up a grid for the sake of it. Moreover as Jason Santa Maria points out in his Baseline Grids on the Web article “just because something works at one size doesn’t mean the same ratio will be appropriate at larger or smaller sizes” which is important to note as we move towards an age of fluid grids and various browser sizes.

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ” Josef Müller-Brockmann

For large, solid design projects using grids can be additionally useful as the various designers and user have a guideline for the look and tone of the website. Grids are necessary when presenting certain types of information such as data tables.

Perhaps the use of grids can be compared to the Fisher Space Pen.

The space pen was designed by an Paul C Fisher so that it could be used in anti-gravity conditions. The Russian's mocked the American's for the over-engineering of a pen when all they needed was a pencil. As it turned out though the wood and lead shavings in a zero-gravity, oxygen-rich environment can be incredibly dangerous, liable to interfere with instruments or catch on fire (Stamp 2013).

Now the Russian astronauts use the zero-gravity pen...

Patent #3,285,228, The Fisher Anti-Gravity Pen (image: Google patents)

So perhaps - sometimes over-engineering has its uses...