Future-Proofing Your Web sites
It's
2008, 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 2006, you had redone your sites to take advantage of CSS1, 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.
How web design was done in the twentieth century:
- Tables for layout
- Single-pixel gif for spacing
- Font tags on each cell, paragraph or header
- 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, in the twenty-first:
- All sections in divs, not cells - Think modular.
- 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 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 />
Why?
- Using stylesheets (CSS) you can assign a different style to content for use on different devices. For example, position the navigation across the top instead of in columns for screen readers or wireless devices. Or you could set all banner ads to "display: none" if the content is being delivered to a cell phone or PDA.
- If you do it the old way, any redesign takes weeks or months, because you have to redo every font tag, and the background colors and link colors on every page.
- If you do it the new way, a redesign should take a few hours only because all you do is create a new stylesheet with different attributes for each class or HTML tag that you want changed.
- IN ADDITION, the new way encourages you to think structurally. Although there is still plenty of room on the web for linear thinking or spatial thinking, most of our information needs are better met with organized content. Programmers know this, database administrators eat it and breathe it, and designers who understand it will save themselves and their clients many future headaches.
Important Resources:
From Carrie Bickner: www.nypl.org/styleguide
New York City Library Style Guide
XHTML from HTML
Structural Thinking
Why Web Standards Matter
From Jeffrey Zeldman: www.alistapart.com:
To Hell
with Bad Browsers
From
Web Hacks to Web Standards: A Designer's Journey
From W3C: www.w3.org
And finally, feast your eyes on this magnificent web site: http://www.csszengarden.com. Every page on this site uses the exact same HTML but applies a different style sheet. Prepare to be amazed at the power of stylesheets in the hands of good designers.
*****