Web-Based Slide Decks Done Right

2011-06-07

For software developers, the era of using desktop presentation software like Powerpoint and Keynote will soon be over. Slide decks can now be created using modern HTML5 technologies. Web-based slides make a lot of sense, especially for those comfortable writing code. They’re just web sites, so no special software is needed to view them. They’re built with code: HTML, CSS, and JS. Web-based slide decks can be programmed and interactive. And recently, tools have emerged to help developers build them.

Desktop-Style Web Apps

Using the Web to put together a slide deck is not a new idea. Back in 2007, Google integrated a presentations app into their larger Google Docs suite of tools. Much like the rest of Google Docs, the presentation app was largely inspired by productivity software offered by Microsoft, but this tool lived on the Web. Unsurprisingly, Microsoft soon followed with a Web version of Powerpoint in their Office Live suite.

In 2008, the Web framework Cappuccino was born, and with it came 280 Slides, built by former Apple engineers. Cappuccino, and the language it’s built on, Objective-J, are a complete abstraction on top of the modern Web stack. Try out 280 Slides – it’s impressive technology.

By early 2009, Web-based slide decks meant relying full-featured in-browser apps that attempted to replicate what was found in desktop clients. A paradigm shift had not yet occurred.

Slidedown and ShowOff

In the spring of 2009, Pat Nakajima released Slidedown, a novel approach to making a slide deck for the Web. The toolchain introduced was familiar for web developers: Create content using Markdown and code. Use the command line to generate the slideshow as a single HTML file. Post it on a web server. Slidedown relies heavily on jQuery for slide transitions and animation.

GitHub’s Scott Chacon made a splash in early 2010 with ShowOff. With a workflow similar to Slidedown, ShowOff generates a presentation as a self-contained Sinatra app. In the era of Heroku, hosting the Sinatra app is trivial. Today, many presentations at Ruby conferences use ShowOff.

Embracing HTML5 and CSS3

Starting in 2010, HTML5 and CSS3 were clearly becoming the Next Big Thing on the Web. Google’s Chrome team launched HTML5 Rocks*, an all-encompassing resource for HTML5 technologies. One of the most eye-catching parts of the site is a fully HTML5 slide deck about (what else?) HTML5. Breaking from the reliance on JavaScript in Slidedown and ShowOff, Google opted to use CSS3 to accomplish effects that were once cumbersome to implement in the browser. Maximizing the potential of modern browsers, this was clearly the way forward.

In May 2010, Adam Zaptletal released Landslide, an HTML5 slide deck generator that borrowed heavily from Google’s original HTML5 Rocks presentation. I used it earlier this year for a presentation to journalists on HTML5.

But Google wasn’t done. Last month at their annual developer conference, Google I/O, all presentations by the Chrome team used an I/O-themed HTML5 slide deck. While not yet formally announced, Google has actually released the slide template as an open source project, called htm5slides on Google Code. Googlers Eric Bidelman and Arne Roomann-Kurrik went a step further for their HTML5 Wow presentation, and released that code as its own open source project. HTML5 Wow features bleeding-edge stuff, like WebGL and the File API.

Mozilla has been getting in on the fun as well. Technical Evangelist Paul Rouget recently released DZSlides, with the accompanying slide show HTML5 in the Wild. DZSlides enforces almost no theming, and importantly, includes support for embedding slide decks. Presenters know that the ability to embed their slide deck through Slideshare is a major reason to stick with traditional formats like .ppt, .keynote, or .pdf. DZSlides is a pure HTML5 solution that replaces Slideshare’s Flash embed. It should be noted that as of this writing, DZSlides doesn’t render correctly in the latest Webkit-based browsers. The latest Firefox and Aurora builds do support the correct behavior.

Today, solid options exist for creating slide decks in HTML5. With the current tools, using code to craft a presentation is easy, and frankly, more fun than using Powerpoint or Keynote. And there are no barriers to entry for inventing a custom solution.

* I wrote an article about WebSockets and EventSource published on HTML5 Rocks.