Debates around the use of W3C Web standards by developer's/designers often focus around
the pros and cons of using standards on Web pages. Typically, this debate is performed at an
intellectual level, rather than providing a clear and concise method that consistently
demonstrates the benefits of using W3C standards. It is one thing to argue the benefits
of Web standards, quite another to clearly demonstrate why Web standards can benefit us
all.
From my limited perspective, we are on the brink of new era in the development and design
of Web pages, simply because the landscape we typically cater to has changed considerably in
the past year. For one thing we see that Netscape 4's market share has dropped considerably
down to around the 2% mark. Internet Explorer 4 also suffers a similar fate
(http://www.thecounter.com/stats/2002/November/browser.php).
Combine this decline with the advent of the newer generation browsers such as Internet
Explorer 6, Netscape 7 and Opera 7 and it is not difficult to see that the Web world is primed
to take advantage of standards based approaches to building Web pages. All that remains to
do is provide some clear practical educational material to make the process of conversion to
standards a little less painless.
In this article, I am going to explore the concept of applying multiple class names on
elements and demonstrate how utilizing that technique can bring about significant reductions
in the number of bytes a Web page utilizes. We are going to begin by taking a trip down
memory lane (at least for me) and look at a simple Web document that uses tables for layouts
and font tags for presentational markup.
The Old Way
In the not so distant past, the majority of developers and designers used a tables-based
approach for layout and font tags for presentational markup. More often than not, this
approach produced code that was barely readable and consequently difficult to understand.
Nonetheless, it was and some would argue still the predominate method of providing layout
and presentational aspects to Web documents and by and large served our Web building goals.
To reacquaint yourselves with this method, see the following example.
Our first example weighs in at 1876 bytes. While it is true that table
optimization techniques can be used on this page that would reduce the number of bytes used,
the document itself suffices as being representative of the general techniques employed with
table design. What I mean by that, is that all the examples presented here could still be
optimized further--for example we could rid ourselves of white space as one optimization
technique--but that would not be the point; as we are far more interested here in
a particular technique for page byte optimization rather than a compendium of optimization
techniques. With that in mind let's push on.
Most developers of today are utilizing DTD's in their Web documents, so let's add a DTD
to the first example and view the result.
The inclusion of a DTD sees the number of bytes used rise to 1941 bytes.
However let's remember that DTD's were not widely used when tables and font tags strategies
were employed. Therefore feel free to compare the results presented later in this article
with either of the above examples. I will leave you to decide with is the fairer comparison,
but please remember that XHTML documents must include a DTD or Schema and the CSS examples
are written in XHTML.