Better User Interfaces with CSS, JavaScript, and the DOM

1
Better User Interfaces with CSS, JavaScript, and
the DOM

• Joe Marini
• Web Design World 2006
• www.joemarini.com
• (And yes, theres more to the session than the
  six slides in your conference book)

2
Overview

• Benefits
• Web Standards
• Improve Interactivity
• Separate Presentation from Content
• Enhances User Experience

• Potential Drawbacks
• Cross-Browser Support Issues
• Degradation on Older Browsers
• JavaScript or CSS Disabled on Client

3
Approach

• Dont use JavaScript as the only way to provide
  functionality
• Make sure content is available to users without
  CSS/JS
• 1 in 10 users turns JS off (!)
• Determine your audience and set CSS/JS
  limitations appropriately

4
Sometimes Its the Little Things

• Auto-set the focus to the first form field in a
  form when the page loads
• ltscriptgt
• window.onload function()
• if (document.getElementsByTagName ! null)
• document.forms0.getElementsByTagName
• (input)0.focus()
• lt/scriptgt

5
Sometimes You Need a Little More

• Provide more information when it is needed
• Make forms more interactive and easier to
  understand
• Help the user navigate and consume large amounts
  of data
• Provide a way for viewers to see your pages they
  way they want

6
Examples

• Automatic Table of Contents
• Automatic Link Icons
• Fun with tables
• Link descriptor popups
• Style sheet chooser
• More usable forms
• Deconstructing a live example