Book Image

Building Impressive Presentations with impress.js

Book Image

Building Impressive Presentations with impress.js

Overview of this book

Everyone has had to present during their lifetime. We've all spent agonizing hours trying to make those PowerPoint presentations engaging. Well now there is a tool that will make those presentations look like child's play. Impress.js is a powerful library that eases the task of creating presentations with smooth animations without depending on a software tool. You are no longer limited to desktop tools as these presentations run on any supported browser anywhere on the Internet. "Building Impressive Presentations with impress.js" is a quick guide to creating professional presentations using the best aspects of CSS3. It will also guide you through several practical examples which go beyond the conventional slide-based presentations, covering each aspect of the Impress library. From simple presentations to your own personal website this handy practical guide will ensure you get the most out of Impress.JS as quickly as you can. Starting with a simple slide-based presentation we move quickly on adding in sliders, galleries and portfolios to utilize this amazing tool. 3D transitions, rotations, scaling, and transforms are also covered to give your presentations that something extra. The final step is bringing all this together to create a personal website that is viewable on all impress supported browsers. "Building Impressive Presentations with impress.js" gives you the chance to stand out from the competition and engage with audiences in a way you never have before.
Table of Contents (14 chapters)
Building Impressive Presentations with impress.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Why is it important?


You must be wondering why we need to care about such a framework when we have quality presentation programs such as PowerPoint. The most important thing we need to look at is the license for impress.js. Since it is licensed under MIT and GPL we can even change the source codes to customize the framework according to our needs. Also most of the modern browsers support CSS transformations, allowing you to use impress.js, eliminating the platform dependency of presentation programs.

Both desktop-based presentations and online presentations are equally good at presenting information to the audience, but online presentations with impress.js provide a slight advantage over desktop-based presentations in terms of usability. The following are some of the drawbacks of desktop program generated presentations, compared to impress.js presentations:

  • Desktop presentations require a presentation creation software or presentation viewer. Therefore, it's difficult to get the same output in different operating systems.

  • Desktop presentations use standard slide-based techniques with a common template, while impress.js presentation slides can be designed in a wide range of ways.

  • Modifications are difficult in desktop-based presentations since it requires presentation creation software. impress.js presentations can be changed instantly by modifying the HTML content with a simple text editor.

Creating presentations is not just about filling our slides with a lot of information and animations. It is a creative process that needs to be planned carefully. Best practices will tell us that we should keep the slides as simple as possible with very limited information and, letting presenter do the detailed explanations.

Let's see how we can use impress.js to work with some well-known presentation design guidelines.

Presentation outline

The audience does not have any idea about the things you are going to present prior to the start of the presentation. If your presentation is not up to standard, the audience will wonder how many boring slides are to come and what the contents are going to be. Hence, it's better to provide a preliminary slide with the outline of your presentation.

Tip

A limited number of slides and their proper placement will allow us to create a perfect outline of the presentation.

Steps in impress.js presentations are placed in 3D space and each slide is positioned relatively. Generally, we will not have an idea about how slides are placed when the presentation is on screen. You can zoom in on the steps by using the scaling feature of impress.js. In this way, we can create additional steps containing the overview of the presentation by using scaling features.

Using bullet points

People prefer to read the most important points articles rather than huge chunks of text. It's wise to put these brief points on the slides and let the details come through your presenting skills. Since impress.js slides are created with HTML, you can easily use bullet points and various types of designs for them using CSS. You can also create each point as a separate step allowing you to use different styles for each point.

Animations

We cannot keep the audience interested just by scrolling down the presentation slides. Presentations need to be interactive and animations are great for getting the attention of the audience. Generally, we use animations for slide transitions. Even though presentation tools provide advanced animations, it's our responsibility to choose the animations wisely.

impress.js provides animation effects for moving, rotating, and scaling step transitions. We have to make sure it is used with purpose. Explaining the life cycle of a product or project is an excellent scenario for using rotation animations. So choose the type of animation that suits your presentation contents and topic.

Using themes

Most people like to make the design of their presentation as cool as possible. Sometimes they get carried away and choose from the best themes available in the presentation tool. Themes provided by tools are predefined and designed to suit general purposes. Your presentation might be unique and choosing an existing theme can ruin the uniqueness. The best practice is to create your own themes for your presentations.

impress.js does not come with built-in themes. Hence there is no other option than to create a new theme from scratch. impress.js steps are different to each other unlike standard presentations, so you have the freedom to create a theme or design for each of the steps just by using some simple HTML and CSS code.

Apart from the previous points, we can use typography, images, and videos to create better designs for impress.js presentations. We have covered the background and the importance for impress.js. Now we can move on to creating real presentations using the framework throughout the next few sections.