News Website Design Series – Part 1

News design image - website appearanceWith evolving standards and the constant introduction of new technologies, online news website design is a challenging task. Add to this the complication of porting an enormous amount of original content from existing sites and the project can quickly become overwhelming.

Regardless of the type of news a website intends to cover, however, there are some basic design principles to help overcome the challenges. These principles can be categorised into four key areas, viz.: appearance; content accessibility; monetization and useability.

The principles discussed in this article apply to both large scale corporate websites such as the BBC or CNN, and smaller scale blog-based news sites. In fact, these basic design principles may easily be applied to any content-rich website. This post will focus on the first of these design categories: News Website Appearance.


The general look and feel of a website is probably one of the most important factors in ensuring that visitors to a site will stay on for more than just a few seconds. The amount of time that a user spends on a page incidentally is called the bounce rate. News sites with gaudy themes, congested layouts and hard-to-read fonts tend to have very high bounce rates. In many cases this is regardless of the quality of the content. Users have a tremendous amount of choice for most queries and getting the appearance elements correct is the bare minimum cost of doing business (unless of course you have some unique content in a very uncompetitive niche!)

The three key components within this category to consider are: layout; device-specific design; and colour schemes.

In terms of colour schemes, most news websites choose to use relatively high contrast themes with dark text on a white background. This makes the text-based content on the site much more readable. To distinguish between navigation, advertisements and actual content, headers and sidebars often have darker coloured backgrounds. The principle here is to intuitively direct the reader to the most relevant area of the page.

News websites tend to steer clear of bright font colours like red for headline text. Dark blue and grey is generally preferred, possibly because it looks a lot more professional. As navigation is an important component of news sites, the colour scheme of these bars and menus usually stand out clearly on the page.

The biggest challenge in news website layout is undoubtedly the high volume of content that needs to be presented to the end user in a relatively small piece of screen real estate. This challenge can be managed by ensuring that site categories and sub-categories are well defined and intuitive for the reader. The basic layouts to deliver these categories usually involve some combination of grid-based schemes, tabbed content areas, galleries and flash-based applications. Of these, grid-based layouts are by far the most common as they lend themselves well to organise content into an intuitive structure.

Typically flash-based applications make very effective use of space although tend to be much heavier in terms of download times. The also allow the presentation to be much more slick and interactive. Customer inconvenience, however, can sometimes be an issue since not all devices are able to present flash-based content. Further, there are also disadvantages to using flash when it come to search engine optimisation (SEO) as search engine crawlers are unable to index the content presented within the application.

Consequently, the grid based layouts and tabbed content areas tend to be preferred by news websites. Image-based content sites often elect to use galleries to display their content (if not a flash-based application) – again, this depends largely what the content provider intends to showcase. What appears to be happening increasingly is a combination of an image gallery and a grid based layout. One of the primary reasons for this is that the rotating images in the gallery seem to increase the site stickiness substantially.

Tabbed content areas are often used within sub-category pages on news sites. Each tab would distinguish between particular aspects of a topic (e.g. sections the article itself, related links and comments). This style reduces the clutter and empowers the reader to select what’s most relevant for them about the page content in question. Tabbed areas are also often used (e.g. by the BBC) to differentiate comments based on user ratings and editor recommendations.

The layout component of news website design has grown significantly in complexity over recent years. This is largely because of the proliferation of different sized devices used to access news content. To this end, news companies are focusing their development on what has been called responsive design. Basically, this means that there is a separation of content and presentation in terms of design. Since screen sizes, for example, vary by device (e.g. whether you’re using a PC, iPad or smartphone to access the content), news websites need to cater for a variety of optimal presentations of the same content. Responsive design thus focuses the complexity of design almost exclusively on the design layer and leaves the content to conform to an independent set of standards.

Later this month, Newsgame will be continuing this series on news website design when we look at content accessibility.

Speak Your Mind