Synchronize Web-Based Presentation Slides with Impress.js and Impressr [Quicktip]

I’ve given talks about Web Development and WordPress at a few universities and schools and one common problem I face during a presentation is that the audience near the back of the crowd can hardly see my slides. I put some thought into this: how can I take the presentation slides clearer, yet keep the speaker and the attendees on the same page?

I’ve found one solution, which lets the audience watch the presentation slides on their own device, and a way to synchronize the slide contents on their devices, with what I want to go through while on stage. Here’s how to do this.

Creating the Slides

To do this however, instead of Keynote or PowerPoint we need to create the slide with Impress.js instead.

Impress.js lets you create web-based presentation slides and it comes with animation effects that are more impressive than what you can find on Keynote or PowerPoint. In fact, if you are a CSS3-savvy person, you can create your own customized animation (try the demo here).

"But, what if I don’t understand CSS, JavaScript, and HTML?"

Then, you can use Strut, a web-based application to create your Impress.js slides with GUI. The app is still in beta at the moment, but it is functioning well. You can insert text, image, or video by drag-and-drop, similar to Keynote or PowerPoint. You can also change the background, colors, font family and its size.

Once you have done creating your presentation slides, you can click the big green button on the right-hand side that says Impress. Then press Command + S (Ctrl + S in Windows) to save the the slides.

Synchronizing Slides

Now we will make the slides sync. The idea of using Impress.js to build the slides is to allow the slides to be accessible on laptop or mobile devices. The audience can also have a close up view, and even interact with the slides. As you walk through your slides, the changes you make to the slides (such as moving to the next slide) will be reflected on their devices in real-time.

To do this, you need a JavaScript library called Impressr.js. This library was published two years ago. Even so it still works fine and is very easy to use. Download the library, then add the following within the head tag.

 <script src="js/jquery.signalR.js"></script> <script src="js/jquery.signalRamp.js"></script> <script src="js/jquery.impressR.js"></script> 

Then, add the following to initialize Impressr.

 $("#slide-container").impressR({ proxyName: 'presentation' }); 

Make sure that you select the correct element that immediately wraps the slides. The proxyName option can be set to anything as long as it is a string (plain text).

Now the slide should sync in real-time in every device with your presentation open. Note that all devices require to be connected to the same network. To test it, you can open the slide in two different browsers. Here, as an example, I opened the slide in Chrome and Firefox.

You can also try it on mobile devices.