Web Development Standards - Best Practices

For better or for worse, everyone developing web sites at UCLA abides by different rules. For those of us who build for public consumption, what are the best practices — considerate of time and maintenance limitations — to get a little closer to building better, lasting sites? How does the audience to your site play into adjusting the standards, from playing it old school to going cutting edge? Where does the CMS solution play a role in separating content editors from designers and programmers?

PROGRAMMING

• XHTML/HTML Strict, Transitional
  • W3C Validator
• DOCTYPE
  • Fix Your Site With the Right DOCTYPE!
  • New York Public Library – Style Guide
• META
  • Dynamic leads vs. low-maintenance tags
• CSS
  • 1.0 or Beyond
  • CSS Validator
  • Using H’s, or Disabling (ie. May 1st Reboot)
• Forms
  • Label
  • Validation / Error checking
• Images
  • ALT, Title
• Accessibility
  • Section 508 / WAI
• Embedding
  • Flash and IE7
• JavaScript
  • Including NOSCRIPT
• Special Characters

DESIGN

• Page Layout
• Typography
  • % first, ems second
  • Print Friendly
• Width / Screen Resolutions
  • 800×600 vs. 1024×768+ (or users with resolutions > 744 vs. > 968, the widths minus the worst-case scenario browser chrome width of 56px)
  • Strict vs. Elastic
• Graphics
  • Photoshop: Save for Web
  • PNG and IE
• Browser Testing
  • The Top 90%: IE 6, Firefox 1.X
  • The Bottom 10%: Safari, IE 7 / 5.5 / 5.0, Mozilla, Netscape, Opera, Camino…
  • Backwards compatability until…

STRATEGY

• Search Engine Optimization
  • Basics of SEO
• Friendly URLs
  • ModRewrite
• Heatmaps
  • DEMO: CrazyEgg.com – showing you where people are clicking and where they are not
  • Five Days
• Search
  • Options outside the Portal

Additional Resources

• Web Page Development: Best Practices