Rebuilding a Site With Standards

Eric A. Meyer

Netscape Communications

Lining Up For Takeoff

• We'll be talking about today and tomorrow, not yesterday
• Most of you know how to handle the old; let's look at the new
• Wish we had time to explore v4-era compromises, but...
• It is possible to balance new-browser styling and old-browser concessions
• Exercise based on Project 1 of Eric Meyer on CSS

Redesigning With Standards is...

• ...not as scary as it sounds at first
• ...a smoother path to the future of the Web
• ...not about dumping older browsers
• ...a way to reduce markup and page complexity
• ...not about throwing away tables!

A Typical Page

• The usual features: a masthead, three columns, a footer
• Actually we have fairly simple nested tables here
• font elements are used to set font family and text color
• Spacer GIFs hold open spaces between columns
• Page weight: 10.36KB (plus images), 16 spacer GIFs

Visualizing structure

• Use CSS to "sketch out" the structure of a page
• Good for diagnosing table-layout problems
• Great for knowing how elements are nested
• Borders are good, but can have layout implications
• Backgrounds avoid layout shifting, but can be jarring

/*  styles to visualize with borders  */
table {border: 1px solid red; margin: 2px;}
th {border: 1px dashed red; padding: 2px;}
td {border: 1px dashed purple; padding: 2px;}
div {border: 1px dashed #888; padding: 2px;}
div div {border: 1px dotted #888;}
div div div {border: 1px dashed #BBB;}
div div div div {border: 1px dotted #BBB;}
div div div div div {border: 1px dashed #DDD;}

/*  styles to visualize with backgrounds  */
table {background: red; margin: 2px;}
th {background: #FCC; padding: 2px;}
td {background: #FCF; padding: 2px;}
div {background: #CBC; padding: 2px;}
div div {background: #BAB;}
div div div {background: #A9A;}
div div div div {background: #989;}
div div div div div {background: #878;}
div div div div div div {border: 1px dotted black;}

Step One: Flush the fonts

• We're going to be setting our fonts (and their sizes) with CSS
• They're usually highly redundant anyway
• We'll get rid of the non-breaking spaces as well
• So let's check the end result of a major find-and-replace
• Page weight: 7.08KB

Step Two: Strip the Spacers

• Again, the space those images hold open will be handled with CSS
• Drawing all those images slows page rendering
• While we're at it, the elements containing the images will be purged
• Again, after some find/replace and manual stripping...
• Page weight: 5.79KB

Step Three: Further Simplification

• Rip out background and alignment attributes
• The page title and pullquote both can be made much simpler
• Navigation sidebar can be replaced with an unordered list
• On the left, we have a few lists separated by headings
• Page weight: 4.06KB

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="/antarctic/">Antarctica</a></td>
</tr>
<tr>
<td><a href="/asia/">Asia</a></td>
</tr>
<tr>
<td><a href="/austral/">Australia</a></td>
</tr>
<tr>
<td><a href="/europe/">Europe</a></td>
</tr>
<tr>
<td><a href="/india/">India</a></td>
</tr>
<tr>
<td><a href="/northam/">North America</a></td>
</tr>
<tr>
<td><a href="/southam/">South America</a></td>
</tr>
</table>

<ul>
<li><a href="/antarctic/">Antarctica</a></li>
<li><a href="/asia/">Asia</a></li>
<li><a href="/austral/">Australia</a></li>
<li><a href="/europe/">Europe</a></li>
<li><a href="/india/">India</a></li>
<li><a href="/northam/">North America</a></li>
<li><a href="/southam/">South America</a></li>
</ul>

Step Four: Add Class and ID

• Add classes to things that have common aspects—external links, asides, captioned pictures, etc.
• Classes are more commonly used because they were a little better supported in old browsers
• IDs are quite safe, and woefully underused
• Add IDs to unique elements—navigation sidebars, mastheads, footers, etc.
• Extensive use of IDs can give you the effect of writing "XML lite"

<table cellspacing="0" id="masthead">
<tr>
<td id="title">Travel Guide</td>
<td id="advert"><img src="ad.gif" height="60" width="234" alt="advertisement"></td>
</tr>
</table>

<td id="summary">

<h3>Ragged Point Inn & Restaurant</h3>
<h4>Ratings</h4>
<table cellspacing="0">
<tr class="odd">
<td>Amenities</td>
<td class="r3">***</td>
</tr>
<tr class="even">
<td>Location</td>
<td class="r5">*****</td>
</tr>
<tr class="odd">
<td>Dining</td>
<td class="r5">*****</td>
</tr>
<tr class="even">
<td>Service</td>
<td class="r5">*****</td>
</tr>
<tr class="odd">
<td>Overall</td>
<td class="r5">*****</td>
</tr>
</table>

<h4>Price</h4>
<ul>
<li>$180 - $250 / night<br>seasonal rates</li>
</ul>

<h4>Contact</h4>
<ul>
<li><a href="http://www.raggedpointinn.com/">www.raggedpointinn.com</a></li>
<li><a href="mailto:info@raggedpointinn.com">info@raggedpointinn.com</a></li>
<li>(805) 927-4502</li>
</ul>

<h3>Nearby Stops</h3>
<ul>
<li><a href="http://www.hearstcastle.com/">Hearst Castle</a></li>
<li>Cambria, CA</li>
<li>Los Padres National Forest</li>
</ul>

<div class="traveltip">
<b>Traveler's Tip</b><br>
Call to reserve a room at least six weeks in advance of your arrival,
double that in the summer.
</div>

</td>

Let the REstyling Begin!

• We'll basically be trying to recreate the effect of the original HTML-based presentation
• Straight copies of color values is easy enough
• For the spacer GIFs, we'll have to use pixel lengths and factor in the effects of cellpadding and cellspacing
• In real life, there's a lot more experiment-and-reload
• The first steps are pretty simple: recreate the body attributes and set some "global" styles

body {margin: 4px; color: black; background: white;}
a:link {color: #990000;}
a:visited {color: #990099;}
table {width: 100%; margin: 0;}
table td {padding: 0; border-width: 0; vertical-align: top;
  font-family: Verdana, Arial, Helvetica, sans-serif;}

The Top of the Page

• We need to nail down the width of the advertisement and let the title slide
• The title gets its background back via CSS
• Other font, color, and adjustment effects are dropped in as needed
• A rough equivalent to -1 is 85%

#title {vertical-align: bottom; color: #442200;
   background: transparent url(topbg.gif) top left;
   font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
#advert {width: 234px;}
#content-top td {vertical-align: middle; color: white;
  font-weight: bold; padding: 0.1em 0.2em 0;}
tr td#sidetop {background: #663300;
  font: bold 115% Arial, Helvetica, Verdana, sans-serif;
  padding: 0.25em 0 1px 0.33em;}
#crumbs {background: #997753; font-size: 85%;}
#crumbs a:link {color: white;}
#crumbs a:visited {color: gray;}

The Navbar

• Again, there was a defined width here, so we'll set it via CSS
• The list needs to lose its bullets and indentation
• The separators between links are created as borders on the list items
• A little extra padding on the items spaces them out subtly

#navbar {width: 120px; background: #EBDAC6;}
#navbar ul {list-style: none; margin: 3px 0; padding: 0;}
#navbar li {border-bottom: 1px solid #A98763;
  padding: 0.1em 0 0 0.33em;}

Recreating the Content

• We'll need to recreate the spacers with padding on the right and left of the table cell
• The page's title, now in an h1, is all we need to set up the original appearance
• Similarly, we can set up the pullquote to look like it did before
• The big advantage here is flexibility: changing the CSS is a lot easier than hacking nested tables

#content {padding: 0 42px;
  font-family: Arial, Verdana, Helvetica, sans-serif;}
#content h1 {font-weight: bold; font-size: 180%;
  color: #602020; border-bottom: 3px solid #804040;
  padding-bottom: 2px; margin-top: 17px;}
.pullquote {float: right; width: 140px; color: #A09080;
   border: solid #908070; border-width: 7px 0;
   font: bold 130% Arial, Helvetica, Verdana, sans-serif;
   padding: 3px 2px; margin: 1px 7px;}

Basic Styles for the Summary

• A reasonable approximation of -2 is 66%
• We reduce the width by a couple of pixels to simulate the effects of cellspacing
• We also want to recreate the cellpadding of the ratings table
• Now that we have simple heading elements, styling them is a snap

#summary {font-size: 66%; width: 148px;}
#summary table {font-size: 120%; margin: 0;}
#summary td {padding: 1px;}
#summary h3 {font-size: 125%; padding: 1px 2px; margin: 0;
  background: #774411; color: white; text-align: center;}
#summary h4 {background: #D6B58C; text-align: center;
  font-weight: bold; font-size: 100%; margin: 0; padding-bottom: 1px;}

More Summary Styles

• As before, we need to eliminate the bullets and indentation of the list
• The even-odd classes on the ratings table make alternate-row highlighting really simple
• We set the colors of the actual ratings via their classes as well
• The travel tip is (again) easy to style via its class

#summary ul {list-style: none; margin: 0; padding: 0;}
#summary li {margin: 0.25em 0;}
tr.even td {background: #F7F0E7; width: 50%;}
td.r3 {color: #666;}
td.r5 {color: #060;}
.traveltip {border: 3px solid #804040; background: #EBDAC6;
  text-align: center; margin-top: 1.5em; padding: 8px;}

Fixing the Footer

• First we need replacements for the alignment attributes
• Then the background color and the "separator" can be handled with background colors and some top borders
• The copyright gets some special styles of its own
• ...and we're done!

#footer td {vertical-align: middle; font-size: 66%;
  border-top: 3px solid #EFE1D1;}
#feedback {text-align: center; padding: 0.2em;
  background: #EFE1D1;}
#footer #tg {font-size: 85%; text-align: center;}
#copyright {text-align: right; font-style: italic; color: #999;}

Comparing the Two

• HTML: 58.5% reduction
• Markup: 36% reduction
• Image count: dropped from 17 to 1, plus one background

Taking Things Further

• Let's try reducing the table layout even further
• We're not going to kill off all the tables, mostly because we don't have time
• Let's convert the three column cells into divs (which requires adjusting the table open and close tags)

Positioning (And Not)

• We're going to position the navbar and summary columns, but not the main content
• Why? We need the main column to keep the footer at the bottom of the page
• We'll also need to clear space for the positioned columns
• By converting the columns to divs, we've "broken" the font sizing
• How do we make sure the side columns don't overlap the mathead, and what about the navbar's background?

#navbar {position: absolute; width: 120px; top: 0; left: 0;
  font-size: 85%;}
#content {margin: 0 148px 0 115px; font-size: 85%;}
#summary {position: absolute; top: 0; right: 0; margin: 0;}

Establishing a Container

• Absolutely positioned elements are placed with respect to their containing block
• If there isn't one, the root element acts as the containing block
• Any positioned element acts as a containing block for its descendants
• So we'll wrap the main content of the page in a div and position it

#main {position: relative;}

Filling Out the Navbar

• A positioned element is typically only as large as its content
• You can resize an element, but it's difficult to make it the same height as another element
• However, since positioned elements sit above non-positioned elements, we can cheat
• We'll set a 120-pixel-wide border on the main div and remove the margin

#content {margin: 0 148px 0 0; border-left: 120px solid #EBDAC6;
  font-size: 85%;}

Re-Adjusting the Footer

• Since we had to turn this into its own table, the connection to the column widths has been broken
• Fortunately, all we need to do is declare the same widths we're using for the columns

#feedback {width: 120px;}
#copyright {width: 148px;}

Some Caveats

• Browsers deal with padding on table cells differently
• In theory, padding should be added to width (as it is in regular block-level elements) but Explorer doesn't act that way
• Thus mixing positioned and table-bound layout elements can be a problem, at least if you're using padding
• You could set no padding on the cells and wrap the content in divs
• Better to avoid mixing: be consistent in how basic design elements are enforced

Wrapping It Up

• By stripping markup down to its basics, you can dramatically reduce the page weight
• The stylesheet adds a bit of weight back, but you can externalize it and then make the user download it only once
• Restyled lists can be used for a lot of purposes
• Positioning requires some extra work, but can be worth it
• Try not to mix tables and positioning for creating basic design elements