Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 3 - Analysing the source code of the original and final layout

Original layout structure

What we want is to use CSS to position the 3 areas in the picture above. Currently the original source code appears as follows (simplified)

<table>
<tr>
<td>Navigation on the top left</td>
<td>Header Image</td>
</tr>
</table>
<table>
<tr>
<td>Content</td>
</tr>
</table>

We have a case of 'what you see is what you get'. Visually the header and navigation are at the very top while the content is actually below them. This order is also maintained in the actual source code of the page.

Effects of the content area being placed at the very end of the source code.

For screen reader and other alternate browsers, users on every page they will 'hear' the header image and navigation being read out before accessing the actual content. That constitutes a delay in accessing information.
All users will have to wait before the header image, navigation and all other HTML tags (such as tables) load before reading the content. Studies over the past years show that if users are not presented with content within the first seconds of the loading of the page, they are inclined to end their visit prematurely. As a consequence it's important to eliminate any sort of delay that slows down the process presenting the page.

Final layout structure

The advantage of a CSS layout is that while visually, there will be no change in the positioning of the three areas (e.g we will still see the navigation and header being placed at the top and the content below them), the source code will in fact display as follows (simplified)

<div>
Content
</div>
<div>
Navigation
</div>
<div>
Header image
</div>

Advantages of positioning with CSS

It allows disabled users to hear the content being read out first by their speech-based browser.
For all users the content will be the very first thing that loads (the loading time will be virtually instant) leaving the graphics and other bandwidth consuming elements to load in the background while the user is accessing the information. While this is a huge advantage for sites that use many graphics, it is not limited to them. Any site can reduce load time to a minimum by making use of CSS positioning.

Variations

The order of div boxes I suggested above is not standard nor should it be followed to the letter. You can decide which of the key areas is of the greatest importance for your users and establish the order accordingly.

Liquid CSS layouts tutorial structure

Back to Website Builder Tips: Making A Web Site Accessible