Category: HTML5

HTML5 Site Starter Templates

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
  • jQuery
  • and more

Visit the HTML5 Boilerplate Homepage

Initializr

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
  • jQuery
  • Modernizr
  • Apple Touch Icons
  • etc.

Visit the Initializr Homepage

Should you leave normalize.css as a separate file? (Nope.)

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
CSS:

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.

Emphasis added.

Further Notes

  • 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.

Build a Faster HTML5 App with Backbone.js, Zepto.js and Trigger.io

This post from Trigger.io shares a strategy for creating Android and iOS apps from a single HTML5 codebase.

The post walks through:

  • including your JavaScript files
  • 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

HTML5 Semantics: Worth it or Not? An open debate between Divya Manian and Jeremy Keith

If you missed this debate, go back and check it out:

Divya Manian opens

Allow me to paint a picture:

  1. You are busy creating a website.
  2. You have a thought, “Oh, now I have to add an element.”
  3. Then another thought, “I feel so guilty adding a div. Div-itis is terrible, I hear.”
  4. Then, “I should use something else. The aside element might be appropriate.”
  5. Three searches and five articles later, you’re fairly confident that
  6. aside is not semantically correct.
  7. You decide on article, because at least it’s not a div.
  8. You’ve wasted 40 minutes, with no tangible benefit to show for it.

To which Jeremy Keith replies

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.

So I will continue to stop and think when it comes to choosing elements and class names just as much as I would sweat the details of visual design or the punctation in my copy or the coding style of my JavaScript.

Great debate, with a lot to be learned from reading each side. (IMHO: Keith wins.)

Behind The Scenes Of Nike Better World — Smashing Magazine

Nike Better World Screenshot
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 Developing a WebAPI to replace native apps with HTML5

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.

Aloha WYSIWYG Editor and Front-End Editor Plugin for WordPress

Aloha Editor makes browser content editableI 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!

Aloha Editor – HTML5 WYSIWYG Editor

“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.”

Front-end Editor — WordPress Plugin

“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.”