Go to the profile of Julia Kulgavchuk
Julia Kulgavchuk
ars schematica

Presentation in the Browser (PITB)

This text describes a format for presentation materials that is better than slides. I came up with it while preparing for a client presentation and pondering over what I actually need for a presentation. The prototype for a template that I made is here.

What is needed for a presentation

Those classic PowerPoint slides, who are they for? Partly for the audience, partly for the speaker. Audience gets to see the materials that support the talk; for the speaker, the slides serve as a plan of the talk and give prompts.

There are templates with spectacular graphics and animation that help to make a bold visual statements and to anchor the attention of the audience. But suppose you need more than to create a wow effect. You need to tell about some complex work you’ve done and to illustrate your talk with some materials. Perhaps you want to discuss these support materials with your audience, to click around, show this and that. You’d definitely benefit from some interactivity. I’m writing this as a UX designer, so discussing an ongoing design project is an example that I have in mind. Support materials in this case might include:

  • images
  • graphs
  • videos and animation
  • links
  • spreadsheets
  • good old text, short and long
  • whole documents in external files

When a talk evolves around a few pieces of support material, what helps it flow is structure, good overview and smooth movement between parts. An appropriate layout compliments your content.

The content that I listed can be put on slides. You can insert images, add links, embed videos and animations. What will probably be missing is consistent layout where all different content types fit appropriately. How about visible structure, clear overview and smooth movement between sections? No. What you have is a linear sequence of slides that you can access one by one. This is not enough.

Old lantern slides

When do we need presentation materials?

When is it all used? There’s the time of presenting, and then there’s all that follows.

I’m talking about the kind of presentations where there’s an intention to put all these materials into work. So for all that follows the time of presenting and discussing, the format should allow to use these materials in a convenient way. The slide format is far from being optimal, especially in a case when someone else, not you the presenter, has to do the work.

I don’t believe in presentation slides as a deliverable, which is sadly a widespread practice. If a report is expected, its format should allow for it being read and put into action. If there is any complexity in the results of your work, than an A4 pdf report would do better than a thick stack of slides. Why? Because slides:

  • lack structure;
  • lack overview;
  • lack functionality to quickly move back and forth between parts;
  • lack layout where different content types fit appropriately and consistently.

All in all, slides poorly represent the complex work you’ve done. (If you need rich interactivity, then a pdf report is not much of help either.)

So the answer to the “when” question is that slides are meant only for the process of presenting, because they are not convenient to use in further work. And for the process of presenting they are no good either for the same reasons listed above.

Then I don’t have to present with slides! It’s been more than 25 years now that they’ve been ubiquitous, but they don’t have to be. There are cases when they are not good enough, and for these cases we can find a better format.

This is also a slide

What can replace the slides?

Perhaps you talk for 15 minutes; perhaps you lead a 5-hour workshop. You make a number of statements and you support them with some materials. If you have to make some kind of report, you’d have it all neatly wrapped there. But you might not be there yet; it could be a midterm discussion. In any case, when you present, it’s not a social report reading session. You are telling your thing and showing all those images, graphs, videos, links, spreadsheets, websites, long and short texts, external documents.

You need a frame for all these items, a frame that:

  • allows you to create a visible structure for your talk and materials;
  • gives a good overview of the whole presentation;
  • provides functionality to smoothly move back and forth between parts;
  • provides a layout where different content types fit appropriately and consistently.

This frame is a browser. Long story short, you can present from a browser using a web page instead of slides. Can’t you have a web page that has different images, videos, texts and links and looks good and is easy to navigate? We’ve seen those. That’s what web designers work on daily, and by now they’ve learned a lot about how to do it.

Here’s what it can look like. There are numbers and titles for each point you want to address, followed by boxes, or cards, containing all support materials for that point. All cards are numbered. Clicking on a card opens its content, be it an image, a text, a link, a file etc. The character of interaction is customizable (where it opens, how you close it, how you move between cards). Layout and look are highly customizable; here’s a version that works for me. What’s on the card — text, previews or icons for different content types — can also be changed (to my prototype I’d definitely add visual indication of content type: video, pdf, link etc.).

A quick example of a presentation in the browser (PITB) — a fragment

This page is a clear visual board for several types of information. These cards are better frames for diverse content than slides.

When a card is opened, it no longer tries to contain everything within itself. You can build it so that it opens another tab or another program that’s best for interacting with that particular content format. The content and interactions are no longer restricted by the slide format.

The overview page makes use of a great property of card-based interfaces: their uniformity and regularity. The diverse pieces of content are wrapped into something consistent and it tones down the diversity.

When you present, you have this page opened in the browser and just click one card after another. The cards do whatever you programmed them to.

… Whatever you programmed them to.

This presentation template is made with HTML, CSS and JavaScript. There’s a JSON file containing links to all support materials, local and on the web. This file is the only thing you need to edit when making a new presentation. It’s really easy to edit — it’s just a text file. If all support materials are kept in the same folder, it takes no time to link to them.

For each new presentation all you need is to make a new JSON file.

A good overview

Overview

With PITB — presentation in the browser — you have it all in front of you. You and your audience can easily how far you are, how heavy your points are. In PowerPoint or Keynote you have a column with slide previews, one in a row. With a couple of hundred of slides it’s not that easy to navigate. You can switch to tile layout in PowerPoint at least, but I don’t think that it solves the problem. That tile view shows the internals of the system; it’s not the clean presentation mode. There’s still no structure and no means to fit in several diverse content types.

Does PITB allow to create a visible structure for your talk and materials? Yes. There are headers and numbers.

Can you move smoothly back and forth between parts? Yes. You might need to scroll a little, but it’s so much better than moving one slide at a time. Where was this graph I just showed? Let me just flip 27 slides back one by one… With PITB it doesn’t happen. You just click on another card right there on the same screen.

Does it provide a layout where different content types fit appropriately and consistently? Yes. It places no restriction on the content itself and does not try to own the content.

There are a couple of tools for making slides in the browser (1, 2), but what they do is move slides from PowerPoint to the browser in order to not depend on specialized presentation software. The idea of PITB is to move beyond the slide format altogether.

A slide is essentially a frame for you content. However not all content can be there and interactions with it are limited. Browser is a better frame that meets the actual needs. It’s not greedy. It lets your content be where it thrives best.