I’ve rounded up some HTML5 site starter templates to help you get up and running with a project quickly.
Bare Bones HTML5 Markup
Just the very basic HTML5 markup structure to get you started with a simple HTML5 page.
Get the GitHub Gist here
The HTML5 Bones Template
Ian Devlin has provided a nice little template that’s a bit more well rounded, including:
- a richly commented template with helpful notes about key HTML5 elements
- Google analytics code included
- Normalize.css for cross-browser compatibility
- A very basic style sheet with only a few fundamental styles
- the HTML5 Shiv for IE 8 support
Get the HTML5 Bones Template on Github
The HTML5 Boilerplate
Probably the most well respected starter template on the planet, and for good reason. Includes more touches, including:
- The Modernizr script for the HTML5 shiv PLUS robust browser feature detection
- and more
Visit the HTML5 Boilerplate Homepage
Initializr goes further to help you custom configure a set of starter files. You can choose to include or exclude:
- a basic mobile-first responsive CSS template
- CSS from Twitter Bootstrap
- respond.js to enable support for media queries in IE 8
- Apple Touch Icons
Visit the Initializr Homepage
The HTML5 Boilerplate has recently separated out
normalize.css, giving it a separate stylesheet link in its default template file. Should you leave it like this in your production site? Is there some caching or other gain? Nope. At least probably not.
Looking at the rationale, one finds this was done to help with maintenance and versioning of the H5BP code.
For production, the recommendation is still to roll up all your CSS, including
normalize.css into one minified and compressed file.
Necolas points this out in the GitHub pull request on this issue:
Benefits of disentangling normalize.css from the rest of the project’s
Easier to track normalize.css version.
Easier to update normalize.css.
Easier to remove normalize.css if the user wants.
Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides.
Drawback is the additional HTTP request incurred from the extra
stylesheet referenced in the HTML. However, we already do something
similar for the JS, and anyone serious about performance is going to
employ a build process to concatenate and minify CSS/JS.
- HTML5 Bones also has normalize as a separate file.
- As pervasive as normalize is becoming, this could become a new best practice …
- But in terms of site performance there would need to be caching benefits to overcome the need for the extra HTTP request. If I understand how browsers decide when to use a cached file, the file would need to be sourced from the same online location — as the H5BP does with Google-hosted jQuery.
This post from Trigger.io shares a strategy for creating Android and iOS apps from a single HTML5 codebase.
The post walks through:
- using Backbone.js to present a responsive interface
- using the HTML5 boilerplate to reduce inconsistencies across platforms
Read it here: How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io – Cross Platform Dev Blog
If you missed this debate, go back and check it out:
Allow me to paint a picture:
- You are busy creating a website.
- You have a thought, “Oh, now I have to add an element.”
- Then another thought, “I feel so guilty adding a div. Div-itis is terrible, I hear.”
- Then, “I should use something else. The aside element might be appropriate.”
- Three searches and five articles later, you’re fairly confident that
- aside is not semantically correct.
- You decide on article, because at least it’s not a div.
- You’ve wasted 40 minutes, with no tangible benefit to show for it.
If we want to have well-considered semantic elements in the language, we need to take the time to consider the effects of every new element that could potentially be used to structure our content.
Great debate, with a lot to be learned from reading each side. (IMHO: Keith wins.)
If you appreciate an excellent parallax scrolling interface, don’t miss this:
In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We’ll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we’ll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.
via Behind The Scenes Of Nike Better World – Smashing Magazine.
Mozilla has launched an ambitious new project aimed at breaking down the proprietary app systems on today’s mobile devices. The project, dubbed WebAPI, is Mozilla’s effort to provide a consistent, cross-platform, web-based API for mobile app developers. Using WebAPI, developers would write HTML5 applications rather than native apps for iOS, Android, and other mobile platforms.
Mozilla isn’t just talking about WebAPI, it’s already hard at work and plans to develop the APIs necessary to provide “a basic HTML5 phone experience” within six months. After that, the APIs will be submitted to the W3C for standardization.
Among the APIs Mozilla wants to develop are a telephone and messaging API for calls and SMS, a contacts API, a camera API and half a dozen more.
via Mozilla WebAPI wants to replace native apps with HTML5 — Ars Technica.
I was excited today to stumble across the Aloha Editor after seeing in mentioned in the HTML5 Boilerplate discussion list.
It’s point? Enable users to edit content in their website right from the front end — by simply clicking into the desired element, editing, and submitting.
THEN I discovered that some savvy coders have integrated it into a nice little WordPress plugin, called Front-End Editor. I’ve now tried it out and have to say that I like it.
Kudos to these teams of coders!
“The world’s most advanced browser HTML5 based WYSIWYG editor lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.”
“Lets you make changes to your content directly from your site. No need to load the admin backend just to correct a typo. Goals: save as many trips to the backend as possible; compatible with any theme, out of the box; light and fast.”
We wanted to provide a comprehensive references of elements that are new or have been redefined in HTML5, so we’ve created a glossary. We’ll be adding to this in the coming weeks to make it more comprehensive.
via Glossary | HTML5 Doctor.
A very helpful list of the new semantic elements coming with the HTML5 specification.
Semantics – Dive Into HTML5.
collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don’t natively support them
via HTML5 Cross Browser Polyfills – GitHub.