from www.webstyleguide.com

1. © 2004 Ken Baldauf, All rights reserved.
Multimedia
CGS2826 Web Design
Program in Interdisciplinary Computing
Florida State University
From Web Style Guide, Chapter 12 Mulimedia

2. © 2010 Ken Baldauf, All rights reserved.
Use images, animations, video, and
sound only when they are relevant to
your message
Use stable technology that
works for the great majority of
client machines

3. © 2010 Ken Baldauf, All rights reserved.
Considerations
A significant amount of downsampling and
compression is required to create a file that is
small enough to be delivered via the web.
When planning for multimedia content, take into account
the needs of users with disabilities: both technology-
disabled users who are connecting to the Internet via
modem, cell phone network, or slow wireless or are using
“thin” mobile devices or outdated machines, and
physically disabled users for whom multimedia content
may be out of reach.

4. © 2010 Ken Baldauf, All rights reserved.
Examples
 Poor use of media:
http://www.dpgraph.com/
 Effective use of media:
http://www.nationalgeographic.com/
http://www.webpagesthatsuck.com/

5. © 2010 Ken Baldauf, All rights reserved.
Web Multimedia Strategies
The key to successful web multimedia is to
tailor your content for web delivery.

6. © 2010 Ken Baldauf, All rights reserved.
Audio
HTML 1 - 4
<embed src='applause.mp3' height=0 width=0>"
HTML 5
<audio src="applause.mp3" controls="controls">
Your browser does not support the audio element.
</audio>
http://www.w3schools.com/media/media_browsersounds.asp
http://www.w3schools.com/html5/tag_audio.asp

7. © 2010 Ken Baldauf, All rights reserved.
Embedding Various Media
 Embed code is provided by the following
services:
 www.youtube.com
 www.slideshare.com
 www.google.com/calendar
 www.facebook.com/badges/
Just cut and paste into your HTML

8. © 2010 Ken Baldauf, All rights reserved.
Video
HTML 1 - 4
http://www.w3schools.com/media/media_browservideos.asp
HTML 5
<video src=”igen.mov" width="320"
height="240" controls="controls">
Your browser does not support the
video tag.
</video>
http://www.w3schools.com/media/media_browservideos.asp
http://www.w3schools.com/html5/html5_video.asp
http://www.longtailvideo.com/support/jw-player/13/embedding-flash
http://www.adobe.com/products/flash/design/

9. © 2010 Ken Baldauf, All rights reserved.
Drawing in HTML 5
http://www.w3schools.com/html5/html5_canvas.asp
https://developer.mozilla.org/en/canvas_tutorial
http://www.blobsallad.se/

10. © 2010 Ken Baldauf, All rights reserved.
Preparing Multimedia
 Processing: Downsampling audio and video to
codecs that reduce file size for faster delivery.
 Delivery: includes the server, the network, the client
computer, and the web browser and browser plug-
ins
 Streaming: sends data to the desktop continuously
but does not download the entire file
 Downloading: stores media on user’s computer,
typically playing it while downloading

11. © 2010 Ken Baldauf, All rights reserved.
Design and Multimedia
 Inform your users
 Provide controls – including keyboard
controls
 Offer choice

12. © 2010 Ken Baldauf, All rights reserved.