Richard Milewski's

Simple HTML Slides

An Experiment In Helping Users Move From
Powerpoint & Keynote to Standards-Based HTML.

Inspired by Atul Varma's "Magic Ink" blog post & htmlpad slides.

Click on the next slide or press →

Easy-To-Use

Simple Slide Controls

  • Click on a slide to center it.
  • Use ← and → keys to change slides.
  • Slides zoom based on available window size.
  • Click outside slides or use ↑ key to return to the first slide.
  • Use ↓ key to move to the last slide.

Works with Most Modern Browsers

Supported browsers:

Firefox Safari Chrome Opera

IE-10 might work, but hasn't been tested.

Some themes are not well supported by Opera.
(Background image gradients and multiple background images don't appear to work).

Easy to Edit

  • Designed to be Edited by Users, Not Web Developers
  • Very Simple HTML File Structure
  • Easy-To-Read, Heavily Commented HTML
  • Most CSS and All Javascript in Linked Files

(Take a peek at the page source to see for yourself!)


Easy to Edit

Pre-Defined CSS Slide Classes

<div class="slide blue">
    <h1>Slide Title</h1>
    <div class="slideBody highlight">
        Slide contents (any HTML)
    </div>
</div>


"slide" - starts a new slide
"blue" - sets the background gradient color

"slideBody" - adjusts elements downward
"highlight" - applies background highlighting

Other Predefined Classes

<div class="autobox highlight">
Creates a centered box (like this highlighted one) that adjusts to fit the width of the contents.

Text Manipulation Classes:

  • centerText - Centers text
  • tinyText - Makes Text 60% of normal size.
  • smallText - Makes Text 80% of normal size.
  • bigText - Makes Text 125% of normal size.
  • biggerText - Makes Text 150% of normal size.
  • biggestText - Makes Text 200% of normal size.

Predefined Classes for

Multi-Column Layouts

<div class="row">

<div class="twoColumn highlight">
</div>

<div class="twoColumn highlight">
</div>

</div>
<div class="row">

<div class="threeColumn highlight">
</div>

<div class="threeColumn">
</div>

<div class="threeColumn highlight">
</div>

</div>
<div class="row">

<div class="threeColumn highlight">
</div>

<div class="twoThirds highlight">
</div>

</div>

Images are Easy


Adaptive Sizing

<img class='slideimage' src='path-to-image' >

'slideimage - fits the image onto the slide.
Works inside 2 and 3 column layouts too.

Slide Themes

Quickly Switch Between Ten Different Slide Themes

Keys 1 through 0 apply pre-defined themes.

CSS theme definitions are are in a self-contained file. Replacing slide-themes.css changes all theme definitions without requiring changes to the HTML presentation.

Anonymous Sync

  • Users can take control of the presentation.
  • Other users browsing the same URL can follow as the controlling user changes slides and switches themes.
  • Synch service is anonymous. Only an MD5 hash of the URL and presentation control commands are sent to the server.
  • JSON Sync Service need not be hosted in the same domain as the presentation file.
  • To take control: press ESC.
  • To follow: refresh the page after someone takes control.
  • To stop following: refresh the page again.
  • To relinquish control: press ESC.

Mobile devices can be used as presentation remotes.


Download the Anonymous Sync Server source code.

Collaborative Editing

For a collaborative editing environment,
try Atul Varma's htmlpad.org


Copy the Slide Examples as a starting point, and paste them into the EtherPad.

Leverage HTML5/CSS3 Advances

Include Rich Media


Things As Yet Undone

  • Powerpoint-style slide builds.
  • Automatic timed sequencing.
  • Random access slide selection.
  • Built-in Skywriter (Bespin) editor.
  • Multiple control channel separation.
  • Control of slave's video from master.
  • CSS extensions for handouts & notes