Presenting with reveal.js
Disclaimer: This post is not about how to approach the conception of the ideas and messages you want to convey. There are many more qualified authors writing about this and I would point you to Mr. Garr Reynolds and his great book Presentation Zen: Simple Ideas on Presentation Design and Delivery (2nd Edition) (Voices That Matter) if you want to learn more about this aspect of presentations.
The sad reality of most presentations
Just look back at the presentations you gave during your studies or career. I remember my presentation that was part of the defense of my final thesis in front of the thesis committee. We the students had no access to the environment that was to be used during the defense to try out the presentations we prepared. The machine turned out to be a Windows system with Microsoft Office 2007 and it was connected to a projector. I do not remember the resolution of that projector and the aspect ratio. Regardless of what one might think, even these aspects should be taken into consideration when you are presenting publicly since they impact the quality of the presentation. Due to all these restrictions I ended up preparing several versions of the presentation (.ppt, .pptx, .pps, .ppsx) and also PDF backups in case that something goes wrong. One can never know.
Unfortunately it doesn’t end there. Not only can resolution and aspect ratio impact the clarity of images used in the presentation, the use of special effects differs across various versions of the proprietary format used by PowerPoint. Since my thesis was fairly technical and not all of the members of the thesis committee were as big of a fans of graph theory as I was, a clever way of presenting of ideas behind my thesis was required. These however varied across different formats and didn’t make it to the PDF export so an extra effort was required to supplement those with additional slides. My paranoia proved useful as I ended up using the PDF version after all.
And this was just one instance. Let’s take a look at common pain points of giving a presentation:
- Proprietary formats
- Whether you choose to create your presentation in Microsoft PowerPoint, OpenOffice Impress or Apple Keynote you are going to suffer from inherent limitations of these formats. Not only that, but your presentations may not look the same when the presentation is played using various versions of the software used to run them. It is pretty common to see differences in the way transitions are handled, effects used and the way embedded content is presented.
- Software/Platform dependence
- Once you create your presentation in this way, your presentation becomes dependent of your choice of the software. This is not an issue when you are rehearsing your speech but when it comes to presenting on someone else’s machine the results might vary. And in case you created a study material for your class mates it forces them to conform to your software/platform choice and might require them to purchase a licence in order to be a law abiding citizen. This can be mitigated to a certain degree by exporting your presentation to PDF, but the result is usually not the exact same presentation that you deemed final version and/or worthy of carrying your name.
- Versioning & Collaboration
- If you’ve ever worked with source versioning system like git, you can appreciate the possibility of having a remote backup that is nicely versioned. And don’t make me even start on creating a presentation in a team without proper support for versioning and branching. If you do a presentation once in X years this won’t be an issue worth considering but try to collaboratively create 10 presentations a year. Your opinion on the topic might change pretty soon.
- Content formatting
- When it comes to certain types of content, like code samples for example, extra steps are usually required to make the code presentable. Syntax highlighting and code formatting is one of the most important aspects of presenting the code to an audience. Sure, you can insert the code sample as an image, but have you tried using the code from that presentation yourself? The ability to easily copy & paste the code from the presentation into your IDE makes life so much easier that it makes it sort of a requirement by itself.
- Content embedding
- Issues with special types of content do not end there. Working with various types of media can cause trouble as well. And it doesn’t matter whether you package your content as a part of the presentation or you pull it from the Internet as you go through. Changing screens and shifting focus from presentation to other applications is a common practice that makes the presentations less fluent and might cause the audience to lose the interest in the content being presented.
- Once you are done, you usually want to make your presentation available to your audience. The use of the proprietary formats makes this aspect of presentations a bit of a problem to atleast some portion of your audience. Once again this can be circumvented by the use of various online presentation sharing platforms or PDF exports.
Time to move on
Having made my case, let’s take a look at the ways you can avoid many of these pain points. As a part of the task I was working on I decided to look at HTML-based presentations. There are many options out there and if you are interested, check out Shower, deck.js, reveal.js, Google Slides, impress.js or others. I decided to go with reveal.js since it seemed to be the framework that best suits my needs. Working with it is simple and straight forward and since your are dealing with the simple HTML or markdown, you build your presentation fairly quickly. Not to mention other benefits like versioning, presentation being essentially a website that is easily displayed in most of the environments and easy to share with others.
I am not going to cover the specifics of working with reveal.js since they are nicely explained in the documentation. In order to create a presentation in reveal.js, you only need to work with a limited amount of files:
- The basis of the presentation.
- A directory containing a file with slides in markdown format, if required.
- A directory containing any media used in the presentation, if required.
and if you need to customize the template, effects or behavior, you will need to modify some of the following:
- Core styles without which the project does not function.
- Components that have been developed as extensions to reveal.js
And that’s it for the presentation creation. reveal.js provided a lot of extra features and has a solid community of developers behind itself. So big shout out to the folks that made it what it is today. To see some examples of the presentations created using this framework, head over to this list and pick a topic you find interesting.
The overall experience with reveal.js was great. Time it takes to build the presentation up and deploy it is short and doesn’t require an extensive knowledge. Even if you are not a programmer or lack the knowledge of HTML there is software that allows you to create for free. The number of plugins the community provided makes it a full fledged presentation solution that is on par with others mentioned in this blog post. I hope that this post will encourage you to give it a try and get back to me and let me know how it went. In the next post I will discuss how to take this one set further, cut down on the amount of files you need to manage and streamline the process of deployment and sharing of your presentations.