Site hosted by Angelfire.com: Build your free website today!

Designing for Devices

FORMS| COLOR THEORY | DREAMWEAVER FEATURES | RESOURCES| ACCESSIBILITY

Most computer users access the Internet from a variety of devices, from desktop p.c.'s to cell phones and Ipods. More than ever before it is essential that web designers create sites that can be seen easily on a Blackberry screen or a television set.

Fortunately, CSS makes it relatively easy to tailor designs to fit a variety of devices. Chapter 10 in the Dreamweaver CSS "Hands On Training" textbook by Garrick Chow explains how to use CSS to create sites for ten types of devices:

Braille tactile feedback devices
Braille printers
handheld devices such as PDAs and cell phones
printers
projectors
computers
speech synthesizers
teletypes and other devices for the hearing impaired
televisions

Dreamweaver CS3's "Adobe Device Central" offers a database of specific devices and features that allow designers to view their webpage on any device that they select. This is extremely helpful in determining whether a layout will be readable on a Verizon Razor, for example, or any other type of cell phone.

Print Screen of Razor Phone


SS Media Types
Media Type	Description
all	Used as the default media type by CSS if nothing else is specified. As a result, any device accessing the site will use this style sheet to render the contents of the page.
braille	Used for Braille tactile feedback devices.
embossed	Used for Braille printers.
handheld	Used for handheld devices, such as PDAs and cell phones.
print	Used for printing and print previews.
projection	Used for projectors.
screen	Used for computer displays.
speech	Used for speech synthesizers. There is a complete section of the CSS specification intended for aural representation of data.
tty	Used for Teletypes and other devices intended for the hearing impaired.
tv	Used for television displays, such as Microsoft's WebTV.

Attaching a Printer-Friendly Style Sheet

Attach a printer-friendly style sheet to allow users to print your pages without irrelevent information such as the navigation buttons. To do this, you need to create a second style sheet, specifically for the printer. Code this style sheet not to display the navigation block or anything else that you wouldn't want to print. Preview it in your browser but select the "print preview" to see how the page will look. You can also use the "rendering toolbar" to preview your page without having to go to the browser and select print preview.