Web Page Layout

Consider a handful of your favourite web sites and answer the following:

  1. What aspects of these page layouts or designs make these pages appealing?
  2. Is the message conveyed by the page immediately apparent? (The most important information should be immediately visible to the viewer).
  3. Is there a visual balance to the pager layout? (Relative location of elements; are prominent elements appropriately sized and located?)
  4. Are there appropriate amounts of empty space in relation to the content?
  5. Is there a visual consistency between the pages of the site (menu in the same location, colours consistent etc.)
  6. Colours: Are the selected colours effective and appropriate?
  7. Page size (pixels): Are all pages viewable from screens with various resolutions?
  8. Accessibility: Are all pages accessible to all potential visitors?

Proportions and Grid Systems

Grid systems are used for page layout in the magazine and newspapaer industries and graphics designers use them for all types of printed and on-screen presentations. A grid is simply an arrangement of horizontal and vertical lines that are used to guide the layout of page elements. There is a theory that an aesthetically pleasing layout makes an interface more usable. The proportions or ratios used in a grid system contribute to the visual appeal of a layout. The golden ratio (golden proportion, golden section, phi, divine proportion) is a ratio or relationship between distances often encountered in geometric objects and has been used in designing visually attractive artifacts since the the days of the pharoahs. It is defined as approximately 1.61804.

Common Web Page Layouts

Many web pages actually conform to one of only a handful of common layouts:

  1. Fluid or static (fluid will expand to fill the available viewport, static is fixed in size)
  2. One, two or three columns
  3. With or without headers and footers

For some time the only reliable mechanism for implementing layouts that would render acceptably across a variety of browsers has been to use the <table> element to define the effective grid within which page elements would be placed. Using tables in this way can lead to some accessibility issues and it is generally better practice to use standards compliant XHTML and CSS to layout our pages.

CSS Templates

There are numerous sources of tried and tested web page layouts freely available on the net. Using these can significantly aid productivity and can contribute to ones understanding of how web pages may be laid out using CSS positioning of elements.

Here is an example of a typical fixed-width, 2 column layout that I obtained from this excellent resource: 456BereaStreet.com

Template Analysis

Looking at the mark-up and CSS used in this template you will see:

  1. It uses the HTML 4 strict DTD
  2. <div> Elements are used to structurally divide up the page sections
  3. The content is wrapped in a <div> with the id="wrap". This is centered by setting the right and left margins to be 'auto': 
    #wrap {
    background:#99c;
    margin:0 auto;
    width:750px;
    }
  4. Different colours have been used for the div backgrounds so that they show up
  5. The sidebar and main content areas are positioned side by side by floating them to the left and right
  6. In order to get the footer to appear at the bottom (below the sidebar and main content) the clear property is used: 
    #footer {
    background:#cc9;
    clear:both;
    }
  7. In order to create the appearance that the sidebar column extends to the page bottom the sidebar colour matches that of the main #wrap element
  8. The horizontal navigation bar is implemented using an unordered list. The bullets are removed and the list elements made to layout horizontally using CSS: 
    #nav ul{
    margin:0;
    padding:0;
    list-style:none;
    }
#nav li{
    display:inline;
    margin:0;
    padding:0;
    }
  9. The various margins and padding settings are made to make things less cramped.
  10. Finally, bugs and limitations of various browsers (IE in particular) are addressed.

CSS Positioning

  1. An understanding of CSS positioning requires an understanding of the CSS box model;
  2. There are 2 basic types of boxes: block and inline;
  3. CSS provides 3 positioning schemes: normal, float and absolute;
  4. Normal Flow: Default positioning scheme wherein each block level element will flow vertically on a page;
  5. Relative Positioning: 
    position:relative;
    This will position the element as it would when following the normal flow of elements but offset by any values that may be set e.g.: 
    position:relative;
top: 10px;
left: 120px;
  6. Floating: This is achieved using the float property. Floating left or right will cause the element to be shifted as far left or right as possible within its containing block. Some special rules apply;
  7. Absolute Positioning: This removes the element from the normal flow and positions it according to defined coordinates in relation to its closest positioned ancestor; 
    position: absolute;
top: 10px;
left: 120px;
    Here is an example of box that should be center screen: Centerd Box
  8. Fixed Positioning: A fixed element does not move when the page is scrolled. Its position is always fixed relative to the viewport. Here is an example of a menu that has been fixed in position: Fixed Position Menu

Example Page Layouts

Here are a few CSS based page layouts that you may (or may not) find useful: