Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 2 - Identifying key areas

The layout presents three key areas. The Header image (in green) the Navigation on the top left (in blue) and the Content (in red). We will create a div box for each of these areas.

Variations

Your website could have a different layout but you should still be able to identify at least 3 key areas (although not limited to this number). Write down information related to each of these areas such as:

Position within the page (margins to the edges of the page)
Size (width and height)
Position relative to other elements (for example where the header is in relation to the menu. This will help you recreate the layout and keep its original look and feel.
Importance (this will help you decide the order of appearance in the source code)

Remember to keep the original page at hand for reference

Liquid CSS layouts tutorial structure

Back to Website Builder Tips: Making A Web Site Accessible

Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 2 - Identifying key areas

Variations

Liquid CSS layouts tutorial structure

Other Accessible Web Design articles