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.
Fortunately, we now have another option: HTML5. Or, more specifically, HTML5 templates powered by JavaScript with CSS3 2D/3D transitions and animations. The benefits include:
- 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.
- 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
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…
Reveal.js
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.Download the Impress.js files…
Impress.js
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.Download the Impress.js files…
Google Slides Template
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.Download the Google Slides Template file…
Deck.js
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.Download the Deck.js files…
Shower
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.Download the Shower files…
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)
Post: 5 of the Best Free HTML5 Presentation Systems
