Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Incredible Shrinking Mark Up

Last updated Oct 17, 2003.

Designing pages with XHTML and CSS separates structure from presentation making it easier to maintain and update Web sites. Let's use the following nursery rhyme as an example:

Jack and Jill went up the hill,
To fetch a pail of water;
Jack fell down
And broke his crown,
And Jill came tumbling after.

This is how it's originally formatted (minus tables):

<DIV align=left>
<B><FONT COLOR=#006633><FONT class="Helvetica12" FACE="Arial, Helvetica, adobe-helvetica, Arial Narrow" SIZE="3">Jack and Jill went up the hill,</FONT></FONT></B>
</DIV>
<DIV align=left>
<B><FONT COLOR=#006633><FONT class="Helvetica12" FACE="Arial, Helvetica, adobe-helvetica, Arial Narrow" SIZE="3">To fetch a pail of water;</FONT></FONT></B>
</DIV>
<DIV align=left>
<B><FONT COLOR=#006633><FONT class="Helvetica12" FACE="Arial, Helvetica, adobe-helvetica, Arial Narrow" SIZE="3">Jack fell down </FONT></FONT></B></DIV>
<DIV align=left>
<B><FONT COLOR=#006633><FONT class="Helvetica12" FACE="Arial, Helvetica, adobe-helvetica, Arial Narrow" SIZE="3">And broke his crown,</FONT></FONT></B></DIV>
<DIV align=left>
<B><FONT COLOR=#006633><FONT class="Helvetica12" FACE="Arial, Helvetica, adobe-helvetica, Arial Narrow" SIZE="3">And Jill came tumbling after.</FONT></FONT></B>
</DIV>

This file weighs 911 kb. Combine the <font> tags into one: <FONT COLOR=#330099 FACE="Arial, Helvetica, adobe-helvetica, Arial Narrow" SIZE="3">

The file shrinks to 746 kb.

Now, let's put the code to test in CSS:

<style>
div.rhyme {
font-size: 16px;
line-height: 18px;
font-family: Arial, Helvetica, adobe-helvetica, Arial Narrow;
font-weight: bold;
color: #309;
}
</style>
<DIV class="rhyme">
Jack and Jill went up the hill,
</DIV>
<DIV class="rhyme">
To fetch a pail of water;
</DIV>
<DIV class="rhyme">
Jack fell down</DIV>
<DIV class="rhyme">
And broke his crown,</DIV>
<DIV class="rhyme">
And Jill came tumbling after.
</DIV>

The size? 457 kb. Imagine applying the same concept to a longer and more complex document. What if the color needs changing? In the first example, it requires searching every <FONT COLOR=#006633> and replacing it with the new color. This doesn't seem so bad with a FIND and REPLACE. Yes, you hear a "but" coming. What if more than one color needs changing? What if there were hundreds of pages? What if the font shouldn't be bolded? Not only do you have to change the color, but also remove all the <b> and </b> references. To change the color in CSS, replace the "#309" in "color: #309;" and it instantly changes all the documents that refer to this style sheet.

That's not all Web standards can do. Complying with Web standards provides the Web site with:

  • improved search engine indexing
  • the ability to convert to other formats such as PDAs, TVs, and older Web and text browsers
  • identifying markup errors with validators
  • screen reader and other uncommon media compatibility
  • ensured forward compatibility as new technologies and browsers are released