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 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 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 Demystified– W3Schools: Multimedia 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

Design– Smart Webby: Web Design Tips