The rectangle behind you

Why I do my presentation slides in HTML, and so should you

I code all my presentation slides in HTML. A slide from a full-screened browser can look exactly like the one from PowerPoint, and I love the flexibility that HTML slides give me. Every usual way — PDF, Keynote — and you’re bound to bounce off the limitations of other programmers. With your presentation being an app, you are working with a universal Turing machine: if you need anything, anything at all, you can build it yourself.

Which is incredible.

Here are some quick examples:

Examples of HTML slides I made: iframes with embedded websites; editing fields on the fly; interactive sliders to modify content on the slide

More advanced HTML slides: a nice programmatic screen saver background that is different every time; a voting system allowing the presenter to assign scores to two teams in the audience; an interactive coding demonstration happening on screen within the confines of a slide

A starting point

For me, it all started with IE6. Not kidding! You see, Internet Explorer 6 was the first browser I used that offered full screen — absolute full screen, with all of the pixels devoted to content.

Today, all of the browsers have an immersive full-screen mode, and the sky’s the limit.

Doing a presentation in HTML doesn’t necessarily mean going into a text editor and writing markup and CSS and JavaScript from scratch. The simplest on-ramp to HTML slides is designing them elsewhere (PowerPoint, Keynote, Photoshop), and then exporting as images. This is usually a no-go in web design, but your deck only serves one purpose here — to appear behind you onstage — and it doesn’t have to be perfectly maintainable and accessible!

Here’s a good starting point: an example of simple slide deck with a few images… and also a few things Keynote won’t give you:

Simple presentation
Slides · Code

A few slides from the example simple presentation

Those things are:

• an embedded iframe with a website you can interact with during your presentation
• a simple interactive slider that changes the speed of a video
• a slide with piece of content you can freely scroll through and edit as you go along (including syntax highlighting)
• a custom, programmatic transition
• one later slide designated to be a skip slide

And this is just the beginning. There are so many more benefits of doing your talk in HTML.

Grab the above presentation, try to edit it, and let me know how it goes!

More fully fleshed out slide decks I used

I treat all my presentations as prototypes. The code is good enough just so that it works one time, under very specific circumstances:

• support for one specific browser (early on, Internet Explorer 6; then Safari because its transitions were much faster than other browsers; now usually Chrome)
• one specific resolution (I ask conference organizers about it in advance)

I don’t build my slides to be shareable, since I don’t think sharing slides alone, without me talking, makes much sense.

However, I will share some with you right now:

“Good is the enemy of great”
Smashing Conference Freiburg talk, 2014
Video · Slides · Code

“The secrets of Google Pac-Man: A game show”
Google I/O talk, 2011
Video · Slides · Code

The rectangle behind you, a series of articles about interactive presentations.

By Marcin Wichary (@mwichary)