For the past few web projects, I have used the HTML5 Boilerplate (http://html5boilerplate.com) to set up the basic structure of my web pages. Using the HTML5 Boilerplate allows developers to build onto the framework with little effort while maintaining the standards set aside by the developer community, all of whom contribute to HTML5 Boilerplate. Developers can then customise and build upon this framework; this framework gives the developer this flexibility to customise and to make their website responsive and HTML5-ready.
I'll explain a little of each area that the HTML5 Boilerplate framework offers, allowing the developer to customise and build upon.
Overall Structure
The HTML5 Boilerplate presents a structure for the developer to place various artefacts, such as images, Javascript, and CSS. It also includes various holder pages and files for sitemaps and 404 pages.
Icons
The HTML5 Boilerplate comes with a favicon and Apple touch device images, all of which should be replaced by the developer to reflect the current web project.
htaccess File
For your Apache server, learn some tricks and other useful bits and pieces to enable security, performance, and redirects. (Setting up redirects should be a good place to start if you're completing a page redesign and you need to add some new rewriteRules and change some paths without impacting your SEO.)
Javascript
The HTML5 Boilerplate template includes the latest minimised version of jQuery and Modernizr to create responsive HTML5-ready websites. The notes within the mark-up explain best practices, such as loading Javascript at the bottom of the page, using CDNs (Content Delivery Networks) where possible, and combining and minimising your Javascript files. (Developers should try to separate global Javascript from Javascript that appears only on one page.)
SEO
This framework comes with some basic Google analytics SEO, and depending on the organisation, the developer can swap this and add Omniture and other tracking. (In one company, this was quite a large section that we needed to add to the template in order to suit our needs, which can be done very easily once the framework is in place.)
CSS
HTML5 Boilerplate comes with the normalise.css file and other common CSS classes that help get the website ready for HTML5. Included are the print templates (print.css), common CSS classes, and media queries (to build responsive websites). Then, it is up to the developer to add specific CSS based on the visual designs and grid layouts. (Developers should organise their CSS in meaningful ways, such as a separate CSS file that focused on the layout and one that focuses on page-specific content.)
And, that's it! The HTML5 Boilerplate provides the basic framework that is flexible enough to customise to suit the needs of the website and to build upon. The developer can simply add additional Javascript libraries, markup for SEO, and CSS based on the visual designs and a responsive grid layout. HTML5 Boilerplate can combine additional bits of framework (such as a responsive grid layout).
If the visual design is not an area of concern for your web project or you generally do not care what the website looks like, then I suggest combining HTML5 Boilerplate with Twitter Bootstrap (http://twitter.github.com/bootstrap/). However, if you are anything at all like me and the visual design (and concise mark-up is important) or if you're generally getting sick of looking at so many websites that look like Twitter Bootstrap, it is easy to create and build your own CSS. (The normalise.css and other CSS elements offered as a part of the HTML5 Boilerplate framework minimise issues in older browsers and in Internet Explorer.)
I will probably be adding some more HTML5 Boilerplate articles in the future, once I get around to writing them.
Have you used HTML5 Boilerplate for a project? How did it go? Add a comment and let me know.
Leave a comment