Valid attitude
June 18, 2001
So you’ve been sold on this Web standards idea. What does it really mean? At a minimum, it means writing valid markup. Tags that balance. All the necessary attributes and no attributes that don’t belong. No block elements inside inline elements. Quotes around attribute values when they are required. Obeying restrictions on tag nesting – things like list items (LI elements) only going inside lists (UL and OL elements), and nothing going in those ULs and OLs unless it’s wrapped in an LI tag.
Despite the rarity of pages that actually validate, it’s really not that hard to write valid pages. If that was all there was to this standards thing, it would be easy.
It’s a mindset
XML is useful even if it never gets near your Web site. Cascading Style Sheets reduce file sizes even if you only transfer very simple formatting out of the HTML and into a linked stylesheet. But really leveraging standards is a mindset. It means caring about the full diversity of your users. It means following the spirit of the standards, not just the letter – and doing it because you care and you understand why, not just because somebody told you to do it. It means being accessible and economical in the way you write markup.
Be stylish
If you can design your site without tables for layout, do it. If you can’t, given your current audience, at least don’t go past two nested tables. If your layout requires three nested tables, rethink it. Use a stylesheet at least for basic text formatting, and make it an external stylesheet to ensure consistency across the site.
Use CSS selectors instead of everything
having a class attribute (I know I don’t always follow this one
myself). Use class attributes that refer to the reason for it being there:
that is, class="callout" not
class="smalltextonyellow". Use HTML entities
to introduce typographic niceties like emdashes and curly quotes. Use the
proper ones, not the stupid Windows-specific ones that Dreamweaver puts in.
Use consistent units for font sizes and line heights in your stylesheet.
Let your site degrade gracefully instead of restricting yourself to whatever worked in Netscape 2 or 3. Stop complaining about browsers that are “wrong” because they don’t do what Netscape 4 does. Banish the FONT tag. Separate style from content.
Be economical
If you must use tables-based layouts, try
to build them in separate horizontal blocks. This is much faster to load
than a single mega-table. Delete unnecessary formatting code in your HTML.
Avoid inline styles (the style attribute). Then, if you
decide to redesign your site, you can edit one file, not dozens of
attributes in indivual elements on every page. Even if you’ll never
redesign the site, an external stylesheet means that it’s easier to
keep things consistent and each style only needs to be defined once, not
every time you use it. Optimise your graphics: most GIFs only need 32 or 64
colors, not 256. Don’t use spacer GIFs. Use graphics sparingly.
Don’t use PDF where HTML is more appropriate. Do use PDF where it makes sense. Use external JavaScript files where possible, instead of embedding everything in the head of the HTML document.
Be accessible
Understand accessibility issues – it’s not only about disabled
people. Valid HTML requires ALT attributes on all your images.
Truly accessible code means thinking hard about the content. Put titles in
links, descriptions on tables, and spell out those acronyms
in a tooltip.
Test your pages in Bobby. Think about how your AvantGo or Lynx users will be able to read your site’s content. Analyse your log statistics to know your audience. Download HTML Tidy and use it.
Use Flash if you want, but ask yourself “Why?” first. Remember that search engines don’t do Flash and don’t need all those font tags. And while you’re ditching those font tags, don’t use points to describe font sizes in screen-media stylesheets.
Use structural markup: CITE and EM instead of
I, CODE and SAMP instead of
TT, H2 instead of
<big><big><big> or P class="heading". Use
HTML 4.0 elements like ACRONYM and ABBR and
Q. It makes things easier for search engines and speech-based
browsers.
Write valid markup. Use an appropriate DOCTYPE declaration on your pages. Know the difference between DOCTYPEs. Validate your pages or at least check them in iCab. Don’t assume that the Transitional DOCTYPE is the one for your content: XHTML Basic might be just as appropriate. And test your pages in multiple browsers, not just the Big Two.
Be forward-looking
Consider XHTML. Add a print-media stylesheet. Have a plan for how you will evolve your sites to take advantage of emerging CSS2 support. Consider generating content in appropriate formats from XML/XSL base documents on the fly. Use JavaScript for useful things, not just glitzy rollovers. Learn about the advanced features of PDF. Learn the DOM.
Be active
Don’t just shoot the breeze on Web designer sites. If you find a browser bug, inform the company concerned. Give feedback on preview and beta versions of browsers. If you work out a fix or workaround for a browser bug, publish it or pass it on to someone who will. Learn from others, and let others learn from you.
Lobby Microsoft, Adobe and Macromedia to get FrontPage, GoLive and Dreamweaver to generate valid markup by default. Join the Web Standards Project.
Be smart
Use templates. Become expert in the search-and-replace functions of your editor. Document your site design so that someone else can follow what to do. Know that your readers are more important than your own designer’s ego.
Do standards. Remember why they’re important.