Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughUsing HTML5 with Drupal, Today!
Recently, I blogged about Drupal's plans to integrate HTML5 into its next release. However, version 8 of Drupal is at least a year away. What's a Drupal dev to do, if they want to start using HTML5 right now? There are a variety of tools and techniques. Let's look at them.
Drupal 6 or Drupal 7 – Does it matter?
In a word, “no”. In fact, if all you want to do is use HTML5 elements on your website, you don't really need to use the Drupal tools – themes and modules – to use HTML5 on your site. All you need to do is change the doctype in your theme's page.tpl.php file from:
to
html.
Simple, eh? You can now use HTML5 tags like “<video>”, “<audio>”, “<canvas>”, etc., on your pages. For a full list of HTML5 tags and their browser compatibility see: http://caniuse.com/#cats=HTML5. If you are a more visual person, you might prefer this interactive graph by HTML5's Superman, Paul Irish.
Modernizr
Better yet, use Irish's modernizr, “an open source, MIT-licensed JavaScript library that detects (browser) support for many HTML5 & CSS3 features” (http://diveintohtml5.org/detect.html). There's a module, available for both Drupal 6 and 7. If you prefer, you can build your own modernizr script, choosing just the elements you want to use to keep your script small, download your customized library, and add it to the head of your theme's page template files with:
<script src="http://civicactions.com/blog/2011/jul/15/using_html5_with_drupal_today/(path-to)modernizr.min.js"></script>
In Drupal 6, this would be page.tpl.php and in Drupal 7, html.tpl.php. Read the full instructions here.
Semantic Elements
If you want to use HTML5 semantic elements, you do not necessarily need an HTML5 theme. You can manually replace the CSS “divs” you want to change, in your various template files, with their corresponding HTML5 elements: “<div id=”header”>” with “<header>”, “div id=”main”>” with “<section id=”main”>”, etc. Each theme will likely vary slightly, in how it implements HTML5 semantic elements. If you compare the two Drupal 6 themes, HTML5 Base and Boron, for example, you'll see that Boron turns each “block” into a “section” while HTML5 Base leaves “block” elements as “blocks”. See the handy flowchart from HTML5doctor.com, and this excellent post, also from HTML5doctor.com, for instructions on how and where to use the new semantic elements. For a more indepth discussion of HTML5 semantic elements, see http://diveintohtml5.org/semantics.
HTML5 Shiv or Shim
Last in the process of adapting your own theme for HTML5 is linking to Remy Sharp's HTML5 enabling script. What this does is get Internet Explorer to recognize HTML5 elements. All you need to do is put the following in your “<head>” element:
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Tada! You've rolled your own HTML5 theme!
Once you are done, check your work via the HTML5 Outliner.
Drupal HTML5 Themes
There are many good HTML5 Drupal themes that, with the exception of implementing modernizr, have done all of the above work for you. If you want to reap the benefits of Open Source community work, use one of them – and apply the time you save bettering it, or working on some of the many modules in development for HTML5.
Currently, there are almost 600 themes for Drupal 6, and almost 200 for Drupal 7. Of these, for Drupal 6, 17 reference “HTML5”, and for Drupal 7, 20. Almost all of the HTML5-referencing themes are starter themes; that is, they are not designed to be used as is, but as bases from which to build your own theme.
Drupal 7 Themes
The most popular Drupal 7 HTML5 theme is Sky. I suspect it is most popular because it's been around, in one form or another, since 2007. I'm not saying it's not a good theme! I've used it, for Drupal 6. It's clean, attractive and can be used as is, or as a base them. It's currently maintained by the Drupal HTML5 initiative leader, Jacine.
The second most popular is AdaptiveTheme (as of today, Thursday, July 7, 2011 – yesterday, the second most popular was Omega), which, despite the name, does not in fact, appear to be “adaptive”. “Adaptive” or “responsive”, in regard to web sites, generally refers to the use of CSS3 media queries to assign different stylesheets for different sized viewports and devices. Version 7.x.2.x of AdaptiveTheme, according to this page, will incorporate media queries, but until then, there is no AdaptiveTheme Mobile sub-theme for Drupal 7. If you want to use media queries, nothing is stopping you from adding them yourself. AdaptiveTheme includes features: rounded corners settings, RDFa and microformat compatibility, “Gpanels which are drop in snippets for creating multi-column layouts (such as a 5 column footer)”, and optional settings for things like: adding “extra CSS class names via theme settings” and “SPAN elements to menu anchor text”.
Media Queries
For an excellent tutorial on media queries, see this Web Designer Wall post. Here's a simplified example of media queries in action, from another Web Designer Wall tutorial, and here's a fine collection of sites using media queries. Oh, and here's the anti-media-queries argument; namely, that media queries do not strip out large images and scripts, thus rendering your web site too large and slow for mobile devices. The answer to that, however, is to use a bit of Ye Olde Javascript.Framework simply uses HTML5 structural markup, while Genesis is only HTML5 friendly in the latest development version.
The now fifth most popular, Omega, is interesting. Firstly, it is an “adaptive” or “responsive” theme using media queries. Secondly, it integrates with a module, “Delta, originally designed to only work with it, that, in concert with another module, Context, allows you to use “different layouts/settings for various portions of a site”. Lastly, another module, like Delta, originally designed for use only with Omega, Omega Tools, allows you to quickly develop a sub-theme using Drush. Omega is rather large: 1.1MB! You could probably throw out all but the base folder and/or a starter kit, bringing the size down to about 350K, however.
Gamma and Beta are both Omega sub-themes.
Boron is a minimalist theme based on the popular Zen. Boron also comes in a Boron for Zen flavour. Boron for Zen is only for Drupal 6.
Panels 960gs (HTML5), Zentropy and MinimalistTheme are all Boron-based. Panels 960gs incorporates the 960 Grid System and Panels module. Zentropy is based on Paul Irish's HTML5 Boilerplate, meaning it is optimized for performance and mobile, among other things you can find out about here.
LayoutStudio's HTML5 version is in process, while HTML5 Base, a promising theme by Drupal 7 base theme designer, Jen Simmons, is still only available in a development version.
Plink, like HTML5 Base, looks interesting but is still only available in a development version. Plink comes with media queries, modernizr, “baked in” LESS and a “jQuery Mobile default sub theme for use in mobile switching”.
Drupal 6 Themes
If you want to take advantage of the almost 6000 modules that exist for Drupal 6, you might want to forego Drupal 7 for now. Though it appears that there are 17 HTML5 themes for Drupal 6, many are only HTML5 for Drupal 7, or merely reference the term in their write ups. Sky, for example, is only an HTML5 theme for Drupal 7; likewise, AdaptiveTheme, Genesis and Layout Studio. Framework, Boron, Drixel 5, HTML5 Base, modernbird, Boron for Zen and Roots are HTML5. *Whoops, looks like as of today, HTML5 Base is no longer available for Drupal 6, but is available for Drupal 7; only as a development version, though.
Roots is based on HTML5 Boilerplate and appears to be well thought out.
There are many good HTML5 starter themes for both Drupal 6 and 7. It's also easy to adapt your own theme for HTML5, or to adapt an existing theme for your specific needs. There does not seem to be a strong front-runner in the HTML5 starter theme arena, comparable to the popular Zen. What HTML5 theme are you using or are you interested in? Why?
Modules
For Drupal 6, 26 modules reference “HTML5”, and for Drupal 7, 22. Many of these modules are still in development or not yet available. Let's look at what we have.
Video is the most popular “HTML5” module for both Drupal 6 and 7. It's been around (sans HTML5) since 2005. Video allows users to “upload video in any format, play video in any format “ and transcode video to the HTML5 friendly h246, Theora and VP8 codecs.
Second up is Media: Vimeo. This module extends the functionality of Embedded Media Field to allow users to embed videos from the Vimeo video service, “using HTML5 when supported”. Media: Archive provides similar functionality for audio and video served from Archive.org. The Drupal 6 version of Media: Archive doesn't appear to support HTML5. The Drupal 7 version has some HTML5 support and plugs into the Media module.
Third most used is Elements, which provides a library of form elements: tableselect, emailfield, searchfield, telfield, urlfield, numberfield and rangefields, that a developer can use in their own modules. (Note that the Drupal 7 version does not include tableselect element - this functionality is available via the Drupal 7 core.)
HTML5 Tools is a diverse set of tools to help developers HTML5-ify their site. You need to install Elements to use HTML5 Tools, whichg is comprised of itself plus a sub-module: HTML5 Forms Tools. Forms Tools overwrites Drupal default forms with their HTML5 counterparts – or will do that. Currently, only email elements on user settings and site configuration pages, the search element on the Search Module, and the search element on the Search Theme Form are ready. Follow the progress of this module here.
Plupload Integration creates multiple file upload capabilities, and utilizes an HTML5 widget if the client computer supports it.
MediaFront is a media player who's appearance can be customized without writing code. It utilizes the Jquery Open Standard (OSM) Media Player, which plays many types of media.
JPlayer integrates the jPlayer JavaScript library with CCK file fields and Views. The jPlayer JavaScript library “provides an HTML5-based player, that uses a Flash fallback.”
VideoJS (HTML5 Video Player) is another HTML5 video player that utilizes an HTML-based solution to video display: Video for Everybody, and javascript, to cover an optimal number of browsers and devices.
There are HTML5 modules, and adjustments to existing modules, in development for GeoLocation (I know, I know, not strictly HTML5!), Canvas, processing.js and websockets. There are several graphing modules in development: Visualize, GraphAPI and Rgraph. There's an HTML5 image editor module ready to go. To see all that is available for HTML5, go here.
It's an exciting space: HTML5 and Drupal. As we've seen, we don't really need HTML5 specific themes and modules to at least get started using HTML5 on our Drupal sites; however, there are many available to help us, and many more in active development. As always, along with having fun, remember to join in: create, share and help develop the modules and themes you want to see!
About Drupal Sun
Drupal Sun is an Evolving Web project. It allows you to:
- Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
- Facet based on tags, author, or feed
- Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
- View the entire article text inline, or in the context of the site where it was created
See the blog post at Evolving Web
