Contact Us | Search This Site:

Template Conversion Process: Walkthrough

Starting at the Beginning

Since the very handy Access Valet service allows us to view our code line by line, we can easily traverse the changes that were made. The first big issue that needed to be overcome was in relation to the cascading menu system. This menu was driven by both external JS files as well as JavaScript within each page. The determination was made early on to simplify this menu, and doing so alleviated a large number of accessibility and usability related issues.

For example, the old menu system required use of the mouse to navigate the submenu items. This can be difficult for users with mobility issues. By moving to the Template System, and utilizing CSS, we can achieve a functional menu system while also retaining visual appeal.

Trimming Down the Body

Now that the menu has been redesigned, we can move on to BODY tag.

Access Valet uses a system of color coding, and when examining the report, you will note that the top and left margins, as well as the margin height and width are shown in red, signifying that the markup is bogus. This means what it sounds like: this is not proper HTML because it is interpreted differently by different browsers. The fix for this is in the style sheet, where we can specify elements related to the BODY of the page like so:

This simple code means that each that calls to the main style sheet will adopt these rules for the BODY element, allowing us to repair the body tag to the much simpler (and more accessible):

You will note that beyond the BODY tag, there is a bit more of the old JavaScript for the menu system which is now moot since it will be removed entirely for our new site.

Turning the Tables

Here is a classic example of how to misuse tables. This section will cover one of the most important aspects of fully utilizing a CSS driven design: layout and presentation. In the old version of the site, we are using tables to store various sections of each page, such as the header, menu and content areas. This is a problem because screen reader software (which is used for by a variety of people for various reasons) read a table in a linear fashion (top to bottom, left to right). And as we all know, not all web sites are designed in a linear way.

Another issue is that tables were developed to be used for tabular data, and as such, should be set up in a specific way to allow for maximum usability. Using tables for site layout does not fit with these methods. Tables should contain a header row (TH) for each column of table data cells (TD). These headers and data cells need to be tagged with ID and HEADERS tags (respectively) such that a concrete connection is formed (for more information, see 'Working with Content'). Our opening TABLE tag has a couple of issues:

(1) The first issue points out the exact problem described above: All table cells should be associated with headers. This is simply not possible (without some very sneaky coding) to do when using tables this way.

(2) Besides the fact that 'bgcolor' is deprecated markup, specifying color in the actual HTML is usually never a good idea. We can take care of these two issues, as well as all of the other elements in this tag, by using our faithful Style Sheet.

The first major thing to do is to start understanding how the DIV tag and CSS can make tables only seem necessary when we need to (gasp) display data in a table format. The first thing to know about a DIV tag is that it is a box. And those boxes can be displayed in a wide variety of patterns, colors and shapes. For the Template System, we will use DIV tags to emulate the layout and presentation of the in much the same way that we would have used tables in the past.

To replace the old nested table layouts, we only need to make a few entries in our Style Sheet and drop some DIVs onto the page. Here is a pared down example of this page that demonstrates the basic principals of using DIVs to position design elements on the page:

• View the Page in Action.
• Direct Link to the CSS.
• ZIP archive containing all required files. Note: Please be sure to unzip the archive to a folder on your computer in order to view or edit the page locally. All of the files need to be in the same directory.