What if every time you wanted to repaint a room, wallpaper a bathroom, or install a new stove, you had to completely pull down the entire foundation of the room and put up a new one? What if, like a military family, you were required to uproot and move every year or so? And what if, like a Joker or an Ace, you were part of a house of cards that was ready to collapse each time you touched anything?
If you have a Web page, chances are you live with these precarious virtual housing conditions. You have a structure where design and information are so intertwined, that you can't touch one without affecting the other. You have HTML code littered with font tags, tables for layout, and numerous adjustments to ensure that your pages work on multiple browsers and platforms.
How did we get here? How has designing Web pages eluded standards after close to a decade of evolution? To understand that, we have to look at the original intent of Hypertext Markup Language, and what it became when designers molded it to their Ulterior Decorating purposes. We have to look at early browsers and the fallout of the browser wars of 1997-98. We have to look at bloated browsers whose tolerance of mistakes led to sloppy habits.
Then we have to look at how we can escape from this unsatisfying quagmire, and gently urge the Web to standards that will lead to accessibility for all, design without agony, and communications that are clear and elegant. We can build dream houses, for which there will be no further need to call in the bulldozers when we want to do a simple paint job.
If we go back to when the Web page creator metaphorically lived in caves, we will remember that HTML was meant to offer a simple, no frills language to mark up data so that information could be exchanged among scientists. When the Internet exploded for the rest of us, it wasn't long before the instinctive artist in man rebelled against the lack of paintings on the cave walls. Soon tables, which were intended for the exchange of tabular data, were usurped as containers for layout. Font tags were added to new versions of HTML so that color, faces, and style could be added to text. Background color properties were added to tables and their cells. Now at least we were living in log cabins, but man craved more.
He wanted streaming water, fire, and sticks: Flash, Fireworks and streaming media wired in every room of the house. He wanted intercom systems so that users could communicate from every room in the house via dazzling interactive features. Browser building companies wanted to satisfy these insatiable demands, as well as keep market share. Soon the major players, Netscape and Microsoft, were competing with each other to bring more and fancier features to the Web. Of course, each had its own proprietary way of doing so. They also each saw fit to hide from any standards inspectors the inability of designers to write clean and correct code. Browsers become huge and bloated in order to gloss over possible mistakes. Remember those all night downloads of the latest version? Remember an almost complete download quitting at the eleventh hour and having to start all over again?
We were living in virtual palaces with gadgets and gizmos to delight. Page builders were keeping running lists of conditional statements in their heads. If this is Netscape, type Margin Width and Margin Height; else if, type for Internet Explorer, Left Margin, Top Margin. If this is a Mac, font size is based on a screen resolution of 72 ppi, else if on a PC, count on 96 ppi. On and on it went, and one could only hope that pages didn't crash certain browser configurations. Then too, browser building was a moving target. When the next version came out, what standards would emerge was anyone's guess. Web design mailing lists were full of anguished cries that the latest browser had vanquished their sites. Users of assistive technology were largely ignored, and users of older equipment and browsers were left out in a tent.
This sad state of chaos appeared to be a permanent condition, and then the Web Standards Project (WaSP) was born in 1998. What if standards could be created, and browser companies urged to comply with them? What if software companies such as Macromedia and Adobe could be urged to create Web editors that further promoted these standards? Would we all live in Frank Lloyd Wright built homes?
Believe it or not, the revolution is happening. WaSP leaders like Jeffrey Zeldman and Eric Meyers are quietly evangelizing for the cause of elegant, clean, usable design. The hunger is there. In May, Zeldman published his book Designing with Web Standards, and in one of those almost unheard of feats in the computer book world, it was sold out by June.
So what are these standards, and do they have practical application in today's Web sites? What would the building inspector be marking down on his clipboard if she were to rate your pages? Let's review some of the essential points in the standards concept.
The fact that many pages created using these standards have not been exactly inspiring has slowed progress to some extent. Designers, who created the company Web site with the goal of establishing brand, were not exactly excited to jump on board if all CSS driven sites looked the same and made the Web look like a housing development. With the days of unlimited Web site budgets behind us, however, their overwrought designs have become a liability. Many of them were created in such programs as Fireworks, ImageReady, or Debabelizer, premiere manufacturers of prefabricated homes. The designer got to lay out pages in a visual environment by dropping elements on the page, slice the components up into individual graphics pieces that could be reassembled in table cells, and create skin deep beauty that broke the first time an update had to be added. Redesigning such sites meant starting from the basement up and took months.
Still, many of them are gorgeous. Add in captivating Flash elements and you have a complex city that would cause L'Enfant to goggle in amazement. Who could give up such airbrushed beauty? Certainly those purists at the WaSP were coming across as insistent fanatics who, like so many hair stylists, were imploring you to cut off all your hair and adopt the latest minimalist do.
Many exponents of the Web Standards Project are taking the challenge to prove that standards and beauty need not be mutually exclusive. The Zen Garden (www.zengarden.com) exists to showcase beautiful sites created with Web standards. They WaSP is also backing off its initial stance that designers, in this transitional period of the Web's presentational evolution, totally forego the use of basic table markup for layout purposes. You will not be a Bad Designer if you use hybrid table/CSS designs for certain types of sites for which pure CSS layout will not do. Al Sparber, of Project Seven, gives a comprehensive tutorial in making such a CSS driven table layout. (http://www.projectseven.com/tutorials/css_t/) Still, some big profile sites like ESPN have made the leap to table-less layouts.
What might the structure of a table-less layout look like? Nothing more, and nothing less, than this spare and essential code provides the basic foundation of the new Web home I am building (It should be up at www.swanilda.com by the time you read this article.)
<body>
<div id="header">Banner goes here</div>
<div id="main">
<h1>Main Content Headline</h1>
<p>main content text goes here.</p>
<div id="footer">
<address>footer info here</address>
</div>
</div>
<div id="navbar">
<p id="skipnav"><a href="#skip" title="Skip
navigation links (alt+1)" accesskey="1">Skip Links</a></p>
<p><a href="#" tabindex="2">Home</a></p>
<p><a href="#" tabindex="3">Mission</a></p>
<p><a href="#" tabindex="4">Information</a></p>
<div id="news">
<a name="skip"></a>
<h2>Latest News</h2>
<p>sidebar content goes here</p>
</div></div>
</body>
What might this code generate in the browser? This screen shot will give you a look at the foundation of the page.
Though very spare and very plain, it is totally accessible and comprehensible to anyone using any type of browsing agent. It will not even crash in Netscape 1, nor suddenly stop working when Version X of the latest browser emerges. Assistive technologies will find it delightfully illuminative of the content, and communication once again becomes the motive of the Web page.
Cascading Style Sheets will allow the page to become visually more appealing. It might be hard to believe that this is the same exact page once it gets its CSS glamour shot. By attaching an external css document as a link in the head of the XHTML document, here is the plain page's makeover.
In the past, designers had to get out the proverbial axe and knock down the entire site before redesigning the pages. With the Web Standards Way, however, redecorating is as easy as switching to a different style sheet. A few flicks of a switch, and the above page switched to the following design to make Netscape 4, the World's Buggiest Browser, happy. The same exact structure was used, but simple adjustments to the style sheet were made.
Probably the greatest CSS Master of them all, Eric Meyer, creates an essential structure for his pages, and lets you, the user, decide what style you would like to use to view the pages. Feeling natural? Prefer a lunar look? How about the Matrix? He also offers a no style choice so you can see the basic markup. See this wizardry at www.meyerweb.com.
Rather than the agonizing and excruciatingly endless redesign process of the School of Slice and Dice, style sheets can give you a new look in a couple of hours. Style Sheet Switching allows multiple looks to one page, perhaps new looks on holidays or certain days of the week. Larger fonts and different color contrast can be offered as choices for the visually impaired.
Every fairy tale has a dark side to experience before its happy ending. In the opening days of the New Way, browsers didn't always get it right, even if they were well meaning. Those browser anomalies we had to suffer during the Table Days have morphed into browser anomalies for the Table-less Days. Consider some of the following.
Where there is a bug, there is a hack. A new little cottage industry of hacks has arisen to accommodate the CSS anomalies in the various versions of the various browsers. Here are a few of the more popular problems and hacks.
Even if you didn't understand a word of what you just read, does this give you some idea? Your first thought is probably to question why you would want to exchange one set of problems for a new one, especially since you finally understand the old one. There's a difference here, however. The hacks under the old system were designed as temporary stop gaps to satisfy the current versions of proprietary browsers. There was no telling what the next versions would introduce, and certainly no guarantee that today's hacks would work in tomorrow's version. Under Web standards, however, we know what tomorrow's browsers will bring: better compliance with a codified set of standards. Browser makers have been convinced, and are attempting to make each version of their browsers more standards compliant than the one before. We know what we're working towards.
How you feel about this future trend of the Web probably depends on what kind of sites you want to create and/or visit. Still, one need not think of limits if Zen Garden is successful in its campaign for proving beauty in CSS. The choice is really between what Jeffrey Zeldman calls decorating sites or enhancing communications. Surely there is a place for "coffee table" Web sites, just as there is a place for high-end art books in the print world. No one wants to remove the specialized movie and recording industry sites, nor their cutting edge technologies. Even the latest version of Flash has made huge strides in adopting Accessibility requirements, however, and Flash is showing up on some PDA versions of sites. So, even multimedia rich sites are jumping on the bandwidth.
Most of us, most of the time, are not looking for "gee whiz" at all. We're looking for clean design, standard functionality, accessibility, and clear communications. We are pleased when a lovely design reinforces those goals rather than obscures them. For most of us, a dream house is one that is comfortable, useful, and attractive. It is not one where we have to take off our shoes and avoid touching things for fear of breaking them.
Eric Meyer
Cutting Edge CSS Layouts:
Eric Meyer's Complex Spiral Demo: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html
Eric Meyer's basic style with menu of numerous style choices: http://www.meyerweb.com/
Eric Meyer's book, Eric Meyer on CSS, is full of real world exercises
to bring you up to speed in creating all kinds of CSS layouts.
Al Sparber and Project Seven
e-book Foundations: http://www.projectseven.com/foundations/
Tutorials
Create a hybrid CSS table layout: http://www.projectseven.com/tutorials/css_t/
Create a table-less layout: http://www.projectseven.com/grafitti/jan2003/cssdirect.htm
Create buttons from an unordered list; http://www.projectseven.com/tutorials/css_menus/list_01/
Jeffrey Zeldman
Book: Designing with Web Standards, should be out in a second printing
by the time you read this
The Daily Report: http://www.zeldman.com/
A List Apart: http://www.alistapart.com/
The Happy Cog: http://www.happycog.com/
The New York Public Library: http://www.nypl.org/styleguide/
The Web Standards Project: http://www.webstandards.org/
Other Great CSS Resources
Molly E. Holzschlag: http://www.molly.com/
Legal to steal, ready made CSS layouts: http://glish.com/css/
Safari's handling of CSS: http://www.diveintomark.org/safari/
The CSS Zen Garden, devoted to beauty in CSS: http://www.csszengarden.com/
Tanek, a CSS hack composer: http://www.tantek.com/CSS/Examples/
CSS Shark FAQ about CSS: http://www.mako4css.com/
CSS Positioning from Position is Everything: http://www.positioniseverything.net/
Text Sizing at The Noodle Incident: http://www.thenoodleincident.com/
Good Intro to the DOM: Brain Jar: http://www.brainjar.com/
CSS tutorials from the W3C: http://www.w3schools.com/css/
Browser Compliance Charts from Netscape's Devedge: http://devedge.netscape.com/central/css/
The CSS Cookbook: http://www.cssbook.com/resources/css/
Real World Style has tutorials, layouts, etc. http://www.realworldstyle.com/
Do a search on CSS at the free part of Community MX ((The Box Model Problem;
Rendering Mode and Doctype Switching) http://www.communitymx.com/free.cfm