Making points without PowerPoint

Issue 22 of The Sensible Internet Design Newsletter follows.

As always, you can catch up on back issues in the archive, or subscribe free to get future mailings. Read on for this issue in its entirety ...

Making points without PowerPoint

Necessity is the mother of a non-Microsoft solution ... not that there's anything wrong with that ... how a simple slide show becomes a lesson in information design planning.

I recently needed to develop a set of PowerPoint-style presentation slides,
minus the Microsoft PowerPoint program. In case you ever need to do this, you
are about to learn how I built my slide template set as a reusable mini-Web
site. Then you can download this template set for your own uses and (no doubt)
improvements.

Before we get started, though, please don't get me wrong. I like PowerPoint
and use it often. There's nothing at all improper about using it to build a
presentation, as long as you're certain you will have control over the computer
and display you will use to deliver it. In this case, however, I'm to be one
of several panelists in a Web design session (at the Newspaper Association of
America's Connections
conference in Orlando next week).

If you've ever served as a discussion panelist or even just attended a panel,
you know the following scenario is dead-on. In a session where every panelist
will have at least a few visuals to project on a screen, one of two things can
happen:

1. Everyone brings his or her own laptop computer, each with slightly different
   display characteristics. The session then devolves into frantic efforts to
   switch projector connections from one machine to another, and almost without
   fail, at least one person's machine simply will not run on the house audio/visual
   systems.
2. Everyone agrees in advance to submit simple, compatible slides so we can
   all show our visuals from one computer, loaded in advance and tested with
   the a/v equipment.

Our group agreed to option 2, thank goodness.

Even so, I could have used PowerPoint to build the slides, then just exported
the whole thing out using the "Save as HTML" option built into every
PowerPoint version for the past five years or so.

But that option generates a bulky, frame-based minisite containing JPEG-compressed
images of the slides themselves. Sometimes that compression leaves the text
on the slides looking, well, compressed. And the minisite carries a lot of scripting
overhead that tends to favor certain Microsoft-brand browsers over their competitors
(gee, I wonder why?).

I was on a quest for browser-based slides that would be clean, easy to read
and compatible with any number of browser/operating environments. The PowerPoint
export solution didn't fit.

Slideshow architecture

Though I had a mental picture of how the slides should look (based on, of course,
an existing PowerPoint template), before starting the graphic design I spent
some time contemplating the architecture and requirements of a computer-based
presentation, including:

• Types of slides. Most presentations need at least a title slide, one or
  more bullet-point slides, one or more slides that combine bullet points with
  example images, and an ending "Thank You" slide.
• Text hierarchy. All slide types would require a heading and at least three
  layers of bullet styles, plus miscellaneous text elements such as signature
  lines and slide footers.
• Positioning. Ideally, a bullet slide template should be able to carry an
  image (such as a screen grab) easily, gently pushing aside any bullet text
  without blowing out the whole thing. Further, an image placed on a slide that
  will be presented within a Web browser should scale with the display resolution
  of the computer used -- something PowerPoint does automatically. And if the
  image is removed from the slide, everything else should snap back into its
  proper position.
• Controls. A presenter needs simple ways to move through the slides. A slide
  in the middle of the "deck," for example, should at least have buttons
  to advance to the next slide, go back to the preceding one, or go back to
  the title slide.
• Visual elements. I kept these deliberately plain -- a black bar behind slide
  headings that fades into the gray background color, slide headings in bright
  red, a 3D-looking pointer icon for the top-level bullets, and a company logo (you may prefer to use your own :-).

Even if you never need a slide template set, this planning process might still
provide food for thought in your design work. Though these requirements are
simpler and different from the architecture you would expect for a content or
commerce site, you can see how it pays in saved time to think these things through
on any project before starting to lay out pages in HTML.

CSS to the rescue

That HTML, in fact, turns out to be pretty darned simple -- a few headings,
unordered lists and plain paragraphs organized in a basic set of page divisions.
Most presentation slides you'll see are designed the same: top-to-bottom, left-to-right.
The only objects in my templates to break that model are a logo, which I want
to keep in the upper right corner, the control buttons, which I want right below
the logo, and any example images I might use on specific slides.

Cascading Style Sheets handle all of the positioning requirements with ease.
My HTML documents need no tables to put things in their proper places. And the
CSS file itself is organized by attribute types: all the color calls are in
one place, all the typography controls in another, positioning in another and
so forth. That's a trick I learned from dissecting the CSS work of my friend,
Adrian
Holovaty, who incidentally will serve on the same panel discussion.

And the CSS setup applies font effects, bullet effects and positioning based
on context, so I'm not dropping class="thisorthat" attributes
into every text element. For example, the templates use simple HTML unordered
lists to generate three outlined layers of bullet points. The "outside"
or top layer bullets are red triangles I created as GIF images. The lower two
layers get closed and open circles as bullets, generated from the HTML instead
of images.

But I don't have to declare classes for each level of unordered list. Here's
how the styles look in the CSS file:

#bulletpoints ul, #bulletpoints ul ul, #bulletpoints ul ul ul { margin:
0 20px 0 40px; }
#bulletpoints ul li { font-size: 30px; line-height: 31px; font-weight: normal;
list-style-image: url(../images/template/red_arrow.gif); margin: 8px 0 8px 0;
}
#bulletpoints ul ul li { font-size: 24px; font-family: times new roman, serif;
font-style: italic; line-height: 25px; list-style-type: square; list-style-image:
none; }
#bulletpoints ul ul ul li { font-size: 18px; font-family: tahoma, verdana, arial,
helvetica, sans-serif; font-style: normal; line-height: 19px; list-style-type:
circle; list-style-image: none; }

Within the page division with the ID "bulletpoints," all unordered
lists will pull in from the right side 20 pixels, and the left 40 pixels (that
extra space on the left allows room for the bullets themselves).

The top-level bullets have a list-style-image attribute that pulls in the red
arrow. Note how the styles for the lower-level bullet lists "cascade"
as I nest them inside higher-level lists. Here's sample HTML to that effect:

• This is a bullet point
• This is another bullet point
• This is a level 2
  bullet
• This is a level 2
  bullet

• This is another bullet point
• This is a level 2
  bullet
• This
  is a level 3 bullet

• This is another bullet point

In a Web browser, open any of the bullet slides in the downloadable template
set (link below) to see how this looks.

Making sample images optional and flexible

Nothing's worse than sitting through a presentation that's just a steady stream
of imageless, bullet-point slides, right? PowerPoint makes it very easy to add
images and even simple animation to slides that will be presented from within
the PowerPoint environment. In a Web slideshow, short of building a Flash movie,
it would at least be nice to have an easy way to add screen shots and other
sample images.

Again, contemplating architecture before starting design saved some hassles.
It would be very easy to just drop in a page division as a container for a fixed-size
image -- if the image tag is present, the image pushes the text aside, but if
not, the slide text flows across the space normally.

Trouble is, a fixed-size image and surrounding text may look great at a certain
monitor resolution, say 1024x728, but what happens if you try to show that slide
on an 800x600 screen?

Though I'd almost never do it for a general-interest Web site (letting a Web
browser scale images is seldom a good idea), I solved this problem by using
a screen-width percentage for slide images. No matter what size or resolution
the browser window, the image will always be 62 percent of its width. (Why 62
percent? Because I like to size screen grabs to 640 pixels wide by 480 high,
and that happens to be 62 percent of the width of a 1024x768 display -- which
happens to be the resolution used most often for projecting presentations these
days.)

In a Web browser, open Slide 3 (file name 003.html) from the downloadable template
set to see how this looks.

Control buttons

The buttons to move from slide to slide are nothing more than HTML anchors,
styled to be button-size block elements in the CSS, and floated beside each
other. Because the file names of the slides in the template are simply numbered,
I hand-coded the links to preceding and next slides.

Things I didn't get around to

The one huge shortcoming of this template set is the comparative difficulty
you would face changing the order of slides once you have content on them. That's
very easy in PowerPoint, because the slideshow reflows automatically as you
move whole slides around. With these HTML pages, the links to preceding and
next slides are hand-coded in based on the serialized file names. So you can't
change the order of pages without fixing the control-button links. Remove a
slide from the flow and you have to reorder every slide that follows.

I'd be delighted if any loyal TSIDL readers have a good tool to make this easier
-- but remember, one of the goals here is that the slideshow be portable. Scripting
would likely be limited to Javascript, because the presentation needs to run
equally well from a Web server, the disk drive of a laptop or a home-burned
CD-ROM. That means server-side scripting is pretty much out of the question.

I was also hoping to find or build Javascript that would do these things:

1. Read and parse the file name of the current slide.
2. Use the current slide number and simple addition and subtraction to populate
   the links to next and preceding slides.
3. Include a pull-down list with all available slides.
4. Preselect the current slide in that pull-down list.

But my template isn't quite that automatic -- yet. After all, the presentation
I built this for will be only a handful of slides. You are welcome to download
the full template set (a 57 kb Zip archive) at http://smallinitiatives.com/whatwevedone/presentations/html_presentation.zip.
Use it as you choose -- then, please, pick it apart and write to tell me how
you would make it better. I'd love to report all your comments and enhancement
ideas in a future newsletter.