Public speaking and giving presentations are stressful enough for most folks — why add to that with complex software and worries about platform compatibility? If you know a bit about HTML and how to work a browser, S5 is a standards-based slide show system that can take the hassle out of creating presentations.
The last few years I’ve spent more time than I care to think about creating slides using Impress and other presentation software. While Impress has its proponents and it’s a great replacement for people who’ve gotten used to using Microsoft’s PowerPoint, I don’t like using it much at all. It’s clunky, heavy, and really sort of intrusive. I’m glad it exists for folks who want a PowerPoint alternative, but I’ve wanted something much simpler.
S5 is the opposite of Impress or PowerPoint. No GUI, all text. You use HTML to create your slides and use a pre-written system of CSS and JavaScript to use your browser to display your presentation. If you have a computer with Firefox, Chrome, or another standards-based browser that has good CSS/JavaScript support. (So, you might want to give IE a miss.) S5 is all about HTML. Well, HTML, CSS, and JavaScript. But really — you only need to know HTML. And only a tiny bit at that. Let’s take a look at what you need to know.
Starting with S5
Head over to the Eric Meyer’s site and grab the most recent zipfile. Unfortunately it’s not linked on a simple download page, so look for “zip archive” on the page. Download that and unzip it into a work directory.
You’ll see a pix and ui directory, as well as a file called s5-intro.html. You’ll want to open that in your browser of choice and open it in your editor of choice as well. This file contains the basic info your browser needs to read in the CSS/JavaScript to make it work well, and the text for all of your slides.
Scroll down a bit to the first line that says <div class="slide"> and you’ll see something like this:
<div class="slide">
<h1>S5: An Introduction</h1>
<h3>Eric A. Meyer</h3>
<h4><a href="http://www.complexspiral.com/">Complex Spiral Consulting</a></h4>
</div>
Pretty straightforward HTML, right? (Technically, XHTML.) All you need to really know to produce a standard slide are the header (h1, h2, h3, etc.) and list (ul, ol, and li for each bullet) elements. Adding images is as simple as using the img element. Yes, it’s just that simple.
You can, of course, use standard markup in the presentation. So you can produce bold, italicized, or underlined text, and so on. If you get fancy and edit the CSS, you can even produce more text effects depending on what you add and what your browser supports. Using the current crop of Firefox 4 betas or Chrome, you ought to be able to do some pretty nifty stuff. Even better, you can easily add video or audio to your presentation as well.
Want to see what it’s like to give a presentation, and/or practice? Hit F11 to enter fullscreen and click the mouse or hit the right arrow key. That’s all you need to do to move forward. To move back, use the left arrow key. Another way to navigate through the presentation is just to hover the mouse in the right hand, bottom corner. You’ll see a navigation menu pop up and can navigate left and right, or select your slides from the menu. A full list of keyboard controls is available on Meyer’s site.
All you need to do is edit the HTML to add your own slides (and remove the existing ones) and use standard elements for bullets and headings. If you want to add images, you can do that as well. Obviously your images will need to be presized correctly for appearing in the browser window. Since S5 works in a fullscreen browser, if you’re going to be using a standard projector you probably want to aim for 1024×768. If you’re lucky enough to be working with a projector or display that supports higher resolutions (or maybe making a slideshow to be used online) then the good news is that S5 should scale well.
Note that S5 also has an outline view, so you can easily print out the presentation or eyeball the outline to practice without seeing the full slides.
Theming and Limits
Now you may not wish to use the standard S5 theme. And I don’t blame you — when giving a presentation, you want to have a theme that reflects your personality and topic. You’ll find a handful of themes on the site, and you can also hack together your own theme.
To work with the themes you’ll want to edit the pretty.css and possibly the framing.css files under the ui/default directory. You don’t want to tweak the other CSS files unless you really know what you’re doing. You can make all the changes you need to make the slides your own using the CSS that’s meant to be edited. See Meyer’s file map for more info on each file.
Obviously, S5 has a few limits compared to Impress or PowerPoint. It’s not as easy, or possible in some cases, to do image-heavy presentations with a lot of fancy transitions or complex layouts. If you want to go gonzo and do something really graphics heavy, it might be better done in another application.
But if you need simple slide layouts without all the complexity of a full-blown presentation app, S5 is probably more than sufficient.
Other Minimalist Slide Systems
Just as Impress isn’t for everybody, S5 isn’t for everybody either. You’ll find Slidy for creating slide shows in XHTML, Beamer which is a class for LaTeX, and Slidedown for generating HTML slides using Markdown markup.
There’s also a new slide application in development for GNOME called Ease that might be a good choice if you prefer a GUI but without the complexity of Impress. Another one, called Glide is also in development, but I’m not sure that it’s got the momentum to be successful.
Summary
The point is, if you’re on Linux, Impress is not your only hope for presentations. You’ll find plenty of options for minimalist systems that stay out of your way. Take some time to work with S5 for your next presentation. The first time out of the gate it might take a bit more time to do a presentation with S5 (assuming you customize the theme) but after that if you’re comfortable editing HTML it will almost certainly go faster.
