Future-Proofing Your Web sites
It's
2005, and your company has just installed Linux HX machines on everyone's
desktop. It's a wonderful world, but your old Intranet is looking pretty boring,
and the new CIO wants it overhauled pronto. Trouble is, there are 400 different
sites which need to be upgraded, and you've only got a team of five web people
- two server guys, two programmers, and a designer.
Oh yes, and he wants it to look good on the boss's wrist watch.
If only, back in 2003, you had redone your sites to take advantage of Cascading Stylesheets, all you'd have to do is redo the stylesheets - the content would be defined and tagged, and ready for the new skins you're going to put on it.
As Owen Briggs put it in his design rant back in 2001, "The idea of the web is to digitalize your message for a variety of retrieval methods -- for methods we have now, and for methods that we haven't thought of yet...If we don't have an open, common, flexible format to use, we'll lose our history every time technology moves on."
How web design is done now:
- Tables for layout, all content in table cells
- Single-pixel transparent gif to control positioning
- Font tags on each cell, paragraph or header to control the way the text looks
- Backgrounds and link colors specified on each page
- In fact, every non-default item specified every time it appears.
How it will be done, and is being done:
- All sections in divs, not cells - Think modular. Think onion.
- Stylesheets (CSS) used to position each div
- All text appearance controlled by stylesheets
- Backgrounds and link colors controlled by stylesheets
- In fact, all non-default appearance controlled by one or more centralized stylesheets.
- HTML coding follows XML standards (XHTML). All but a handful of tags are
actually containers, not placeholders, and no tag is valid
unless it is closed.
The <p> tag? NOT a line break. <p>A paragraph container.</p>
The <li> tag? NOT a bullet. <li>A container for an item in a list. </li>
The <br> tag? Okay, not a container, but you still have to close it: <br />
The <hr> tag? Also not a container, but must be closed: <hr />
The <img> tag? Also not a container, but must be closed as well: <img />
To read more:
From Jeffrey Zeldman: www.alistapart.com:
From
Web Hacks to Web Standards: A Designer's Journey
From W3C: www.w3.org
Proof of concept
A web designer, Chris Casciano, decided to make a different
style sheet and apply it to the same content every
day in February, 2002. He didn't quite make it to the end of February,
but the results do tell an important story. Here are some of my favorites:
| 09 11 12 14 |
15 16 18 00 |
I decided to put this concept to work as well, and, as a demo, redid the site of a local Alzheimer's organization with a style-changer attached. If you were to look at the source of the page each time you change the style, you would find it is exactly the same!