Navigation

10 tips and resources for creating a stunning web presentation

How To, Marketing, Resources | Dec 13, 2011

A visually stunning presentation is sure to leave a positive impression on your audience, whether you are using it to market a product, introduce your services or communicate information.

Today, the web offers us a myriad of solutions and methods for delivering information to a wide audience on demand.

Options include Flash, PDF, video, photo slideshows and jQuery. No matter which format you choose, the presentation itself needs to be compelling, easy to follow and compatible with multiple devices to have the most impact.

A web presentation designed using modern techniques offers a high level of interaction, fast loading times and responsiveness that a desktop presentation cannot provide. However, the format you choose for your presentation matters little if the presentation itself is not effective. Here are some guidelines to follow to ensure your presentation is memorable and conveys the message you want it to:

1. Keep it short and sweet

Strip the fluff out of your presentation, and get down to the stuff that matters. If you will be speaking or narrating, the majority of what you want to communicate should come from you personally. Use your presentation slides to highlight key messages and topics using as little text as possible.

2. Style tastefully

A pleasing design and focused layout can help define the overall purpose of your presentation. You have the power to direct the visitor’s eyes where you want them to go as you design each slide. Choose backgrounds that provide sufficient contrast and do not interfere with text. Maintain a consistent color palette and stick to colors that are not hard on the eyes.

3. Use bold typography and proper hierarchy

Your presentation must be readable on a variety of devices. Use a small number of complimentary fonts for their weight and style, and use effects such as gradients or shadows to help set them apart from the background.

4. Illustrate your point

Charts, infographics, photography and art can demonstrate what you don’t have room to say with text, or add emphasis to the topic. Don’t be afraid to inject a little humor here and there if appropriate to your subject.

5. Give your reader control

Always allow your readers to move between slides or pause your presentation. Slide-show style solutions usually include a set of controls – build similar controls into your HTML presentations or any format that does not use an embedded player.

 

Making it happen

You have several options for creating and displaying the presentation on your website. You could use your web design skills to create a presentation in Photoshop, and then upload it to Flickr or Picasa to create an image slideshow, but your presentation will lack any interactivity. You could create a basic presentation in Keynote or PowerPoint and upload it to a sharing service, but then you limit your viewership to those with the right browser plugins.

Another option is to create your slides using HTML and CSS, then present them through individual web pages, a PDF or jQuery slideshow. HTML presentations designed with accessibility and responsive techniques excel over any other option by virtue of being truly scalable and available to anyone, anywhere, on any device. Enhance this option by offering a download version for viewing offline.

Below are a handful of free resources for creating stunning presentations in a variety of formats.

Prezi

Prezi is a truly unique presentation editor for creating dynamic and multi-dimensional slides using text, images, videos or documents. Viewers can zoom in and out to inspect each high-resolution element in a very intuitive interface. The drawback? Prezi is a Flash solution that will not benefit viewers on iOS devices.


Google Docs

Google Docs provides a clean and simple interface for creating slideshows and presentations with features similar to what you find in Keynote or PowerPoint. Presentations can be shared with individuals, specific groups, or sent to Google+ .Google’s Publish feature allows you to embed the presentation into any webpage via an iframe, and uses the browser’s native capabilities for displaying slides. The downside is not having access to Google’s font library, forcing you to use images for a majority of the slide design.


Empressr

Empressr is a rich media presentation tool that allows you to include video, text, images or audio for a fully featured experience. Empressr hosts your presentation free and offers direct sharing to a number of platforms or embedding for your website. As an added benefit, Empressr provides analytics for tracking presentation views. Empressr files are created in Flash and there is no option for downloading.


280 Slides

280 Slides can create presentations from a number of existing file types, or offers a user-friendly interface for creating one from scratch. Images and video from services like Flickr and YouTube can be included through the built-in media search, or you can add your own. The font selection is a little broader than Google Docs, but you will still find yourself limited to designing slides locally and then uploading them for the best results. Presentations are converted to PowerPoint format on download or shared directly to SlideShare, another Flash slideshow option.


PreZentit

PreZentit is a fantastic solution for creating cross-browser compatible HTML presentations. Team members can be invited to collaborate on the presentation with you in real-time and you choose if your presentation is public or private. Each presentation gets its own URL and can be shared or embedded anywhere, or you can download to edit offline and upload to your own server.


Create Your Own

If you really want to show off your skills and stun your audience, create your own presentation using your web design skills. Jeffrey Way provides an excellent tutorial for building slides from HTML and CSS in this Nettuts article. He builds each page with HTML, embedded fonts and images, and then uses a combination of Ajax, jQuery and CSS3 techniques to produce elegant and interactive slides that are compatible with any browser or screen size. This technique is a sure winner if you are comfortable with using JavaScript.


Written exclusively for Webdesigner Depot by Vail Joy. She is a freelance designer and tech blogger with a deep interest in all things web-related. She also enjoys writing for WIX, the free website builder.

What online slideshow and presentation software do you use? Let us know in the comments!

Share this post
Comments (no login required)
  • http://www.rustymonkey.com Web Design Nottingham

    Prezi looks good, might give it a try next time!

    http://www.rustymonkey.com

  • Shangle

    It appears as though Prezi is viewable on iOS using their app: http://itunes.apple.com/us/app/prezi/id407759942

  • http://www.climaxmedia.com/ Climax Media

    Google Docs Rocks. Nuff said…

  • http://www.DustBunnyMafia.com/wordpress/ Bret Juliano

    Not to be a troll, but there’s only 5 tips and 6 resources… so either way you look at it, 10 is not the correct number in the headline.

    • http://www.webdesignerdepot.com Walter

      It says tips and resources, the top 5 are tips :)

      • http://www.DustBunnyMafia.com/wordpress/ Bret Juliano

        And the bottom 6 are resources. 5 + 6 = 11 ;)

  • http://www.sweetmag.my Web Design Malaysia

    Awesome post here. Thanks for this!

  • John Luke Laube

    And.. the adobe edge.. I don’t care if it’s on beta

  • http://www.techendeavour.com/Mobile_Application_Development Suresh Babu

    Nice web presentation and I really like  PreZentit.

  • http://www.philbreedlove.com Phil

    WordPress is awesome for creating websites. It provides almost all of the tops listed in this article and more.

  • Jaswiinder

    Thanks 4 sharing. hey tell me where I get the animated power point  templates for my presentation

    http://www.howtobuildawebsitefree.info/

  • Tony Kelsey

    Prezi is super cool and easy to use. Plus it always impresses clients.

  • http://www.cyberdesignz.com Website Making Companies

    great tips I used Prezi and found good one now looking forward to Empressr as i heard a lot about it.Lets see how it gona work for me. :)

  • http://www.cyberdesignz.com Website Making Companies

    great tips I used Prezi and found good one now looking forward to Empressr as i heard a lot about it.Lets see how it gona work for me. :)

  • http://twitter.com/melcabs16 melanie cababat

    great tips.

  • http://cobases.com Michael Cobases

    Once I created cool presentation for my Master Studies in Prezi and then tested it on School and couldn’t get it working properly because of old flash version installed on that pc. It was so disappointing so my point is that make sure on what PC the presentation will be shown before you make anything too fancy 

     

  • http://jitendra-shah.co.uk Jitendra Shah

    Prezi looks slick

  • http://www.officecleaningservicesinbirmingham.co.uk/cleaning-services-in-birmingham.php office cleaning birmingham

    There
    are several large and small Manchester, Liverpool and Leeds office cleaning
    services vying for your business. Larger companies can provide more technologically
    advanced equipment and offer alternative personnel

  • Vail Joy

    Thank you for all your nice comments:)