54

Hey everyone — HTML5 Boilerplate and HTML5 Reset are two HTML, CSS, and JavaScript templates with a lot of modern best practices built-in. Their goals are largely the same:

  • Fast, robust, modern Web development
  • HTML5 (duh!)
  • Cross-browser normalization (including support for IE6 and mobile browsers)
  • Progressive enhancement and graceful degradation
  • Performance optimizations
  • Not a framework, but the starting point for your next project

Obviously, they're very similar in function. In what ways are their implementations different (for example, perhaps IE-specific CSS fixes are achieved using different techniques)? Are they at all different in scope? It seems like HTML5 Boilerplate is a bit larger (build tools, server configuration, etc.), but it's hard to know where it goes beyond HTML5 Reset when it comes to the actual site that people will see.

0

4 Answers 4

47

In general, both projects set out to provide a solid starting point for developers working on web projects. They both get rid of a lot of the tedious, some-what error-prone boilerplate that many developers find themselves re-creating for each project. The details in how they go about it are slightly different, but for the most part, they achieve the same results.

HTML5Boilerplate has, as you noted, added in some build-script pieces to help developers follow best practices to speed up their pages in terms of server-side items, such as far-future expires headers, etc. where-as the HTML5Reset project is more focused on the semantics, content, and styling. For example, HTML5Reset has more example structure for the content of the page in HTML5 (to help show people how to use some of the new elements), whereas HTML5Boilerplate does not.

The response-time and page speed parts that HTML5Boilerplate includes get more and more important as more users find themselves on mobile platforms, and as Google increases the effect page response times have on page rank. There are lots of papers that show a small increase in the page response time has a measurable negative impact on how your site is used and perceived (especially in an eCommerce setting...often a 100ms slower page will get percentage less things sold).

On the CSS front, the majority of the reset style section for both projects is very much the same, with some minor differences in what the baseline is set to. The IE specific fixes, however, are largely the same, with HTML5Boilerplate asserting a bit more control than HTML5Reset over how IE styles some things like form elements (ie. check box / radio buttons and valid / invalid states)

Two major CSS areas that HTML5Boilerplate covers that HTML5Reset does not are common helper classes to assist with making sites more accessible, such as .hidden and .visuallyhidden, as well as some substantial adjustments to the print styles that serve to both make printing more similar across browsers, as well as some cost-savings and accessibility things like making background images transparent (to not waste toner), and adding the actual URL to links and the title to abbreviations.

I would highly suggest reading through both projects' info and how they do things in a side-by-side comparison because the similarities, and also the differences (and the reasoning behind them) is quite informative and has helped me to better decide what parts of each I wanted to use.

Ultimately, just like any "library" sort of project, you as the developer need to understand what you are doing and probably should tweak your baseline to meet the particular needs of the project.

3
  • 1
    Can you provide links to the papers you reference on page response time vs page rank?
    – s_hewitt
    Apr 19, 2011 at 16:49
  • @s_hewitt - As you requested, citations have been added.
    – cdeszaq
    Apr 19, 2011 at 16:50
  • 3
    ah, I hate when there's no "in conclusion, I would recommend...". Fair tie I guess. May 19, 2011 at 15:03
0

You can use either one...

Like @murtaugh said (http://5by5.tv/bigwebshow/45) you don't need to learn anything when u first start with Reset. In my experience, working in an R&D department, when you need to demo or do quick iterations you can use the Reset (or Boiler if u already know it). When I need to build the product for deployment I turn to Boiler just because has more stuff. Works for me but now because I know both I can easily use either one.

0

I actually almost want to say using the traditional reset.css is the best... I find no problems with compatibility in my mobile apps. However, I am developing these apps using the jQuery mobile framework.

So I guess it's really conditional as to what kind of tools you are using. Phonegap doesn't seem to have any problems compiling my code into all OS. And viewing my source code in emulators looks perfectly fine...

So I really don't see the point of a boilerplate unless you are trying to achieve polyfills.

0

I work in an environment where previous developers roped the company into using both JQuery and Prototype...and it's a mess. Not only do we have to work out of compatibility mode, but just think of the extra overhead that it causes. When debugging, Prototype "hijacks" debug messages in Firebug, which leads to even more work. And the maddening part is that I've been undoing this mess for months and am just starting to get close to being done with it....and just when I'm about to pull the plug on Prototype I always seem to find another section that relies on it...

It's for this reason that I argue every time against combinations of frameworks that have similar purposes. For example, no matter how cool you might think YUI Grids is, if you load the entire YUI Framework you best not be doing Jquery, Moo, or Prototype. You'd be just needlessly bogging yourself down. It kills the load time (which wrecks the user experience) and just gives developers headaches and needless work.

Look at this phase of your site like building the foundation. You have the opportunity to use anything you want to use, but you have to be careful not to "paint yourself into a corner" so to speak. So, use purpose-built and best in class tools that are available based on your resources. Don't just use something to be cute! We're lucky in that many very high quality tools are free, so we have a choice. But know that you're steering the direction of your site for the future, and you might be the person like me who has to deal with the consequences if your decisions are hastily made.

So, unless you're NEVER going to use another framework, I endorse Reset...or even just doing top quality standards compliant CSS.

3
  • 1
    I completely agree with your thoughts on JavaScript frameworks, but the HTML5 frameworks we are talking about here are mostly markup, not active code, and for the most part are almost the same. The specific CSS is slightly different, but like anything a good developer comes across, the important part is to understand what you will be using rather than just blindly applying it. Without the developer having a solid understanding of both semantic HTML and CSS neither of the HTML5 frameworks will live up to it's full potential for a project.
    – cdeszaq
    Apr 19, 2011 at 17:01
  • 2
    At my last gig I encountered one project using both jQuery and Dojo. I chalked that up to it just being their first time touching AJAX. But then we hired a very expensive consulting firm that sent back code using both jQuery and Ajax.net. And then I gave up and quit.
    – DA.
    Apr 21, 2011 at 19:55
  • 1
    Good advice when it comes to frameworks but I find it hard to imagine how it applies to these two time saving tools which are not frameworks at all.
    – JohnC
    Dec 28, 2011 at 22:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.