| I was chatting to a veteran print publisher, who had | | | | navigation, which should remain constant across the |
| been producing magazines for over thirty years. | | | | whole website. It should list all the main categories of |
| He shook his head in despair, as he told me that every | | | | the website, so users can find their way around from |
| year he sees new magazines hit the newsstands with | | | | every page. |
| the publications' titles placed vertically on the magazine | | | | Right hand column on the homepage should provide |
| cover. | | | | navigation to individual pages in the site which you |
| "Whenever I see this," he said, "I know it has been | | | | want to highlight. Or it can be used for small |
| produced by a new publishing company that does not | | | | applications, such as email newsletter sign-up, scrolling |
| understand the industry. Anyone with any experience | | | | news headlines, links to the forum, etc. This column |
| of periodical publishing knows that publications with | | | | tends to disappear on the content pages to leave |
| vertical titles fail, or at least have to change quickly to | | | | more space for the article and images. |
| survive. The market has taught us this lesson | | | | Top menu bar - some sites have most of their |
| hundreds, if not thousands of times, but still people | | | | navigation in the top menu bar which goes across the |
| make the same mistake." | | | | page under the masthead (take a look at or as |
| This message is just as relevant to website layout as | | | | examples). I don't like this for two reasons. First it |
| it is to magazine design. The web has been around for | | | | restricts the number of menu links that you can have. |
| long enough that rules and best practise have | | | | Second it usually means that the site has flash based |
| emerged from years of trial error by thousands of | | | | drop down menus to enable them to accommodate |
| website owners. You can either go with the flow and | | | | more links. Flash menus are not user friendly. They |
| be grateful that you can learn from the experience of | | | | force your reader to search for links to the content |
| others, or you can swim against the tide and try to | | | | they are looking for. Don't make your user work for |
| convince the market that you are right and they are | | | | their answers. Also search engines find it harder to |
| wrong. | | | | index sites with flash menus |
| I would suggest that swimming downstream is far | | | | Bottom menu bar - This strip at the foot of every |
| easier and will give you a much greater chance of | | | | page tends to contain links to the sites terms and |
| success. | | | | conditions, privacy statement, sitemap, etc. |
| To understand which layouts work you only need to | | | | The central column contains the content. On the |
| look at the industry gorillas. These are the online | | | | homepage this can be a combination of an introduction |
| content publishers who have been around for years, | | | | to the website and teasers to articles. On the content |
| and who have tested just about every layout | | | | pages, the articles and images sit in the central column. |
| combination. Good examples are some of the most | | | | Search top right on every page - this is the search |
| read websites on the internet including: | | | | box used to search the content of the website. This is |
| - BBC ( | | | | a less rigid placement than it used to be, but you can't |
| - The Financial Times ( | | | | go wrong if you place it top right. |
| - The Economist ( | | | | Time and date - usually placed on the right hand side |
| - The Wall Street Journal ( | | | | under the masthead. This is optional, but does give |
| You will quickly start to recognise elements of the | | | | readers the impression that the site is up-to-date. |
| page layouts which are common across all these sites. | | | | Within this layout there is a great deal of flexibility to |
| Just as with print newspapers and magazines, these | | | | add your own personality and styles, particularly when |
| are the layouts that have proven to sit most | | | | you overlay your design on the basic page structure. |
| comfortably with the reader and with the way online | | | | However, at all times your number one goal should be |
| users want to consume content. | | | | constant; that is to make your website simple and |
| The key design and layout elements which should | | | | intuitive, for every reader that visits. To achieve this |
| remain constant are: Masthead across the top - the | | | | learn from those sites that have a lot of experience. |
| masthead is where the logo goes and usually imagery | | | | Don't be the person that puts a vertical title on the |
| that supports the subject matter on the website. | | | | front cover! |
| Left hand column should contain all the primary | | | | |