Preparing a Drupal Presentation with HTML5 & CSS3



October 25, 2010

In preparing for my live streamed HD session at Drupal Camp Montreal 2010, I was prompted by someone's tweet or blog post from DrupalCon Copenhagen to try a different approach with this presentation. I'd much rather be facilitating than presenting, but I do have a message I want to spread to the community, so I had to take this seriously.

Now the quality of the notes from DrupalCon's are definitely getting getting better. Here's examples from San Francisco & Copenhagen (links removed). There's stuff here that should be borrowed by many other conferences.

A few folks I respect have also written a few calls for better presentations. Gregory Heller's post We've Met The Enemy And He Is Powerpoint is great. Emma Jane Hogbin's Presenting: Make It Short and Make It Memorable at DrupalCon DC (links removed) is good. She's written some great books for the community too.


There's lots of good resources online too about why to be / wary of a standard PowerPoint presentation. Visual Aids Gone Wrong and Bore No More are both good examples.

I mostly was using Presentation Zen in preparing my slides, but I certainly don't think I have prepared a example that addresses all of the many good ideas put forward in these resources. I had a pretty limited time to proceed and a few additional requirements to think of.

So I was doing a talk about accessibility & Drupal, so wanted to make sure that the slides them-selves to be pretty accessible. I wanted it to be very visual and with minimal text per slide. I am a web developer so I wanted to do it on the web & thought it would be good to have some reason to experiment with HTML5, which I hadn't had the time to play with before. Now this would mean using either Chrome or Opera, but I was fine with that.

So I took a brief look around and ended up on the HTML5 Rocks site that Google is behind. They had a working demo under an open source license & I figured I could make it work for my presentation. It worked pretty well I think. I didn't see all of the presentations, but I think I was at least one of the more visually interesting presenters.

In developing my presentation, Why Bother with Accessibility? - I managed to stay away from bullet points & use some great Creative Common's images to spice it up a lot. Sadly I didn't use @lizak's trick of neatly including the source in the footer until after the presentation.

I had already added my presentation notes & full description of the background images to the slides I was using, so it wouldn't have been difficult. I was working to consider accessibility as much as I could in my presentation. I wanted to have a presentation that was sharable outside of what I did on Sunday. Especially since there will be an archived video version of the slides, I wanted to be able to share the work I'd done with everyone.

So, once i laid out the process of doing this in a single flat text file using HTML5, CSS & JavaScript, I got to thinking of the advantages of doing this with Drupal (of course). I did a lot to make this presentation accessible, but it was fiddly to write & format in a text editor. It's been a while since I've bothered to format a full HTML page, since I'm almost always using a Drupal.

I definitely could have tried harder to inject a story or joke in the presentation to try to liven things up a bit. It's really hard to get folks to engage in the last session of a two day conference. That being said there were some interesting questions afterwards people were listening.

Catherine Roy told me afterwards about a practice of describing the slides being presented so that blind people could understand what everyone else is seeing. Even taking a few minutes to explain the slide verbally could have helped someone who was only able to listen to the presentation. This would actually also be useful for all of those times when you can only listen to a video cast & don't have time to watch it.

Oh ya, how could I not play with web fonts while trying this? I tried both Google Fonts and @font-face. They both seemed to work similarly well and were similarly easy to introduce to the page. To the best of my knowledge, this does not add any accessibility challenges to the page.

I look forward to seeing more introductions for HTML5 in Drupal. It seems to be a much lighter and meaningful standard. There are some modules to add on this output for Drupal 7, but it won't be working it's way into core until Drupal 8.

To view the slides use either Opera or Chrome for the best HTML5 experience Accessibility presentation at DrupalCamp Montreal.

About The Author

Mike Gifford is the founder of OpenConcept Consulting Inc, which he started in 1999. Since then, he has been particularly active in developing and extending open source content management systems to allow people to get closer to their content. Before starting OpenConcept, Mike had worked for a number of national NGOs including Oxfam Canada and Friends of the Earth.