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.

Google and SEO

Over the last year I worked on a case study on SEO and how it works with Wonkie cartoons - I am currently writing a short White paper that I'll publish online and also be teaching as part of an information systems course later this year.

It is somewhat unfortunate in some ways that Google is so protective over their search ranking algorithms. Many SEO companies are finding it hard to predict their own rankings despite having years of experience in the field. With the introduction of the latest Google algorithm, results have become even more unpredictable than before. Basically Google is incorporating all sorts of funny stuff and changed, quite fundamentally the structure of how it evaluates potential search results with the latest release.

As a result it seems many affiliate programme owners are finding their websites either blacklisted or penalised severely and suddenly in terms of the new ranking. There will no doubt be a backlash against Google as the dominant market player imposing unilateral rules and apparently subject to no criticism. If webmasters choose to complain, they do so at their own peril - if they get banned for whatever reason (and I mean whatever reason!), getting any sort of justification from Google is futile.

In any case, all the best for the New Year and I hope things go splendidly for you in 2010! More on SEO coming soon - as soon as we figure out how best to work within the rules of the new Google game.

2009 - a rocky year for SEO

With so many changes being made by Google, it's hard for SEO professionals to actually keep track about what works and what doesn't. Even if you're not trying to unfairly game the system, you still need to understand how it works in order to maximise the impact of search engine results from your potential customers.

I look forward to exploring the new algorithm - hopefully it's practical and easy to understand!

SEO Case Study

I've just spoken to Pratish and the guys at Wonkie cartoons to confirm next steps and they've agreed for me to use them as a case study. I'm drafting a typical set of questions an SEO consultant type would ask and see how well they fare on the basics.

The questions will include:
1. What SEO related activities are you currently engaged in to promote your blog?
2. Is SEO a priority for you? What percentage of your traffic currently comes from search engines vs CPC marketing?
3. Do you use tools such as Google Webmaster and Google Analytics?
4. Do you understand what the various terms in Google Analytics mean and how to interpret them? E.g. What is the bounce rate and what kind of figure should one be targeting for that metric?
5. How do you market your blog?
6. Have you bought links in order to improve SEO? If so, have you tracked how effective your purchased were?
7. When you make posts on other blogs etc, how do you link your site to your comment?
8. What keywords do you use? What keywords do you want to be ranked for?

The step after that will be to examine their site more closely and try to determine exactly what the optimisation gaps are and what kind of benefits closing those gaps will yield. Finally, we'll make some recommendations with reasons for the suggestions to ensure that this exercise is valuable for readers of this blog.

Until next time!

New Year - New Beginnings

Hope you're all having a good start to the New Year.. mine was awesome! Diving in Mozambique and spending the Christmas on the beach... could not ask for a better start to the year!

This is really just a quick catch up blog post to wish you all well.. will write more once things settle down post the holiday season :)

Last of the SEO glossary

So this is the last of the SEO term glossary we're going to cover before we're going to look at an SEO case study and work through an example step by step. More details of this below after today's final set of terms:

text links - These are plain HTML links that do not involve images, flash, or javascript

time on page - Exactly what it says.. the amount of time someone spends on one page before clicking an outbound link or entering a new address in the address bar. Longer is better, obviously.

toolbar pagerank (PR) This is a value between 0 and ten giving an indication of relative page importance - it is not the same as pagerank. This is not updated frequently by google and is so not a reliable indicator of current status.

trust rank - This is a method of differentiating between valuable pages and spam by quantifying link relationships from trusted human evaluated seed pages. Manual is given more weight than automated links.. debatable how accurate the SEO algorithms for determining this are.

URL - Uniform Resource Locator - This is the http:// .. web address you type in your address bar

user generated content (also known as UGC) This includes media like Social bookmarking networks, wikis, and some blogs that rely heavily on UGC. The content that users create drive the site and the business model.

walled garden a group of pages which link to each other, but are not linked to by any external pages. A walled garden may still be indexed if it is included in a sitemap, but it is unlikely to have high pagerank

web 2.0 Much hyped-about technology characterised by websites which are designed to encourage user interaction.

white hat SEO - SEO techniques that conform to best practice guidelines (viz. Google's guidelines). This is what you want to use.

widget - this is a small application on blogs, web pages etc that provide specific functions such as a displaying number of subscribers, hits, time and date etc.

So from the next few posts, we're going to be looking at a case study. I've exchanged a couple of emails to the cartoonists at Wonkie cartoon blog and they're keen to get input from an SEO point of view on their site.

SEO glossary - Terms S

Today we're covering the letter S.. I'm also working on getting a potential case study to walk you through a full SEO implementation. If you have any suggestions then drop me a line and you could get a freebie!

sandbox There is a rumour (and there are plenty about Google!) that Google puts new sites into a “sandbox.” Think of this as a trial period for the site in which it will not rank well. THe idea behind this is that a site should be around for a certain period of time to be relevant. Short term sites are unlikely to have anything of value for the end user. Again, debatable but you need to know the term.

scrape This is the process of copying content from a site, often through the use of bots. If you have half decent content with some keywords, it's likely your content WILL get scraped at some point or the other .. be prepared!

search engine (or SE) is an application that searches 1 or more documents for relevant matches of a user's keyword phrase and returns a list of the most relevant matches. The big three Internet search engines are Google, Yahoo and MSN

search engine spam These are webpages that are specifically created to cause search engines to produce inappropriate or less relevant results. Many people claiming to do SEO are actually spammers.

Search Engine Marketing (SEM) - SEM is used to describe the process associated with researching, submitting and positioning a Web site within search engines to achieve maximum exposure on certain keyword searches.

Search engine optimisation (SEO) This is the process of increasing the number of visitors to a Web site through achieving high rankings in the search engine results pages (see SERP below). Obviously the higher the rank the better as there is a greater chance the searcher will click through to your webpage.

Search Engine Results Page (SERP) - the results page that comes up after a user does a search based on keywords

site map - This is a single page or group of pages which link to every user accessible page on a website - exactly what it sounds like - a map of the entire website. An XML sitemap, often kept in the root directory of a website, usually has the specific purpose to help search engine crawlers ensure they index all website pages.

sock puppet - act of establishing multiple user profiles or hiding your real identity when posting comments, etc.

social bookmark This is very important - it's a form of Social Media where user's bookmarks are aggregated for public access. Common sites for this are Digg, StumbleUpon, Mixx, Newsvine and many others. There are a number of products such as AddThis that allow a user to easily bookmark a page and share it with their friends.

social media - Web-based technologies used by people to share information and views. Blogs, wikis, forums, social bookmarking, user reviews and rating sites (digg, reddit) are all examples of Social Media. As are sites such as Facebook.

social media marketing (SMM) Website/ brand promotion through social media

spam ad page These are Made For Advertisement pages which usually use scraped or machine generated text for content. These pages have no real value to users. Spammers often create sites with hundreds of these pages (they get revenue based on the ad-clicks)

spam-dexing Also known as search engine spamming, this is the practice of deceptively modifying web pages to increase the chance of them being placed close to the beginning of search engine results, or to influence the category to which the page is assigned in a dishonest manner. - definition taken from Wikipedia

spammer A person who sends/ posts something unsolicited and commercial

spider A bot or crawler used by search engines to find and add webpages to its index.

spider trap - this is an endless loop of automatically generated links which can “confuse” a spider program. These are often intentionally used to prevent automated scraping or e-mail address harvesting by bots.

splash page Often animated, graphics pages without significant textual content. These are usually great for human users but can be very bad for SE spiders which usually only navigate through text links. Beware how you use these. The same argument applies to flash-based websites.

Splog - Spam Blog or Splog is a blog which usually contains little if any value to humans, and is often machine generated or made up of scraped content. It's not as irritating for end users as it is for the original copyright owners. Sadly there is little to do to stop them. Report them as contravening the DCMA to Google .. it's a process but probably worth the effort to protect your content and ranking.

static page A webpage without dynamic content or session-id variables in the URL. Static pages are good for SEO in that they are friendly for search engine bots.

stickiness Opposite of bounce. Website should entice users to stay on the site longer, and view more pages - this is called improving “stickiness”. An internally well-linked site is important for stickiness

submission (to search engine) - submitting your URL to a search engine to crawl and index

supplemental index These are pages with usually very low or non-existent pagerank. They may be still relevant to a search query and can often appear in the SERPs (labelled as a supplemental result). This does not necessarily indicate a Google penalty.

That's S done for today! As I was typing this out I thought it may be useful to have a site that has a combination of images/ photos and text to optimise. The cartoon blog I mentioned in my previous post, Wonkie, is probably a good one for this.