Website Design Considerations
Page Layout
Deciding how the HTML code within your webpages will be structured is something else you will need to think about before you start coding, this will depend on how you want your webpage to be laid out.
This is another crucial aspect of the early design that needs to be right first time.
It is assumed that you will want all of the pages within the site to have the same general appearance, this requires using the same skeleton for each page.
There are many layout possibilities and almost as many ways of achieving each of these. Common elements of most webpages include;
- The page header often containing the site titles and logo or branding
- The navigation bar containing links to the main parts of the website, this is often below the header or down one side of the page and often remains static between all the pages in the website.
- Side-bars, these are distinct areas down the sides of the pages which can contain links, repeated content, secondary page content, static advertising, images anything really.
- The page footer, the bottom section of each page which usually contains credits and contact links
- The main page 'body' or core content.
- The background beyond the page boundary (in fact the true
<body>)
There are two principle methods to structure the page layout;
tables and divs.
Early HTML specifications intended tables purely as a structure to display data within a page however there was no reason why the entire page could not be presented as one huge table with the various page sections as cells within the table. This is a relatively straightforward way of doing things but it is pushing the table element well beyond its original design scope and for larger more complex pages the resulting HTML can be horrendously hard to follow.
Not only that but different browsers will render tables according to their own peculiarities, especially the relative widths and heights of the cells. Worse still, the basic structure is now hard-coded into the page, making a true separation of content from style impossible, and later changes may be quite complicated. Nowadays table based layout designs are considered old-fashioned, 'clunky' and best avoided.
The modern way to lay out pages is ultimately far simpler; each
section of the page is enclosed within the <div id="section_id"> element, its position is then defined using CSS to place it anywhere on the page that you require.
The resulting HTML is very clean with a minimum of layout tags.
Subsequent modifications to the site layout do not require changes to the individual HTML pages, just to the global site CSS. This is very much more efficient than a typical table based layout and makes the site a lot easier to maintain now and in the future.
Once a clear page layout template has been established the rest of the page markup should follow easily as it will entail the same parts of the content being placed into the same relative locations within the page skeleton.