As a frequent presenter in various venues, I always have an eye out for new and unique tools for doing presentations. Gone are the days when PowerPoint ruled the presentation ecosphere.
A favorite among WordCamp presenters is SpeakerDeck. It’s great because it has some really useful social sharing options. You can follow “speakers” and get notified when they add new presentations. The major limitation though is that it’s just a shareable, public space to upload your PDFs or PowerPoint slides.
Another really awesome online tool is Prezi.com. It’s just about the most visually incredible slideshow tool you’ll come across. Some folks say the crazy zoom out and in and around effects actually detract from the presentation itself — as if PowerPoint NEVER does that!?
But it’s true, with every powerful tool, there’s the opportunity to exploit that power to horrible effect.
What’s great about Prezi though is that it also let’s you organize your thoughts for a presentation more like a mind-map, rather than just a linear one-way story. There’s solid research and usability testing behind it’s methods. That’s why they offer free accounts to educators and students.
In Steps SLID.ES
But lately, I’m smitten with Slides.com (or slid.es). If you are looking for a tool to create a simple and clean presentation online, this rocks. But if you want to present that presentation on a WordPress website and have it look awesome on all browsers… it REALLY rocks.
Slides.com was made specifically to be a responsive, online presentation tool.
Slid.es + FooBox
Now combine Slid.es with our FooBox lightbox plugin for WordPress and you’ve got something really off the charts. FooBox, as you may know, now can load up external html content. Many users were really excited about this feature, and rightly so.
Soon after the release of FooBox 2.0 I fielded quite a few support tickets on using the “iFrame method” to load external content.
Because FooBox is responsive, many users thought the content in the iFrame would fit perfectly on all screen sizes automatically. We wish that were possible.
If FooBox could magically make all HTML content instantly responsive, we’d put a lot of web developers out of business!
So what FooBox does is add some really discreet scroll bars into the lightbox so you can see all of the content both vertically and horizontally.
For example, here’s the New York Times in FooBox.
The New York Times is a fairly responsive site, meaning you won’t see a horizontal scrollbar at the bottom of FooBox there at all. But you do see a vertical one so that you can scroll down to the rest of the content.
But that scrolling — either vertical or horizontal — would ruin a presentation right out of the gate.
That’s why Slides.com is so awesome. It’s really, truly, fully responsive.
How to Use Slides.com on Your WordPress Website
So slid.es has two embedding options: (1) A url for social sharing; and (2) an iFrame embed code for embedding in an html page. Because I’ve been talking about FooBox and the iFrame method, you might think you’re going to use that. But nope, it’s even easier.
All you need to do is grab the url of your presentation, link to it and add target=”foobox”, like this:
BAM! Done! Notice that when you resize the browser, you still never see a horizontal scrollbar. Slides.com responds to the width of the browser and gets the whole presentation in there no problem.
Of course, since you are using a commercial product, they add all the extras that you can see below the presentation, which means there are vertical scrollbars still, but they don’t affect the usability of the slideshow at all, which is nice.
But, what if you didn’t want to have all that stuff added to your presentation? You just wanted a fully responsive, slideshow without any branding, without any horizontal OR vertical scrollbars?
Reveal.js Gets it Done
Slides.com is basically an online user interface for creating presentations and displaying them with this really awesome jQuery library called reveal.js.
So if you want to have an awesome, responsive presentation and show it in FooBox without ANY scrollbars at all or advertising or branding, then use reveal.js. Like this:
That’s the same exact presentation, but using reveal.js instead of slides.com. Go ahead, resize your browser, stretch it, pull it. Pretty awesome, right?
The setup for this is fairly straight forward, but you won’t be able to drop code into a post or page in WordPress. Instead, you’re creating a static page within your site, then pointing FooBox to that page. As you can see, the end result is REALLY slick, so if you have the chops for it, it’s a great way to go.
Oh Wait… there’s a Plugin for that
Yes, someone also ported the reveal.js code into a WordPress plugin and called it their very own. It’s in version 0.2.4, so it seems very untested and seems very focused on making the presentations compatible with Leap Motion. If that’s your thing, feel free to try it out.
All I know is that slides.com and reveal.js are really reliable and robust, and this is so far the easiest and slickest way to display them on your WordPress site.