I have a lot of respect for Microsoft PowerPoint. It may be over-used and encourages people to create shocking slide shows, but it’s powerful and fun. I have just one criticism: all PowerPoint presentations look the same. It doesn’t matter how you change the colors, backgrounds, fonts or transitions — everyone can spot a PPT from a mile away.
- it’s quicker to add a few HTML tags than use a WYSIWYG interface
- you can update a presentation using a basic text editor on any device
- files can be hosted on the web; you need never lose a PPT again
- you can easily distribute a presentation without viewing software
- it’s not PowerPoint and your audience will be amazed by your technical prowess.
Admittedly, HTML5 presentations are not quite as powerful:
- you require web coding skills
- positioning, effects and transitions are more limited
- few systems offer slide notes (it’s a little awkward to show them separately)
- it’s more difficult to print handouts
But those are not necessarily killer drawbacks — you’re forced to concentrate on the presentation content rather than frivolous tweaks and awful animations.
Here are the best HTML5 presentation systems I’ve found. Click the headings to view a demonstration — most work best in Chrome, Safari or Firefox…
This is my current favorite. Slides look great and can be positioned horizontally or vertically. It’s also easy to change the CSS to add your own effects — I managed to add a rudimentary notes facility doing just that.
Slides are defined in separate
section tags and Reveal.js offers a choice of several 3D slide transitions … although they look fairly similar.
Impress.js is, well, impressive. It’s been influenced by the commercial prezi.com; slides are arranged in a 3-dimensional space and your view rotates and pans accordingly. I won’t attempt to explain it further — just try it and you’ll understand what I mean.
Slides are defined in
div elements with data attributes controlling the x, y, z locations and rotations. That’s the only drawback; it’s a little difficult to visualize and define those values. Persevere, though, and you’ll be able to create some stunning and original slide shows.
As you’d expect, Google has their own HTML5 presentation template (as well as the one offered in Google Docs). It’s fairly basic when compared to Reveal.js or Impress.js; it’s restricted to right-to-left slide transitions and fade-in effects, but it still looks great.
Slides are defined in
article tags and it’s easy to add extra stylesheets to override the default CSS.
Deck.js was one of the first HTML5 presentation systems. It looks similar to Google’s offering — perhaps a little prettier, but without slide transition effects.
Slides are defined within semantically correct
section blocks in an outer
article. There’s also a documented API so it’s possible to create your own extensions.
Shower is a presentation system by Vadim Makeev of Opera Software. While it’s one of the simpler systems, it’s fast and works well in all browsers. The slide thumbnail view is especially cool (press ESC).
Shower’s main drawback is it’s convoluted HTML. Slides are defined in a
section within a
div within another
div and contain their own
header and content. A little more development could make it easier to use.
Other worthy mentions:
- S5 — A Simple Standards-Based Slide Show System (download)
- CSSS — CSS-based SlideShow System (download)
- Slides (download)
- HTML5Rocks (no direct downloads, but you can copy the source)
Have I neglected to mention your favorite HTML5 presentation system…
If you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.