Presentation Alternatives: Reveal.js

This is a new series offering alternatives to Microsoft’s Powerpoint by highlighting various presentation software.

As we tend do in library school and librarianship, I’ve given a few presentations lately. While one was in standard PowerPoint, for the others I used a JavaScript framework called Reveal.js. I’m now thoroughly besmitten with that approach. In addition to Courtney’s recommendation for Prezi, Reveal.js is well worth checking out, with a distinct set of features unlike most presentation software.

What is Reveal.js?

Reveal.js belongs to a growing number of web presentation frameworks that use HTML5, CSS, and JavaScript to render portions of a webpage as individual slides. It’s an open-source presentation framework first released in 2011. Unlike some of the others in this category, Reveal.js has an online editor option available (Slides.com) in addition to the framework itself. This makes it a great alternative to consider, no matter how hands-on you want to be with the underlying HTML code. 

How does it work?

For an introduction to Reveal.js, Hakim El Hattab’s demo puts his creation through most of its paces. You can witness the various navigation options between slides (moving horizontally and/or nesting slides in a vertical column), including gifs, fragmented steps through elements on a slide, various transitions, slides written in Markdown (which I’ve mentioned here before), and more.

Example image of Reveal.js html code

Example image of Reveal.js html code

If you’d like to see more of the connection between the code & the output, the photo above is the beginning of this brief demonstration I made. If you press the “s” button on your computer, you’ll be able to see how the pop-up speaker notes work. One thing to be aware of: speaker notes only work when your presentation is hosted on a server, not when you load it directly from a file. Localhost servers do count, though.

Although the times I’ve actually presented with Reveal.js I used a code editor and even altered the CSS to make the default theme a little less “shouty” (it uses all-caps in some places), I diligently signed up for a Slides.com account in order to review it here. The online editor works quite nicely and even lets you export various components of the code with styling once you’re done! I might use it more extensively next time I want to make something very image-heavy. Here’s a link to the very brief presentation I made while playing around with it—you can see that the site allows for social functions beyond the single deck being presented.

Pros:

  • HTML & Open-Source: Your presentation will be visible through any modern web browser. This means you could save it as a collection of files and folders on a thumb drive attached to the presentation computer, or you can host it on your own website or on Slides.com. This can be either for during your presentation or afterwards, such as an archive of classwork for your portfolio or as a way to share what you’ve done at conferences. It’s also mobile-friendly, so it automatically scales to smaller devices.
  • Interactive: Your audience can direct their own attention. If someone misses a term or wants to review, they can always skip backward to a previous slide on their own if they’re following along. You can also include links that take your viewers straight to particular web pages rather than relying on speaking links aloud.
  • Accessibility: Although I could certainly learn more about accessibility, such as revisiting this guest post with Ruth Kitchin Tillman, the B.C. Open Textbook Accessibility Toolkit, or the National Center on Universal Design for Learning, I believe that HTML allows for some of the most extensive ways of marking up content for audiences with all sorts of abilities and needs, such as using alt tags for images.
  • An online editor called Slides.com, made by the same developer as Reveal.js, lets you create and share presentations hosted on their servers.
  • PDF printing is included, so you can make a back-up version that you can present through a PDF viewer or a PowerPoint, should the presentation room lack internet.
  • Learning opportunity: Becoming familiar with Reveal.js was the first time I set up Javascript on my own site. The developer’s own installation instructions make the initial set-up pretty easy. Similarly, you can cut & paste code and alter the content of slides once you recognize what the different attributes and tags control.

Cons:

  • Learning curve: If you’re creating a presentation with the self-hosted version, it might take you a while to become familiar with all the specific attributes used in the html code. I ended up cutting and pasting a default “template” of a few lines of code with the elements I used most, which I recommend you do whenever you’re repeating code in order to save yourself the keystrokes and minimize the chance of typos.
  • Display (or mirroring) can be tricky to set up, particularly if you’re extensively using the pop-up speaker notes and timer function. For one of the two presentations I’ve given in person with Reveal.js, this was no problem because the technology person was extremely comfortable with the Mac set-up in the presentation room. For the other, the configuration made it impossible to send a different signal to the host computer & the actual presentation monitors. Thankfully I had brought my own laptop just in case and used it as a back-up for the timer and to occasionally check that I had mentioned everything I’d wanted for each slide.
  • Privacy: If for some reason you’re presenting on something for which privacy is crucial, any web-based system wouldn’t be best. This is particularly true for Reveal.js’s simpler presentation modes, those hosted on Slides.com or as a client presentation from something like GitHub Pages or Amazon S3, which are publicly accessible. There is a more private mode available using a socket.io server, if that appeals to you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s