January 2003
May 2003
June 5, 2003
Frank Fujimoto
Computing & Communications
In the first half of 2003, the UW Home Page went from table-based layout (with some decorative CSS) to full XHTML/CSS. The UWIN page had even greater reliance on table-based layout, and it too was converted to XHTML/CSS.
This presentation covers the reasons and goals for the conversions, as well as the result. It is not a case study in how to convert pages to XHTML/CSS.
The primary goals of the conversion were:
Since this was a conversion, the XHTML/CSS version of the Home Page needed to look as close as possible to the old version.
January 2003
May 2003
Note there are subtle changes, since the designed was updated slightly during the conversion. For example, some links were changed and the three campuses were added to the UW Logo.
These graphs are representations of the structure of the HTML for the old and new Home Pages.
January 2003
May 2003
For these graphs, deeper nesting of tags makes the graph go further to the right, and the number of tags makes the graph taller.
At first glance, it would seem that the new Home Page is both more complex (deeper tag nesting) and larger (more tags, therefore a taller graph). However, the code segments represented by the red squares is the difference—the boxed code is what's necessary for the flyouts. The old Home Page used an external file and JavaScript to generate code for the flyouts, while the new Home Page has all of the flyout text actually in the HTML. If we include the generated flyout code with the old Home Page graph, the results are:
January 2003
May 2003
It is clear that the new Home Page is indeed much simpler and uses fewer tags than the old Home Page.
When looking at the graphs representing tags in the UWIN page, there is also a great difference in the complexity and number of tags.
January 2003
May 2003
The red box again represents the segment of the HTML describing the flyout menus, and the generated HTML has been incorporated into the old UWIN outline graph.
The UWIN page has many more flyouts than the Home Page, accounting for a large part of the extra complexity and tags. However, below the red boxes are the tags representing the center and right columns, as well as the footer of the UWIN page; the complexity was also greatly reduced there.
The HTML for the single header and link highlighted in this image demonstrates the great reduction in code complexity and size. Below is pseudo-code for these two lines of text; all the tags and attributes are shown, but the values are not (the first table had width="100%", but the pseudo-code below only shows width). For the old UWIN page:
<table width border cellspacing cellpadding bgcolor summary>
<tr>
<td class>
<span class>UW Procedures</span>
</td>
</tr>
<tr>
<td>
<table width border cellspacing cellpadding bgcolor summary>
<tr>
<td bgcolor>
<img src width height class alt />
</td>
</tr>
<tr>
<td>
<table width border cellspacing cellpadding summary>
<tr>
<td class>
<a href onmouseover onmouseout>Student Guide</a>
</td>
<td align>
<a href onmouseover onmouseout>
<img alt border name src width height />
</a>
</td>
</tr>
</table>
</td>
</tr>
Triple-nested tables are used in the HTML (which includes neither the table that formatted the page into three columns, nor the double-nested tables for the generated flyout content) and many attributes need to be used to make sure things look correct. The first image (not quite half way down) is a 1 pixel square image acting as a placeholder for the white line between UW Procedures and Student Guide, while the second image is for the arrow to the right of the link. Because the arrow and the actual link are in different table cells, two <a></a> pairs are necessary to keep the tags properly balanced.
The pseudo-code representing the same content in the new UWIN page:
<ul class>
<li>
<b>UW Procedures</b>
<ul>
<li>
<a id href onmouseover onmouseout>Student Guide</a>
</li>
As with the pseudo-code for the old UWIN page, the flyout code is not included. Since the column of links is structurally just a nested list, we represent the links that way. CSS is used to style the items as they appear in the image above. CSS is also used to hide the flyout lists.
Of interest is the fact that there are no images; it can be expected that the spacer image is gone, but the arrow image is also gone. The arrow actually appears via CSS, since it's part of the presentation rather than part of the document's structure.
The graph shows the relative number of tags appearing more than once or twice in the old UWIN page (on the left) and new (on the right).
A common perception is that converting to CSS presentation requires many <div> and <span> tags. In the case of UWIN, however, tags used for structure take the place of many of those objects. Also, the old UWIN page had several <span> tags to set fonts; many of these were removed.
Not surprisingly, the number of <ul> and <li> tags in the new page (182) is much smaller than the number of <table>, <tr>, and <td> tags in the old page (599). What is surprising at first glance is that the number of images went down from 42 to 12; this is because of the spacer images and the link arrows which are no longer in the new page.
The number of links went down since the old UWIN page had two <a> tags for every link, since the arrow was in a separate table cell, thus requiring its own <a> tag. However, the relative number of links didn't go down very much since the vast majority of the links were due to the flyout contents.
| Home Page | UWIN | |
| Old HTML | 13,399 | 23,484 |
| Old home.css | 3,724 | 3,724 |
| Old flyouts | 3,418 | 8,356 |
| Old Total | 20,541 | 35,564 |
| New HTML | 12,442 | 21,401 |
| New home.css | 6,789 | 6,789 |
| New local css | 4,177 | 3,016 |
| New Total | 23,408 | 31,206 |
Looking at the byte counts shows us whether we've achieved our goal of making the pages lighter weight.
For both the Home Page and UWIN, the size of the HTML is smaller, even taking into account that the old pages had no flyout content, but the new pages contain all of the flyout content. The home.css file is much larger than it used to be, but it is now carrying most of the weight for presentation, as well as defining some styles not directly used in the Home Page or UWIN.
Both pages also now have a page-specific CSS file, adding to the size of CSS needed for the pages. However, all the external CSS files can be cached by the browser, so after the first time a user visits the Home Page, they don't need to get home.css again, nor the local CSS file. When they then visit the UWIN page, they get that local CSS file the first time, but not on subsequent visits.
Because of the caching, the new Home Page ends up being easier on the server, even though the total byte count is higher.
For UWIN, there's even more of a gain for the server, even taking the complete byte count in effect. Also, since the old UWIN page had many spacer images not in the new page, the load on the server is even less.
It can be seen that the new Home Page and UWIN have much-simplified code, are more maintainable, and for the most part are lighter weight than the old pages. For accessibility, the pages do quite well when tested with various accessibility tools.
Another aspect of accessibility is whether the page can be viewed with a wide range of browsers. The pages look quite good with text browsers, which was expected since the HTML consists of structure and not presentation (such as spacer images and tables for formatting).
The major appearance concession was to not attempt to make the page appear well on browsers without CSS support:
UWIN with CSS
UWIN without CSS (first page)
The page does look quite different, but all of the content is available, including the flyouts. A note also appears on non-CSS browsers explaining why the page looks very plain, and that upgrading to a newer browser drastically changes the appearance.
Many hours were spent on converting the UW Home Page and UWIN from tables-based layout to XHTML and CSS. They are much simpler, easier to maintain, take more advantage of caching to reduce server load, and retain (and even improve on) accessibility over the old pages.
This page was completely designed using XHTML and CSS. The only <div> containers are used for the images displayed side-by-side (they give structure to the content, combining the description with its image, as well as making the images appear together) and one to contain the credits at the top of the page. A table was not used in either case since they are not tabular data; the images don't necessarily need to be next to each other, and the credits can be presented in many different ways.
A few <br/> elements were added after the side-by-side images to make sure that all floats were cleared. CSS3 allows you to specify that floats should be cleared after a particular element, which could be used in this case. The <h2> tags clear floats, so the examples on the right won't spill into the next section.
The byte count table is indeed coded in HTML as a table, since it is tabular data. All the decoartion and spacing was done with CSS.