Article printed from SiteProNews: http://www.sitepronews.com
  HTML version available at: http://www.sitepronews.com/archives.html

The Best Page Layout and Design for Content Websites
By Miles Galliford (c) 2007

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 practices have emerged from years of trial and
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 (http://www.bbc.com)

- The Financial Times (http://www.ft.com)

- The Economist (http://www.economist.com)

- The Wall Street Journal (http://www.wsj.com)

You will quickly start to recognize 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 the imagery that supports the subject matter on
the website.

The 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.

The 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. Secondly, 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 site's 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!
================================================================
SubHub provides an all-in-one solution to enable you to rapidly
design, build and run your own content website. Publish for
profit on the web. Website: http://www.subhub.com
SubHub Articles Feed:
http://feeds.feedburner.com/SubhubStartASubscriptionOrMember
shipWebsite-OnlineMagazineOnlineJournalOnlineNewsletter?format=xml
================================================================

Copyright © 2007 Jayde Online, Inc.  All Rights Reserved.

SiteProNews is a registered service mark of Jayde Online, Inc.