Best Free HTML5 Presentation Systems

Best Free HTML5 Presentation Systems

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.

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…

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 reveal.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 itand 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 adocumented 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 anotherdiv and contain their own header and content. A little more development could make it easier to use.

Download the Shower files…

Related Posts


7 thoughts on “Best Free HTML5 Presentation Systems

  1. Mickey Dales

    A person essentially help to make seriously posts I would state. This is the very first time I frequented your web page and thus far? I surprised with the research you made to make this particular publish amazing. Great job!

    Reply
  2. Carroll B. Merriman

    I simply want to tell you that I am just newbie to weblog and truly savored this page. Almost certainly I’m going to bookmark your blog . You really come with fabulous posts. Cheers for sharing your web page.

    Reply
  3. kore dizileri izle

    Amazing put up admin thank you. I located what i was searching for right here. I will review complete of posts in this day

    Reply
  4. Ricky

    Genuinely required submit admin good a person i bookmarked your net site see you in following webpage post.

    Reply
  5. Warner Mclaws

    I just want to say I am newbie to blogging and definitely enjoyed you’re website. Probably I’m going to bookmark your blog . You certainly have good articles. Kudos for sharing your blog site.

    Reply
  6. Susanna Ruhmann

    Thanks a ton for this – love the info and agree with your perspective. However many others will not, so thanks for speaking up. Nice blog, well done!

    Reply
  7. Tod Joles

    I just want to say I am just very new to blogs and certainly loved your web blog. Almost certainly I’m planning to bookmark your website . You definitely have impressive writings. Bless you for revealing your web page.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*