This page provides some more detail of what we like to do for our clients when it comes to page layout. We try to take into consideration all of the comments and suggestions on our "Good and Bad" page. Of course, sometimes the client's needs dictate that we make some compromises to accomplish our goals.

How to Start

Before we do any HTML coding, we get together with the client to determine the various pages and navigation throughout the site. For each page we create a title and some basic information about the content (text, images, links, etc.). Then, we "connect up" the pages with each other to determine the navigation between them.

After those first few steps are done, we can break down the site into more detail. We can define the needed textual content. Images for thumbnails and larger pictures are identified. Menu bars and navigational buttons are specified, as well as a basic page layout and the dynamic functionality that will require scripts. We also discuss issues involved with making it easy for internet search engines to find and catalog the site.

Once these steps are finished, both we and the client will have a much better idea of the scope of the web site. The client knows the content they will need to supply to us. And, we can give an estimate of the time needed to create the pages and the costs involved.

Tables

Our preference would be to use CSS for all of our templates and page layouts. But, unfortunately the major browsers do not support enough of the current CSS specifications. So, the next best format is HTML tables. They provide a well-defined structure while still allowing for needed flexibility. The width of the cells and the table itself can be set with percentage values, allowing for a more balanced layout in browser windows of differing sizes. Many CSS attributes still work well with tables and table elements.

Page header

The typical web page displays a page title at the top and usually includes the site name, site owner's name, and/or the name of the major section of the site. Underneath the title are links to major portions of the site. This provides information to the visitor to remind them of where they are and how to get to other parts of the site quickly. Sometimes a subtitle is placed below these links.

Page footer

Most web pages have a footer section. It usually contains the copyright statement and links to basic information about the site and the site's owner. This includes links typically titled "About us", "Contact us", "Privacy policy", "Site map", and, "FAQ".

Links to sub pages

Navigation throughout the site can be provided in a number of ways. Links are usually provided in the page header and/or footer as mentioned above. Many web sites provide a vertical listing of buttons on the left side of the page. Typically these take the visitor to pages that provide more detail for the current page, or, to other pages at the same navigational level of the current page. These links can also be displayed on the right side of the page or throughout the body of the page. This is one area where the site owner can be creative, inject their own style and personality, and, set their site apart from others on the internet.

The visual cues associated with links should be consistent throughout a web site. This includes the images and colors used for buttons, backgrounds, and, text. And, a link should obviously "be" a link. It should be easy for the visitor to find the links they want to follow.

Images and other media

Images are a common way to provide unique content and how they are laid out on the pages can make or break a web site. They can be positioned such that other page elements flow around them, or, they can be set apart in their own browser window. Other media such as Flash objects, sounds, and, video should be delivered efficiently and effectively to the site visitor. This includes schemes to convey additional information such as tooltips, accessibility considerations, and, links to optional plug-ins.