Grids: news and information websites

Introduction

Molly E. Holzschlag's analogy ¹ between the use of grid systems in city planning and in web design is fitting when discussing the use of grids in web design, but is also fundamentally flawed in one important aspect. She points out to the formal and structured grid systems used in development of cities in the new world (she uses her hometown Tucson AZ as an example) and compares them with the helter skelter and organic ‘design’ of old world cities (London, in her example).

Although Tucson’s layout enables residents and visitors to easily get around the city, its structured layout gave way to an inorganic growth which led to a lack of a discernible city centre - essentially, the city is made up of different, but in a way identical, parts. Whereas London's layout gave way to a more organic growth which led to the city having easily identifiable centres. It feels more heterogeneous, regardless of how hard it is to get from one part of the city to another.

If we carry this metaphor to web design, we see that there is an inherent logic in laying out websites in a grid system to allow users easy access to pertinent content. However, constantly adding more content runs the danger of making these websites look painfully homoegenous to the point where they serve only a utilitarian purpose. On the other hand a website laid out similar to, say, London may be a user experience nightmare, but would enable it to have its own flavour and room for growth for new content and functionality as they become available.

This difference is the core of the grid discussion. The essence of the website in question, including the technical considerations around its responsiveness, type of media access and functionalities, need to be the factors in the decision for the use of or shunning a grid-based design. Holzschlag is absolutely right in her call-to-arms to occasionally consider ditching table-based grids in favour of more spontaneous layouts. However, one look at various types of current websites, it becomes obvious that we are still very much tied to the table-based layouts when designing websites, even if we have ditched the <table>s, <tr>s, <td>s and so forth in markup.

Why?

Because using a grid-based layout is often necessary. And herein lies the fundamental flaw in Holzschlag's metaphor, which is twofold:

1. Size - comparing Tucson and London is akin to comparing Tucson Citizen with the BBC.
2. Content - comparing Tucson and London is also akin to comparing Facebook with Ticketmaster.

In this essay, I aim to point out that the use of grids is less a personal aesthetic-driven choice (or even a semantic one), than a choice predetermined by context and, more importantly, type of content. For this, I will look at news and information websites.

In order to canvas a varied sample, I have chosen 40 such websites with varying traffic (both quantitative and demographic), content type (national news, local news, industry-specific news, sports, entertainment, political leaning), region (global, country-, region-, or language-specific), and language (left-to-right, right-to-left script) among other separators. The list of analysed websites can be seen here.

Note: All screenshots are taken from a screen with a resolution of 1680x1050.

Use of grids in news and information websites

First let us look how grids are used to present the inherently rich and up-to-date content of news and information websites.

If we take a cursory glance at the following homepage screenshots, we can see that they follow an almost identical layout, even though they have varied types of content:

This is admittedly an oversimplification of their content, but it serves to differentiate these websites. Let us also assume that the overlap in content and functionality is minimum.

How is it, then, that these websites follow a near-identical layout? Consider the following wireframes, extracted using Wirify:

All of these websites use a multi-column grid system, a design convention used extensively in news websites. The main advantage of using a multi-column grid system is to emphasise the hierarchy between content and to present different types of assets on a page.

Let us have a look at some of the common elements in these wireframes:

• A large image (or some other media asset) near the top-left corner, just below the main navigation bar. This is usually accompanied by a paragraph of text and other links. The whole element takes up at least 2 columns, depending on how the grid is laid out.
• A narrower column to the right of the large media asset with small image thumbnails and accompanying text. It is made up of at most 2 columns (but usually only 1), again depending on the number of columns in the grid. This column is sometimes absent.
• A third column on the right with more media assets and accompanying text. This is narrower than the main-asset column on the left, but wider than the centre (if there is one).

What, then, are the distinguishing factors?

• The multi-column that the large media asset occupies is usually divided into smaller number of columns below it, with smaller media assets and accompanying text. This is usually repeated 2 or 3 times.
• Further down the page (sometimes below the 'fold'), other narrower or wider columns appear. They either mirror the top of the page with wider columns sandwiched between narrower ones, or present a homogenous layout all the way down to the footer.

As mentioned above, this layout is almost universal in news websites. The main difference occurs when you look at a website in a language written from right to left. Consider the following 2 news websites from Egypt and Israel respectively:

Although Al Gomhuria has a slightly different layout in the Wirify-ed version, the live site follows the same pattern as the Western websites that we looked at above. The wireframe for Haaretz’s homepage is a 180-degree image reversal of the Western wireframes:

From these examples, it becomes clear that news and information websites tend to follow a somewhat rigid table-based structure. Looking at them more closely would likely reveal use of design methods, such as the Golden Ratio.

Visual hierarchy and user guidance

Mark Boulton’s article "Aesthetic-Usability Effect" ² explains in great detail why designers, from architects of the ancient era all the way to current web designers, have opted for Golden Ratio and other aesthetically pleasing methods. In the article, Boulton defines Aesthetic-Usability effect as "a condition whereby users perceive more aesthetically pleasing designs to be easier to use than less aesthetically pleasing designs."

In other words, if your website looks tidy, users are likely to consider it more user friendly than that which is not.

News and information websites adhere to a rigid and structured layout, enabled by extensive use of a grid system. There are a variety of reasons why such websites use a grid layout, one of which is their perception as voices of authority. From a psychological perspective, news and information websites need to paint an authoritative picture of themselves to add to the believability and robustness of the information contained therein.

From a purely usability perspective, adhering to a rigid grid layout is also paramount. For this, let us have a look at another 'golden' term, the Golden Triangle ³.

The Golden Triangle is referred to the most viewed area of a website (or a search engine results). It is a right-angled triangle, whose hypothenuse is diagonally opposite the top left corner of a page - the area where the site logo is usually situated.

From the image in the link above we can see that the area where the hot zones are concentrated is near the right angle. This is the hot zone, where most of the user attention is concentrated on.

If we think back to the news and information websites we looked at previously, it becomes clear that this is the zone where content, whether it is a media asset, a piece of text, or a functionality need to be placed. This visual hierarchy is replicated on the news websites that we previously looked at.

The Golden Triangle in its current rotation only applies to websites in a language whose text flows from left to right. For websites written in languages such as Hebrew or Arabic, we need to flip the Golden Triangle by 180-degrees. Unsurprisingly the effect is identical; only it is the other way around if we look at Al Gomhouria and Haaretz.

Whether this grid-based design of news and information websites is aesthetically-pleasing is subjective, but it is definitely contextual. News and information websites’ main aim is to present the latest and in-depth news to their visitors, utilising various functionalities available to them, such as videos, podcasts, infographics, photographs, charts, tables, and plain old text. In a way the utilitarian nature of news websites drive their need to present the information in a structured manner.

From a website management perspective, grids prove to be immensely useful:

"Grids can also make your designs more modular and your development more efficient because they create a known, consistent structure into which you can easily drop new elements and rearrange existing ones without as much thought and time as it would take in a non-grid layout."

Zoe Mickley Gillenwater ⁴

News and information websites need to be constantly kept up-to-date, especially when considering the current near-domination of aggregator and feed-based websites where users use to access news, such as Twitter and Reddit. This need for frequent updates calls for a grid-based design.

Before we finish this section on visual hierarchy and its impact on the presentational aspect of good user experience, let us briefly touch upon the impact of layout on readability of content.

Matt Cronin touches on the importance of layout on readability in his article 10 Principles for Readable Web Typography ⁵ by singling out hierarchy, line height, length and spacing. Regarding hierarchy he says that "[e]very typographic layout needs the essential element of hierarchy. […] Hierarchy plays a huge part in how scannable a layout is." He then continues with line height, length and spacing in the same vein.

Richard Rutter talks about the three factors that attribute to vertical rhythm in his 24 Ways article Compose a Vertical Rhythm ⁶:

1. font size
2. line height
3. margin or padding

These two examples from Cronin and Rutter are further proof that layout has a clear effect on readability.

By adhering to a rigid grid layout, each textual element has a set line-height, spacing (if applicable) and length. For example consider the maximum line-lengths (including spaces) in the following homepages, followed by those on their respective article pages:

• BBC - 73 / 79
• The Los Angeles Times - 70 / 101
• Gawker - 94 / 94
• The New York Times - 46 / 86
• The Daily Telegraph - 66 / 87

"According to classic of Web typography, 55 to 75 is an optimal number of characters per line." ⁷ A quick calculation of these four sites show that the average line-length is 70 on the homepage and 89 on the article pages. Although a comparison is not statistically robust because of low sample size, it shows 2 things:

1. that these 5 websites have line-lengths longer than the classic optimal line length;
2. and that layout directly affects line-length - by utilising more columns, line-length increases in 3 out of 5 these websites’ article pages.

One important tangent that needs pointing out is that the optimal line-length for articles on the Web has a tendency to consider websites written in English only. The rules are likely to be carried over to other languages written in Roman script, but those languages that use Cyrillic, Arabic, Farsi, Hebrew or other non-Roman alphabets would have different optimal line lengths. So the effect of the layout on typography and readability needs further investigation in websites such as Al Gomhouria, Haaretz, Eenadu or Asahi.

Image and branding

We have touched on the credibility layout gives to news and information websites - that it is important to present content in a tidy and structured fashion. But how does layout directly affect the image and branding of a website?

In addition to an aesthetic convention each brand possesses, whether it is the colour scheme, choice of typeface or use of images, layout plays an essential part in enhancing brand image and identity.

Let us now have a look at the following 2 news and information websites:

The Mail Online, the complementary website of daily British tabloid The Daily Mail, relies heavily on colourful, attention-grabbing images. It has a democratic 3-column layout that handles hierarchy differently - it forces the content to determine the emphasis. In this respect, The Mail Online is unique among the 40-strong news and information websites of this study. Although the homepage is quite text-heavy, the emphasis is on the images - not dissimilar to red top tabloids’ editorial and design stance in general. This emphasis on the images ends up in a boxy feel - again not too dissimilar to layout of the print editions of red top tabloids. In a way, The Mail Online uses a layout that draws a lot from its print edition.

Mashable, is also an image-heavy website, with very few text on the homepage. The difference, however, is that Mashable offers an infinite-scroll layout. Emphasis is on the latest news, as they appear at the top, and the general layout is reversed - the dominating media asset or element is on the right-hand side, similar to websites written in Arabic or Hebrew. Why this change from other examples of websites written in English? It certainly has something to do with the responsive design of its layout, but it is also because Mashable would like to portray itself at the cutting edge of Web and technology news, hence the 'odd' design. Yet, it is a still very rigid layout - three main columns, each made up of multiple grid columns. With an infinite scroll, it does look very homogeneous.

We can analyse each of the 40 websites in this study and see that layout is essential in enhancing branding and image of the website. The deciding factor lies with the 'essence&39; of the website in hand, which takes us back to Holzschblag’s analogy.

Conclusion

As Neil Gaiman said about writing, "[w]rite your story as it needs to be written." ⁸ Same applies to websites as well. Holzschlag’s assertion that we need to break out of grids is absolutely important, but it is also important not to shortchange the user when it comes to their expectations for conventions. Web design is getting rid of <table> in markup for layout, but its semantic replacements now serve a pragmatic purpose - in our example of news and information websites, some presentational conventions force a structured grid to form the backbone of the design.

The decision to use a grid-based layout should not be a design innovation for its own sake, but should be based as much on the pragmatic nature of its design as on the semantics of its code.

Appendix

Website list: