Marak Squires

Front-End Development Manifesto
HTML 4.01 / XHTML 1.0 / CSS 2.0 / JAVASCRIPT 1.5

This document is intended as a general front-end development guideline for web developers to follow. Through following these practices you will run into less problems, build better sites, and save yourself time and money.

There are exceptions to every rule, but unless you have a solid justification you should try and follow every guideline.


This document is always being modified, please feel free to drop me an email if you have any changes or suggestions.

Supported Browsers:

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 9+
• Chrome 1+

General

1. All pages must render relatively the same in all Supported Browsers
2. All pages must be valid HTML 4.01 (W3 validation test at http://validator.w3.org/)
3. No pages may be larger than 500k in size (including images)*, you may load any additional assets after the document is ready.
4. Serve static content from a cookie-less CDN when possible.
5. Websites should have a favorite icon stored in favicon.ico.

JavaScript

1. All pages with JavaScript must be able to reasonable degrade if NOSCRIPT is enabled.
2. All JavaScript must be declared in JavaScript documents and included using:
   <script type = text/javascript” src = “js/file.js”/>
3. No references to ANY JavaScript events outside of an event selection library.
4. No references to ANY DOM elements outside of a DOM selection library.
5. No XMLHTTP requests outside of an AJAX library.
6. NO INLINE JAVASCRIPT! (such as <input type = “button” onclick = “alert(‘hi’)” />)
7. Don’t try to pipeline your AJAX requests, it’s not going to work.
8. Never use a timer if you can use an event handler, see: Event Driven Programming

CSS

1. All CSS styles must declared in a CSS documents and included using
   <link rel="stylesheet" href="css/file.css" type="text/css" />
2. No inline styles are allowed*
3. <table> is not taboo and should be used when appropriate.
4. CSS class names should be descriptive of item being styled. For example “leftmenu” or “testimonials”. Avoid generic names like “style15” or names that describe the default style (like “redtext”)
5. Know the difference between percentage based layouts and pixel based layouts. Determine which one your design is going to follow before you write any code.
6. Always attempt to use "relative" positioning before using absolute positioning
7. If you are only building your site as one fixed size, it’s width should be 940 pixels.
8. Negative margins should be avoided, this usually indicates your DOM layout structure is faulty.

*If you are performing dynamic manipulation of the DOM this could be justifiable

User Interface Requirements

1. All layouts must be able to reasonable degrade to any number of screen sizes or resolutions.
2. All images should possess ALT and TITLE attributes with relevant information.
3. All clickable elements should possess a mouse hover property of “pointer” or another indicator that the item is interactive.
4. Shadowbox / Lightbox type modals should be used as much as possible for image and video content. There is no reason to load an additional page if we can use an AJAX popup.
5. Any elements which are being populated with dynamic content must be able to accommodate the size that content may become. Long strings should never break the layout.
6. All links must have all CSS for all five states: hover, visited, link, active, focus
7. Default web safe fonts must be set for all elements

1. Use a Flash Detection Kit, don’t write your own. The installation process should be seamless.
2. The site should be able to reasonable degrade if Flash is not available.
3. To maintain compatibility with browsers in less-developed markets, always try to target the oldest version of Flash possible. The newest versions of the Flash Player will always have less market penetration then the previous version.
4. Dynamic Flash websites should have a proper “crossdomain.xml” file stored in the root directory of the website.
5. Always try to store as much data (such as text and photos) outside of the Flash application in an external source such as a XML file or as a webservice. You should only embed assets inside the Flash application if absolutely necessary as updating any data will require you rebuild the entire app and redeploy it.