Professional Slides for Presentations

Everything you need you already have

In my last article I talked about the problems you face with presentations — now I want to show you a solution to many of those quarrelsome annoyances.

Just use this template, a simple text editor and run your slides in a Web Browser.

What does that look like?

Click through this demo presentation to get a feeling and a glimpse of what’s possible. Of course you don’t have to (and actually should not) implement everything that is shown here, but this demo covers many things most of you probably need.
Later, when making your own slides, you can open this demo (demo.html) in an editor and take ideas from it.

html5slidesDemo Presentation
(Press [F] on your keyboard for fullscreen)

How can I make my own?

All you have to do is download the small file below and extract the zipped folder on your computer, no need to install any additional software.

Download (.zip, 892 KB)

The content are a bunch of folders with HTML, CSS and Javascript files, but in fact you only need to edit two files:

  • slide_config.js is where the title and your name (or other contact details) are being stored
  • PRESENTATION.html can be seen as the content of your slides, your actual presentation

To edit the files just right-click on them and click “Open with”, then choose an editor.

slides-content editor

The editing (for beginners)

If you’ve never seen web code before, don’t freak out — because now is the time to get comfortable with it: Just take a look at the different slides, it’s nothing complicated – each slide is comprised of a <slide> and </slide> tag, it has headings and a few code examples for your content, e.g.

  • you can simply implement an image with an <img> tag or a video with <video>
    (Just copy your files over to the images folder)
  • make lists of items with <ul> </ul>
  • spice up your elements with different style or animation classes (e.g. class=”bigger auto-fadein”)
  • make use of the search function of your editor if looking for something specific (e.g. in the demo.html)

You can preview or run your slides by simply opening your edited PRESENTATION.html in your favorite web browser — as long as it’s a relatively modern one. (I’d recommend Chrome.) It doesn’t matter what operating system you are using (MacOS or Windows or Linux) — it can even be viewed on tablets or mobile phones, because it’s basically a website.

When taking your slides with you to another computer or uploading them to a webspace, always make sure to copy the entire folder.

Source & Kudos

This work is based on the presentation slides Google employees used in the past 2 years for their talks at Google’s developer conference (dubbed I/O). The original source files can be found here and were developed by HTML5 enthusiast Eric Bidelman whose talks (from 2013 and 2012) are a great and inspirational demonstration of what is possible with web technology nowadays.