Join Over 7,000 Newsletter Subscribers Today!

Sign up to receive our free SubHub Insider newsletter, packed full of exclusive articles to help you create, market & monetize your website or blog content.

Subscribers get our FREE eBook! - "The Membership Website Jumpstart Guide"

The Best Page Layout and Design for Content Websites

I was chatting to a veteran print publisher, who had been producing magazines for over thirty years.

He shook his head in despair as he told me that every year he sees new magazines hit the newsstands with the publications' titles placed vertically on the magazine cover.

“Whenever I see this,” he said, “I know it has been produced by a new publishing company that does not understand the industry. Anyone with any experience of periodical publishing knows that publications with vertical titles fail, or at least have to change quickly to survive. The market has taught us this lesson hundreds, if not thousands of times, but still people make the same mistake.”

This message is just as relevant to website layout as it is to magazine design. The web has been around for long enough that rules and best practise have emerged from years of trial error by thousands of website owners.

You can either go with the flow and be grateful that you can learn from the experience of others, or you can swim against the tide and try to convince the market that you are right and they are wrong.

I would suggest that swimming downstream is far easier and will give you a much greater chance of success.

To understand which layouts work you only need to look at the industry gorillas. These are the online content publishers who have been around for years, and who have tested just about every layout combination. Good examples are some of the most read websites on the internet including:

BBC (www.bbc.com)
The Financial Times (www.ft.com)
The Economist (www.economist.com)
The Wall Street Journal (www.wsj.com)

You will quickly start to recognise elements of the page layouts which are common across all these sites. Just as with print newspapers and magazines, these are the layouts that have proven to sit most comfortably with the reader and with the way online users want to consume content.

The key design and layout elements which should remain constant are:

Masthead across the top – the masthead is where the logo goes and usually imagery that supports the subject matter on the website
Left hand column should contain all the primary navigation, which should remain constant across the whole website. It should list all the main categories of the website, so users can find their way around from every page
Right hand column on the homepage should provide navigation to individual pages in the site which you want to highlight. Or it can be used for small applications, such as email newsletter sign-up, scrolling news headlines, links to the forum, etc. This column tends to disappear on the content pages to leave more space for the article and images
Top menu bar – some sites have most of their navigation in the top menu bar which goes across the page under the masthead (take a look at www.guardian.co.uk or www.forbes.com as examples). I don’t like this for two reasons. First it restricts the number of menu links that you can have. Second it usually means that the site has flash based drop down menus to enable them to accommodate more links. Flash menus are not user friendly. They force your reader to search for links to the content they are looking for. Don’t make your user work for their answers. Also search engines find it harder to index sites with flash menus
Bottom menu bar – This strip at the foot of every page tends to contain links to the sites terms and conditions, privacy statement, sitemap, etc.
The central column contains the content. On the homepage this can be a combination of an introduction to the website and teasers to articles. On the content pages, the articles and images sit in the central column
Search top right on every page – this is the search box used to search the content of the website. This is a less rigid placement than it used to be, but you can't go wrong if you place it top right
Time and date – usually placed on the right hand side under the masthead. This is optional, but does give readers the impression that the site is up-to-date

Within this layout there is a great deal of flexibility to add your own personality and styles, particularly when you overlay your design on the basic page structure. However, at all times your number one goal should be constant; that is to make your website simple and intuitive, for every reader that visits. To achieve this learn from those sites that have a lot of experience.

Don’t be the person that puts a vertical title on the front cover!