Best Practices
Why reinvent the wheel and duplicate effort? Below are tried and true methods for delivering usable, accessible web sites.
Design tips
- Design for your audience, not for what you think is cool. In other words, make your site functional first, then add the decoration.
- When creating a visual layout, keep in mind how it will be built in XHTML and CSS.
Coding tips
- HTML
- Use XHTML 1.0 Transitional or Strict, not HTML 4.01 or older. This allows simpler future extensibility and interconnectivity when delivering your content via other methods, such as RSS feeds.
- Structure your site tags cleanly and efficiently. If necessary, draw out the layout on paper before a single line of code is typed.
- DON'T use HTML for style or layout, CSS is to be used for separating content from presentation. The most typical old-school application of HTML for layout is the use of tables for positioning of elements on the page.
- CSS
- NEVER use inline CSS; CSS should be in a separately referenced file, or in a pinch can be placed in the <head> tag if it's to be applied only on a single page sitelet.
- Code semantically:
- For instance, make proper use of h1-6 tags—don't just bold or style text meant to be headings.
- Another example: don't use the <blockquote> tag to indent some text if you're not actually quoting a block of text. Use CSS styling to do that.
- Avoid overspecific class tags, which limit their flexibility for application on various page and content elements.
- Try to keep coding for browser quirks to a minimum. For instance, one of the only quirks we allow for is nested <ul> and <li> tags for navigation: nested list items must be coded inline or else IE6/Windows will treat each <li> as having separate line breaks.
Usability tips
- Put yourself in your audience's shoes when creating your design and information layout.
- Audience testing is essential to honing your site for optimal usability.
Accessibility tips
- Creating sites that are accessible by the impaired is mandatory, not an option.
- Making accessible sites means reaching more users worldwide. Designing with more text for navigation means your site can be translated for audiences who read other languages.
- Medium-specific stylesheets make tasks like printing pages or viewing on PDAs or cellphones even more accessible.