Outer Court

Tech - HTML4 - Compatibility

CSS (Cacading Style Sheets) is a W3C standardized, so it's not to be confused with another plug-in. Standards make the web design process easier, since the designer can rely on current and especially future operability. A site which wants to add critical content or navigation with only a plug-in, even if it's a widely available one like Shockwave, needs to make an additional site to make sure everybody will get the content. Many sites also give two versions of their site, one graphical intense/ frame/ certain resolution, and one plain text site. This has some major problems: first, a design choice is given to the user, who may know less about the topic then the designer. And wouldn't the user have the feeling to miss the latest news update being on an alternative version? Second, redundancy is created by having to edit and maintain two sites. This means more work: every contentual error has to be corrected twice, every update has to be implemented with twice the work.

If, however, the information/ navigation isn't critical (like a graphical effect), plug-ins to the one who has them can still be annoying. They may take extra download time. Or they start a process the systems browser can't handle through its own options.

Downward compatibility

With stylesheets, you don't need to design an extra alternative for non-stylesheet browsers (like Netscape Navigator 3). All you have to do is keep in mind that you first have to structure the content, then care for the design. Again, this means the for example graphical design is an additional helper in getting the content across.

The old way of formatting pages was a forced layout through tables. Many authors used this to overcome shortcomings in the HTML3.2 layout possibilities. These brought additional problems, since in it's most basic form the content should be linear (like text to speech browsing).

Map sample

Here's an example of how the content displays non-linear with CSS, and yet is structured linear for non-CSS browsers. You have a list of addresses connected to a point on the world map. With DHTML, CSS+JavaScript, you can achieve a popup without creating redundancy by giving the content in another text-only version. First, you write all the addresses in a linear way, but give them unique ID's.

<div id=addr1> Thomas Machinery Ltd.<br>
13169 Guelph Line<br>
RR 1 Campbellville
</div>

<div id=addr2> Congress - Tools Comp. Inc.<br>
51 Great Hill Road<br>
Naugatuck, CT. 06770 / USA
</div>

<div id=addr3>
...

Now the world map is created as an image map. With JavaScript, you can alter CSS attributes, so you turn all the addresses invisible. Next you add an onMouseover for CSS browsers which turn the adress to visible again on a certain area of the screen when the cursor is over a city point. See a picture of the DHTML map.

But what happens if the browser isn't capable of JavaScript/ CSS? Since you used CSS to turn the addresses invisible, they won't be invisible. Since you used CSS to put them all in the same place on the screen, they won't overlay. A non-CSS browser will simply display the content linear. Since you had this in mind when you implemented the content, no information is lost. The div is interpreted as line break by older browsers, so you even have the basic formatting to make it readable. You could even add other things, like additinoal headers or paragraphs, which you turn invisible with JavaScript, to replace certain shortcomings of a linear address list. And in the opposite case, you can also use JavaScript to write certain things which only make sense to DHTML browsers (like if the dot's on the map should blink when the mouse is over them, you could use a transparent gif version of an animation with an empty cell and a cell with lighter red dots, which then would be clipped over the original image).
See a picture of the non-CSS map. If you now see that an address is wrong, you only correct it in one place. If you can come up with another way of showing the addresses, you already have them in their simplest form and can add display functionality as you like. Without restructuring tables, updating your version of Flash, etc.

 

DHTML map

non-CSS map

Basic
Goodies
Design
Tech
Email
Make a donation