HTML 5 Boilerplate 2.0

HTML5 Boilerplate has reached 2.0 with the following new features:

  • Faster build script
  • Prompt chrome frame for IE6 users
  • Respond.js included
  • PNGfix & Handheld CSS file removed
  • Switched from reset.js to normalize.js
Unfortunately I don’t see myself using HTML5 boilerplate 2.0 for the next couple of months as the majority of my projects are already using version 1.0. I use a custom version of HTML5 boilerplate which meets the needs of the clients I work on so I will be updating this to version 2.0 soon.

Recent Projects

Just thought it was about time I share some of the recent stuff I have been working on at work (Crayon London)

BT DMA

So far I have been involved in the first 2 phases of the BT Digital Music Awards website.

Phase 1 – Industry launch

The first phase being the industry launch which allowed members of the industry enter the digital music awards.

Phase 2 – Peoples Choice

The second phase has been to get other websites involved with the BT Digital Music awards, websites can register to be part of the awards and then their users can vote for the site to win an award.

View the current site at http://www.btdma.com

Hiscox Mobile

The most recent mobile website that I built was for Hiscox. They wanted a mobile website which mirrored the what is available on their main website but optimised for mobile.

View the Hiscox mobile site

Modernizr 2.0 – Use it, abuse it

To quote the homepage of Modernizr:

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.’

To put it simply, its a library which tells you what your users browsers support and enables HTML5 browser structure tag support in older browsers (similar in the way HTMLShiv works).

Yepnope.js is built right in using the Modernizr.load() command so you can combine both feature detection with media queries and conditional resource loading. This will in theory help  you to optimise your site for every circumstance without increasing your development time.

Modernizr is aimed at developers using the progressive enhancement approach and they should continue to use the progressive enhancement wherever they can. Using Modernizr is not an excuse to sacrifice accessibility for convenience or performance.

Getting started with Modernizr

With Modernizr 2.0 you can generate the version of Modernizr that you need using the Modernizr download builder so you can include only the features that you need. Alternatively you could use a CDN (http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js) link but from what I have seen the only CDN versions are uncompressed which adds useless bulk to the website. The best option therefore is to generate a version with just what you need.

Features detected by Modernizr

Modernizr detects many of the features in HTML5 and CSS3 including background-size, @font-face, border-radius, box-shadow, opacity, text-shadow, CSS Gradients, Canvas and HTML5 Video.

A full list of features detected can be found in the Modernizr documentation.

To round it up

Modernizr is a great script and should be part of every developers toolkit, while I do not advise using the structural elements of HTML5 unless you are going to rely on Javascript being turned on, the feature detection part of Modernizr is very useful going forward until we have all browsers we test in supporting CSS3 and HTML5.