Audio and Video on the Web Presentation by Cheryl Deas and Pasha Souvorin Multimedia for Web Designers

2 Multimedia  Can be text, graphics, animation, audio, and video  Most web authoring applications include multimedia tools  Multimedia can help you to better communicate  Multimedia has many challenges for web designers

3 Multimedia  Use multimedia sparingly  Think of how you can use media to communicate  All media in your site should have a purpose  The purpose should be to help your site communicate to it’s audience

4 Multimedia  Guidelines to follow: –Understand the affect on bandwidth –Offer low-bandwidth alternatives –Avoid requiring plug-ins if possible –Offer links to appropriate plug-ins as necessary

5 Multimedia  Use strategies to save bandwidth: –Compression –Streaming –File chunking –Linking instead of embedding –Avoid multimedia unless necessary

6 Downloadable vs. Streaming Media  Downloadable media must be fully downloaded before users can hear or see it  Streaming media begins to play as soon as data begins to stream –Examples: YouTube, Netflix, RealPlayer –Requires web developer to set up a streaming server

7 Animation  Animated GIFs –Variation of GIF 89A format –Sequence of frames that simulate movement –Created with multiple tools, such as GIMP and Fireworks

8 Animation  Flash (.swf) –Proprietary format belonging to Adobe –Widely available through free plug-in (flash player) –Content created in Flash or Fireworks –High learning curve for designers –Relatively low file sizes (good for bandwidth) –.flv variant is a high quality, low bandwidth video format that can also be streamed

9 Using Animation on the Web  Benefits of Animation –Catches a visitors’ attention –Demonstrates a simple process –Illustrates change over time –“Wow” factor

10 Using Animation on the Web  Animation’s Down Side –Requires plug-in –Higher bandwidth than text –Often distracting, annoying, unnecessary –.swf format won’t play on iOS devices (iPod, iPhone, iPad)

11 Using Audio on the Web  Many users are annoyed if web pages start playing music for no reason  Give the user control to be effective –Embed the audio into a.swf –Include controls for play, pause, etc.

12 Editing Audio  Use compressed formats on web pages whenever possible –.WAV (Windows) and.AIFF (Mac OS) are uncompressed –.mp3 format is compressed

13 Editing Audio  Audio Editing Software –Audacity (open source) –Adobe SoundBooth –Pro Tools (high-end professional)

14 Editing Audio  Copyright –You cannot use any sound files without written permission from the owner, including sampling small pieces –Many music websites violate copyright laws –Be very careful –Only original sound is safe

15 Video on the Web  Requires most bandwidth  Requires user to have fast connection (US avg. 5MB/s*) *source: Akamai State of the Internet 2010 Report2010 Report

16 Video on the Web  Consider low-bandwidth alternatives –Animation –Linking to video hosted elsewhere (YouTube) instead of embedding video hosted on your site –Resizing video to be smaller 640x480 pixels is the full 480p size (web large) 320x240 px is often called web medium 160x120 px is often called web small –Providing small and large versions of videos for users to choose from *source: Akamai State of the Internet 2010 Report2010 Report

17 Video Formats  Web Video Formats –.FLV (Adobe) and RealVideo (Real Media) Proprietary formats that allow compression and streaming Both require a free plug-in to view –MPEG-4 Compatible with lots of computers Can be compressed as H.264, which has high quality and small file sizes Requires software to compress (many commercial and open source choices)

18 Video Formats  Computer Video Formats (not appropriate for web delivery) –.AVI (Windows Video) –.MOV (QuickTime Video for Macs)  More Information –Website Helpers.com: Web Video DemystifiedWeb Video Demystified –W3Schools: Multimedia Video FormatsMultimedia Video Formats

19 Effective Use of Multimedia  Multimedia should be essential to the web site’s purpose –Every website should have a purpose –The multimedia should be necessary to help the site accomplish it’s purpose  Multimedia should help the site communicate efectively –Every media communicates differently –The same message will come across differently depending on whether you use text, pictures, video, animation, or sound to share that message –The multimeia you use should communicate your site’s message perfectly

20 Effective Use of Multimedia  Multimedia should be integrated into the design of the site –Multimedia shouldn’t just appear on top of your site’s style –It should be integrated into the design of the site –Multimedia, when used effectively, should be part of how your site works, it should feel like it belongs  Web Resources –Smashing Magazine: 10 Principles of Effective Web Design10 Principles of Effective Web Design –Smart Webby: Web Design TipsWeb Design Tips