A guide to web design

Flexible slide presentations

Presentations using a series of slides to be projected, often done with PowerPoint, is a common way to show supporting information in lectures and other kinds of presentations. These are often clumsily done, large in size, difficult to see in other contexts and hard to make a print copy of in an efficient format.

Using html to prepare slides is a way to save on space, the cost of software and to simplify the preparation of them in an effective and efficient way.

The Bill of Rights is a model of how it can be done.

Bill of Rights - screen shot
Screen shot of first slide.

Because they are html files, they can be, if formatted well, viewed on phones, tablets of all sizes, desktop computers and flat panel displays. as well as projected.

In addition, it allows the author, using a print style sheet, to format the slides for printing in an easy to read and use format, as in the illustration below:

Bill of Rights
Screen shot of first print page.

The main differences betwen the two style sheets are font size and weight and padding in the <nav> tag.

In the screen style sheet the <nav> is set like this:

nav{font-size:100%;font-weight:900;padding:2em 0 60em 0}

And the print style sheet the font size set at 12px and normal weight and the <nav> is set like this:


This site is also accessible to the blind and can be navigated with keystrokes, as well as a mouse or touch, depending on the device used.

Working in this way with html, it is possible to make the slide presentation available to everyone in what ever format they want to use, in file that is only 5.8K, so it makes minimal demands on the nework and local storage.

Here are examples of different presentations, both including images and with only text.

Education web


Font embedding