How to build an effective author website
Website design, layout and branding: Laying out your website template
On this page:There are two basic website layouts - horizontal navigation and vertical navigation. Each have advantages and disadvantages that should be considered.
Horizontal navigation runs across the screen and therefore is dependent on the amount of horizontal screen real estate available. As of June 2006, approximately 75% of website users are running a horizontal screen resolution of 1024 pixels or higher.
To design a site that is 1024 pixels wide, 25% of the internet population would be forced to scroll horizontally to view all of the options.
Horizontal websites make good use of the screen real estate available and are generally considered to be sleeker and more modern in feel; however ensure you allow enough space to add additional navigation items if the need arises.
www.RussellKirkpatrick.com is an example of horizontal navigation.
Navigation items simply run down the page. This is a less efficient use of space, however is more flexible as more can be added as required.
www.TrudiCanavan.com is an example of a vertical navigation.
Another key decision is whether to make your website design expandable (or fluid) that is to say it expands to fill the screen - or fixed width.
In a fixed width template the layout is clearly defined to look the same on all browsers, regardless of the screen resolution. The disadvantage is that on high resolution or widescreen monitors there is a lot of empty black screen around the website itself.
www.JenniferFallon.com is an example of a fixed width template.
In an expandable (or fluid) template, the website expands to fill the available screen size, however text isn't always easy to read as wide columns are difficult to scan.
www.Amedee.ws is an example of an expandable template.