This image was created by colouring then overlaying the content areas from article pages from the UK’s biggest news websites. (It’s quite tall, so please do scroll past it to where I’m actually saying something).
Key:
- Grey = Global navigation/branding
- Blue = Article content
- Green = Links to related content
- Turquoise = Share content functionality
- Dark Green = Links to content
- Red = Adverts
- Orange = Internal Marketing/Links to advertorials
The sites I looked at are:
These are the top few news sites in the UK listed on alexa.com and producing their own content. I excluded bbc.co.uk and thesun.co.uk. The Sun because it’s just so ugly that I don’t trust it’s design, and the BBC site because it’s not a commercial news site and I think it’s design reflects this.
These overlaid content areas helped me to see the similarities among the page designs. Hopefully giving me a good start for the design of a content publishing website I’m currently designing. Here are some observations:
Navigation: These sites don’t use left hand side vertical navigation, for many sites. All the navigation is at the top of the page with a sections, sub-sections and breadcrumbs.
Layout: Mostly these sites use a ‘two and a half’ column design. The main content is in the left column with related content in a narrow ‘half’ column and unrelated content and marketing content in the right hand column. (Here is some more insight into the Guardian and Telegraph’s grid system from the horse’s mouth.)
Sharing: Sharing functionality – “Digg this”, “Post to Facebook”, “Tweet this”, “Send to a friend” etc. – has the prime real estate at the top left corner of the article and immediately after the content. These are clearly the most valued interaction a user can have with an article bringing both SEO benefits and introducing the site to new audiences.
The end of the article: When someone has finished reading the article they are looking around for something to do and so the area below the article becomes very important. There seems to be a pattern here of just giving the user all the options (but, interestingly, the order they come in is consistent):
- First there are more sharing actions,
- Next, if they are enabled, are user comments,
- Then adverts (seems to be mostly text ads),
- Last, just before the page footer is related content links.
Advertising: A banner ad across the top of the page is standard (I think this is unfortunate as it’s very limiting in terms of design, but presumably it’s pulls in the clicks). High up in right hand side column is an MPU ad and at the end of that column a skyscraper. I’d guess that the MPU converts well and the skyscraper is put there because that space would otherwise be empty. Then as already mentioned, underneath the article there are text based adverts.
Related content: The quality of related content varied from site to site, but the ideas were very similar. Content closely related to the article is linked to from just bellow the sharing action in the half-width column or in a small pod inset in to the text a few paragraphs down. Less closely related content is link to from lower down the half column, underneath the article or to some extent in the right hand column.
Something of a pattern:
There are enough common elements here to create something of a pattern that’s at least a decent start for laying out article pages.
That has ended up a bit more complicated than I was hoping, but there’s no reason that with sympathetic design the page shouldn’t be calm and easy to read.
Perhaps a different, more basic, way of looking at it would be to look at which areas are important. Obviously the actual text of the article is important, but for the design of the page it’s the elements around the article that are interesting. What will the reader do when they stop reading?:
This is simple enough to be more to my liking. The pattern has become: don’t use left hand side vertical navigation and put the most important things that you want the use to do next at the top right relative to the main content and repeat at the bottom. Now it’s up to you decide what’s important for your site but, given the similarities between the major newspaper sites, their layouts are probably a good place to start.