Best Practices: Front End

This is part 1 of my series on best practices. In future posts, I’ll cover best practices with back-end development and best practices with HTML forms. In the meantime, here are sometime guidelines to follow for your HTML pages:

  1. Reset your CSS.

    Why?: Unfortunately, the base CSS rules in browsers are not consistent so they need to be reset if you want your site to look how its supposed to look with as few surprises as possible. This is a step in that direction.

    A good CSS reset: http://meyerweb.com/eric/tools/css/reset/

    Or if you’re using HTML5: http://html5reset.org/

  2. Minify your CSS and JavaScript.

    Why?: Always store your CSS and JavaScript in files and be sure to minify it. Minifying your JavaScript removes comments or whitespace from your stylesheets and scripts speeding up your load time. This also reduces the chance of your page getting hacked.

    Tools for this: http://minifyjavascript.com, http://minifycss.com.

  3. Always use CSS sprites instead of JavaScript for image replacement.

    Why?: Images slow down page loads more than anything so using as few images as possible
    makes things faster. Using sprites (a composite image of the hover and non-hover states stacked
    vertically or horizontally), for rollovers significantly cuts down on the number of images the
    page has to load.

    Tools for this: http://csssprites.com/

    This will keep you from having to reload your page.

  4. Ensure legibility for screen readers.

    Why?: Some users will only be able to access your website using screen readers, so you must ensure
    content appears in a logical order.

    Here is good resource for this: http://csszengarden.com

  5. Let Google host JS libraries for you.

    Why?: Speeds up your site because you save your users from downloading these libraries.

    Google hosts a number of popular JavaScript libraries including jQuery, Dojo, MooTools and Prototype.
    A full list can be found here: http://code.google.com/apis/libraries/

    Example:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>

  6. Load JavaScripts at the bottom of page.

    Why?: The browser loads the head before the body. So if your JavaScript is in the head your user sees white while the page loads. If you put your JavaScript at the bottom, your content will load first.

    Of course, there are exceptions to this rule, such as when you really need a JavaScript to run before the body of the page is loaded. In most circumstances, you’ll be able to get away with loading them at the bottom of the page.

  7. Use multiple stylesheets

    Why?: Separation of concerns. If another developer assumes your project, he won’t want to kill you.

    I usually use one for resets, one for elements and utility classes, one for page layout, at least one for the content, one for forms, one for mobile, one for print and at least one for IE.

More to come…