# Web Development Standards - Best Practices

For better or for worse, everyone developing web sites at <span class="caps">UCLA</span> 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 <span class="caps">CMS</span> solution play a role in separating content editors from designers and programmers?

**<span class="caps">PROGRAMMING</span>**

- <span class="caps">XHTML</span>/<span class="caps">HTML</span> Strict, Transitional 
    - [W3C Validator](http://validator.w3.org/)
- <span class="caps">DOCTYPE</span>
    - [Fix Your Site With the Right <span class="caps">DOCTYPE</span>!](http://www.alistapart.com/articles/doctype/ "A List Apart")
    - [Style Guide](http://www.nypl.org/styleguide/ "New York Public Library")
- <span class="caps">META</span>
    - Dynamic leads vs. low-maintenance tags
- <span class="caps">CSS</span>
    - 1.0 or Beyond
    - [<span class="caps">CSS</span> Validator](http://jigsaw.w3.org/css-validator/)
    - Using H’s, or Disabling (ie. May 1st Reboot)
- Forms 
    - Label
    - Validation / Error checking ([JavaScript](http://developer.apple.com/internet/webcontent/validation.html), [<span class="caps">PHP</span>](http://www.evolt.org/article/Clever_forms_with_PHP/17/60143/index.html))
- Images 
    - <span class="caps">ALT</span> vs. Title
- Accessibility 
    - [Section 508 / <span class="caps">WAI</span>](http://www.contentquality.com/)
- Embedding 
    - [Flash Detection](http://www.adobe.com/products/flashplayer/download/detection_kit/ "IE7 ready")
- JavaScript 
    - Including <span class="caps">NOSCRIPT</span>
- [Special Characters](http://www.webmonkey.com/reference/special_characters/)
- <span class="caps">RSS</span> Feeds 
    - [Validation](http://validator.w3.org/feed/)

**<span class="caps">DESIGN</span>**

- Page Layout 
    - [<span class="caps">YUI</span> <span class="caps">CSS</span> Grid](http://developer.yahoo.com/yui/grids/)
- Typography 
    - [62.5% resets 1em to 10px](http://clagnut.com/blog/348/)
    - [Print Friendly](http://alistapart.com/articles/goingtoprint/)
- Width / Screen Resolutions 
    - 800×600 vs. 1024×768+ (or users with resolutions &gt; 744 vs. &gt; 968, the widths minus the worst-case scenario browser chrome width of 56px)
    - [960px Width](http://cameronmoll.com/archives/2006/12/gridding_the_960/)
    - Strict vs. Elastic
- Graphics 
    - Photoshop: Save for Web
    - [<span class="caps">PNG</span> and IE](http://www.alistapart.com/articles/pngopacity/)
- Browser Testing 
    - The Top 70%: IE 6, Firefox 1.X
    - The Middle 20%: IE 7, Firefox 2
    - The Bottom 10%: Safari, IE 5.5 / 5.0, Mozilla, Netscape, Opera, Camino…
    - Backwards compatibility until…

**<span class="caps">STRATEGY</span>**

- Search Engine Optimization 
    - [Basics of <span class="caps">SEO</span>](http://www.456bereastreet.com/archive/200502/basics_of_search_engine_optimisation/ "456bereastreet.com")
- [Friendly URLs](https://kb.ucla.edu/link/40)
    - ModRewrite
- Heatmaps 
    - [Five Days – etre.com](http://www.etre.com/blog/2006/05/five_days_dixonscouk/)
- Search 
    - Options outside the Portal

**Additional Resources**

- [Zeldman: Designing With Web Standards](http://www.zeldman.com/dwws/)
- [Developing with Web Standards](http://www.456bereastreet.com/lab/developing_with_web_standards/ "456bereastreet.com")
- [Web Page Development: Best Practices](http://developer.apple.com/internet/webcontent/bestwebdev.html "Apple.com")
- [<span class="caps">PLUG</span>-IN – Web Developer extension for Firefox/Mozilla](https://addons.mozilla.org/firefox/60/)
- Stats 
    - [Google Analytics](http://analytics.google.com/) – free for multiple domains/users up to 5m pageviews/month
    - [CrazyEgg Heatmaps](http://crazyegg.com)