Say Goodbye to Presentation Software With Reveal.js
I make no secret about my dislike of bloated, slow, and conceptually wrong software. Office bundles are no exception, and honestly make for an easy target. Advances in browser technology and javascript provide lightweight means of creating documents and presenting ideas. Reveal.js is an excellent, and elegant, example of rethinking the software we use to create slide decks.
First, a brief side note about presentations. Most people do them wrong. I can’t count how many times I’ve sat through a talk where the presenter wrote down everything he or she was going to say on the slides in bullet points, and then read the slides to us. If you are doing this, please stop. Presentation slides should be used as a visual enhancement, an additional tool to further explain whatever you are talking about. Use slides to show pictures or broadcast topics and main ideas, I have even seen blank slides used to draw the audience’s attention to the speaker and away from the screen. Presentations are important, but use with care.
Luckily, reveal.js makes it easy to create aesthetically pleasing presentations with most commonly used features. The project is described in their demo:
reveal.js is a framework for easily creating beautiful presentations using HTML. You’ll need a browser with support for CSS 3D transforms to see it in its full glory.
I tested the presentation using Firefox and Chrome, and both worked perfectly.
Building the HTML for reveal.js is quite basic. The skeleton uses standard div tags in the body of the html, similar to this:
<html>
<head>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
Put a slide here!
</section
<section>
Another slide right here!
</section
</div>
</div>
</body>
</html>
reveal.js supports seven transition styles: cube, page, concave, zoom, linear, no transition, and the default, where the slides seem to be on opposite sides of an invisible cube. Each works fine, although I found not having an animation between the slides to be jarring. I preferred the default. In addition to the pleasing default color scheme, reveal.js also supports five other themes out of the box. However, since the themes are simple CSS, written using Sass to keep them simple, it should be easy to create new themes.
In addition to basic HTML, you can, if you choose, write each slide using markdown. I’m not sure why you would want to, perhaps to make bullet points easier, but I would avoid putting too much text on a single slide.
You can also create speaker notes using an included plugin which can present notes synchronized with your presentation slides in a separate browser window. If you want to get really fancy with it, you can even have the speaker notes reside on a separate device.
If keeping your entire presentation in HTML is not desirable, you can also export it to PDF using Chrome.
- Open your presentation with css/print/pdf.css included on the page. The default index HTML lets you add print-pdf anywhere in the query to include the stylesheet, for example.
- Open the in-browser print dialog (CMD+P).
- Change the Destination setting to Save as PDF.
- Change the Layout to Landscape.
- Change the Margins to None.
- Click Save.
If editing HTML is not your thing, you can still take advantage of reveal.js using rvl.io, which will let you create, edit, and store your presentation online, using only your browser. Looking through the site, I wonder how long it will be before it is snapped up by a bigger player.
In summary, reveal.js looks like a solid offering, and if you are looking for a quick, text-based way to build a professional quality presentation, reveal.js fits the bill. Reveal.js does not have all of the features of a full-fledged office suite, it cannot, for example, embed a spreadsheet as a graph and link the graphics to the data, but for most people, especially most people who have read this far, reveal.js will do exactly what they need.