Writing presentations with impress.js

Yap, it was not a mistake, I intentionally titled this article 'Writing presentations...' instead of 'Designing presentations...'. As impress.js let's you create CSS3 / HTML5 based presentations and there is no sophisticated editor available so far, it is more about writing the slides than designing them.

To be fair enough, there are some quite promising editors, like impressionist, arising on the horizon but it is more about showing future capabilities. But as the developers made good progress so far, I expect the tools to be practically useful in short time. And there is no need to do a pros and cons discussion about this or that tool here right now.

I came to using impress.js in somewhat like an unexpected manner. When I was about create a presentation for my submitted talk at JavaZone 2012 I had a discussion with my boss on reusing existing slides from another presentation he held about the same topic. During the creation of that set of presentation slides, he had asked me to insert some more flexible effects beside just switching from slide to slide. For example, he wanted to zoom into a particular part of a diagram and show more information on that detail. After having a short fight with Microsoft Powerpoint, I managed to give him something which came close to his wish, although I must admit that I was quite unhappy with the result.

So, when we talked about those slides, he gave me a hint on impress.js. He told me, that it looks quite promising concerning more flexible effects ... but - and here comes the drawback - it also looks as if it is much more work to accomplish desired results. Since I really dislike old-fashioned boring Powerpoint slides, I decided to give it a try and downloaded the impress.js package.

When I started the intro presentation that comes along with the framework, I was stunned as it was the first time for me to see something dynamic in the browser which is not powered by some Adobe flash plugin. It was then when I decided to write the next presentation using impress.js. As I am a quite lazy guy and tried to avoid learning some new CSS3/HTML5 features, I tried out several visual editors like impressionist. But as I wrote above, those were promising but not quite useful for a larger presentation. That was the reason why I put the impress.js framework back to its dark directory somewhere on my HDD. Again, it was my boss who brought me back to the framework as he asked me, if I made any progress so far... :-)

I reopened the text editor and Google Chrome some weeks after downloading impress.js and started to write my presentation. At first it took me quite a while just for setting up the two starting slides but as more slides were created, the faster I became in writing them :-)

I must admit that there are probably a lot more effects available and not being used in my presentation and probably my HTML/CSS is not the best seen ever, but the results are a good fit for me ... and hopefully for my audience as well :-) Beside that, writing the slides by hand helps to understand the basic ideas of this technology and leverage all possibilities available.

For trying out impress.js by yourself, simply visit the projects github page, download the project as ZIP file, extract its contents and open the index.html page with a current Chrome version. As the HTML code contains a very good inline documentation, read its content and you will be able to make the first steps quickly. Enjoy it :-)