extend

Extend and customise HTML5 Boilerplate

Here is some useful advice for how you can make your project with HTML5 Boilerplate even better. We don't want to include it as it does not fit for everyone and is more like an addition.

HTML

• Use HTML5 polyfills

• You can use the body element as a wrapper, so you don't need to use a div#container.

• Use rel="prefetch" for documents to pre-fetch.

• Use Microformats (via microdata) for optimum search results visibility

• Read about [[HTML head options|html-head]] (also see http://gist.github.com/581868)

• Use the favicon PSD template to generate all of the touch icons

• Read more on DNS-Prefetching

• Add offline support with new HTML5 features.

• Internationalization tips

CSS

• Use table-layout: fixed to make large tables render faster

• Consider CSS3please.com to assist in writing CSS3

• Read some CSS Spriting tips or use Lemonade if you are using Sass

• If you're building a web app you may want native style momentum scrolling in iOS5 using -webkit-overflow-scrolling: touch.

• You can add hyphen to hyphenate your text, read more here

CSS pre-processors

insert articles on getting started with pre-processors

JS

• Use a script loader like yepnope.js in combo with your HTML5 polyfills to bring the future to all browsers. yepnope.js is already part of Modernizr (included in H5BP by default). So you can use it right away.

• Tell your users to Enable JavaScript (maybe with a link to enable-javascript.com)

• Simulate link printing in IE with JS

• Kick off your page-specific javascript based on your markup.

.htaccess

• If you can, implement raw DEFLATE compression instead of GZIP; DEFLATE is faster and always results in a smaller output. Deflate compression browser compatibility and advantages over GZIP. (Note: Apache's mod_deflate outputs GZIP)

• Use trailing-slash redirects trailing slash redirects

• Avoid development/stage websites "leaking" into SERPs (search engine results page) by implementing X-Robots-tag headers

• If you aren't using a CMS/Blogging System(i.e. Drupal, Wordpress etc.) then why not create a custom rewrite rule to strip your directory files of their extensions. This allows users to be directed by name rather then having to add the file extension within the URL address in complete SUPER SEXY HTML5 Boilerplate fashion. Apache Project URL Rewrite Documentation, Apache Server URL Rewrite Tutorial

Experimental

• combine css media queries with js screen size detection? or add a bunch of targeted hardboiled media queries

• aural stylesheet

• cache manifest

• iOS startup image

• move the .htaccess directives into the vhost config for slightly better apache performance

  • issue with the www redirect was found with this, however.

Misc

• Use Google's recommendations for SEO: the Google SEO Starter Guide

• Dig into the new link relations

• Google Analytics augments

• Screen readers currently have less-than-stellar support for HTML5 but the JS script accessifyhtml5.js can help increase accessibility by adding ARIA roles to HTML5 elements

Using a mobile-first approach

Consider setting your base styles and mobile-friendly less-image-heavy styles first, and use media queries to set the more intensive desktop friendly styles. Our 2.0 release includes respond.js within the modernizr.js and enables all media-queries to work in IE6, 7 and 8.