News Website Design Basics

Newspaper and other content rich media sites can be quite challenging to create from a design perspective. Regardless of the exact type of content, one thing is for certain for sites like the BBC - there is a load of it to present to readers. This, as one can expect, creates many challenges in terms of usability, accessibility, layout and navigation for news site designers.

To add to the complication, monetizing news sites is often an additional overlay on design requirements - so how adverts are integrated matters significantly on the sustainability of the site itself. One does not want to make the ads excessive or too intrusive, but they still need sufficient visibility for adequate clickthroughs for revenue purposes.

The general design principles discussed in this article covers online periodicals - any online newspaper or media front end, magazine style sites and content-rich blog based sites like the Huffington Post in the US or Newstime in South Africa.

1. Navigation

Given the volume of content to present, it stands to reason that navigation is one of the most critical elements to get right in new website design.

Bar a few exceptions, most news sites place their primary navigation menu directly below the header and above the content. Two exceptions to this rule are MSNBC and the NY Times which both use a sidebar for the main navigation tool.


There is no substitute for having a content-rich landing page with the absolute essentials users would like to see. An excellent example of this can be seen with the recent redesign of the BBC weather pages online. It's definitely an area I believe the BBC has got right - it is a pity though, that many of their learnings does not seem to have been transported to their main news pages!

2. Colour Scheme

For optimal readability, most popular content-rich news sites employ dark text on a light or white background.  Occasionally, darker colours are used for headers or for the main body of the page outside the content.

For links and highlighting, many news websites utilise blue and red in addition to black or dark gray for text. Blue is often used for headlines, titles and unclicked links with mauve as an indicator for clicked links. Red or other bright colours are typically used infrequently for highlighting specific sections of text.

To distinguish navigation from the rest of the page, higher contrast colour options are often used.

3. Typical content layouts

Grid-based layouts and using tabbed designs are among the most common and effective data presentation mechanisms on news sites.

Tabbed content areas allow readers to view popular articles, recent news posts, most commented articles, etc. This is often employed in the sidebar, and occasionally in the main area (e.g. in Wired online magazine). The tabbing allows for greater control by users over what content and links they see. More often than not though, the tabbing is a significant space saver for limited screen real-estate.

Grid-based designs, on the other hand, are popular because it creates a cleaner look and provides a more effective means to manage and organise large volumes of distinctly categorised content. Again, the NY Times website is a prime example of effective use of this technique. Other popular directory pages on news sites like those for online casinos and other niche content pages also frequently use this style of grid-based design.

4. Integrating Social Media

Without doubt, the greatest tech impact on the news room has been the introduction of social media as part of the overall news offering. With the likes of the Arabian Spring which was largely facilitated by new media elements like facebook and twitter, it is hard for newsrooms to ignore this new form of citizen journalism, if one can call it that.

Widgets, plus one voting buttons and social network sharing toolbars are ubiquitous in the news web world and are as common now as on blogs. News websites tend to use them a lot more subtly than blogs though and these buttons are usually encapsulated in a specific "Share this" section on news posts.Digg'ing etc are important elements to include on the page design to ensure the news story gets as much social coverage and SEO boost as is possible.

To read more check out this interesting social media in newsrooms article.

5. RSS Feeds

Making sites sticky and getting content easily to regular readers is critical. While not as common in countries where the internet penetration is not too high, RSS and subscription feeds are commonplace in the USA, UK, Canada etc. Blogs often employ technology such as Google's Feedburner to track and manage their email feed lists and it is somewhat disappointing that popular news sites like the BBC don't actually offer this as standard for their readers.

This is likely the biggest area of improvement for news sites in my opinion. the argument for not being able to incorporate paid advertising in feeds no longer holds - this is quite easy to do now and there is no real reason why readers have to physically visit the site in order to appreciate the content (and generate revenue for the news provider!).

The only exception to this point is of course commentary - there is yet a technology to be developed that allows readers and subscribers to comment on news posts and articles directly via a feed. For this, readers necessarily have to visit the page in question first.



* * *

A colleague recently requested I do a series on content review blogs outlining some SE optimisation principles for blog sites that are specifically designed to market reviews and product documentation for readers. In light of this one of the better designed sites I will be using as a case study is online casinos in India. In terms of individual blog page layout, we can look at Silver Sands casino, and one that is much poorer in design that I've seen is buy lottery tickets online. A detailed analysis will provide many lessons learnt for readers to incorporate into their own sites. Both these sites are based on the Wordpress platform and the actual colour and layout of the site makes a huge difference in the effectiveness for marketing. Stay tuned for more soon.

I will also be writing an article shortly on engaging more with users on news sites and what sites like the BBC can do to make interactivity with readers more effective.