A funny thing happened in the unfolding World Wide Web saga. Once upon a time, in the nineteen hundreds – nineties to be precise – developers had to go though all kinds of hoops to make their pages fast loading and maintain a consistent appearance across different browsers and platforms.
Fast forward to the present day, and not only has the situation failed to improve, as so many optimists suggested it would, but the situation has gone from bad to worse; not only are there more browsers than ever, but now we also have mobile devices to contend with. Short of trying our sites out in every conceivable combination of browser, O/S and platform, how can one have a reasonable degree of confidence that the two important goals of fast loading and consistent appearance are being met?
As the World Turns, The Web Evolves
One big step in the right direction is to use Paul Irish’s excellent HTML5 Boilerplate Website Template. It’s a professional HTML/CSS/JS template for creating websites that are both fast and robust. But more than that, it’s a collection of front-end HTML5 development best practices that Mr. Irish has gone through the trouble of implementing for you. Hence, HTML5 Boilerplate is a must have for web developers who want to take advantage of all that HTML5 has to offer. In this article, we will be delving into the pertinent issues that face developers and how the HTML5 Boilerplate Website Template deals with them.
To be honest, I had never heard of Paul Irish before I wrote the Aptana Studio 3 Guided Tour and Tutorial: Create a Web Project Using the HTML 5 Boilerplate Framework article. Upon conducting a little online research, it quickly became apparent that this is no yahoo (in the Gulliver’s Travels /yokel sense of the word and not Yahoo!). In addition to being the creator of HTML5 Boilerplate, he is also the Public Relations spokesperson for Google Chrome, a member of the jQuery team, and a lead developer of the Modernizr JavaScript library! Does he have any free time at all?
Where Did HTML5 Boilerplate Come From?
The genesis for HTML5 Boilerplate came when Paul Irish decided to make all of his best practices available to the Web community via GitHub. Pretty soon, the template found its home at html5boilerplate.com. In a nutshell, the template accomplishes two things. First, it helps target older and/or non W3C compliant browsers, and by that we mean IE 6, 7, and 8. Second, it optimizes the code to run as smoothly and quickly as possible. The latter being accomplished via the build scripts. Although I have used Ant extensively for deploying Enterprise Java projects, I have never used a build script for deploying Web pages. But now that I think about it, in high profile and/or commercial applications, it makes perfect sense to streamline and optimize your code as much as possible. Here are just a few of the ways that it modifies your project code:
- Combines and minifies JavaScript (via yui compressor)
- Inlines stylesheets specified using @import in your CSS
- Combines and minifies CSS
- Optimizes JPGs and PNGs (with jpegtran and optipng)
Visit the Build Script GitHub page for a more comprehensive list.
Here’s just a few of the sites that were built using the HTML5 Boilerplate:
- Aston Martin
- The Official website of Barack Obama
- Entertainment Weekly
- Jerry Seinfeld Personal Archives
- John Ritter Research Program
- Nike Skateboarding
When in doubt, some sites don’t bother to or don’t want to change the default selection color of hot pink! Select some text and see what happens! Here’s a site called 1.21jiggawatts.com that your kids are gonna love. I already love it!
A quick view source confirms it. The simple doctype tag and IE conditional statements at the top of the page are a dead giveaway:
<!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
Conclusion
In keeping with the goal of maximizing download times, the template is available in no less than thee flavors: with comments, without, and in customizable form, where you decide which components you want. Visit the HTML5 Boilerplate site to learn more. In an upcoming article, I will explain how to use the template in more detail.
