DES 3006 - Web Design II
Week Seven | Part Two: Controlling Media Types
Thinking Liquid (Design)
You may have read it here first, but you have known it for some time:
"People do not read Web pages. People scan web pages. When they find something useful, they print it."
So ... have you ever printed out a Web page and been disappointed with the results?
If you have, you can lay the blame squarely on some beguiling Web designer.
As a Web page designer, you *must* take full control of *all* aspects of your design from inception to delivery --- from screen to printed page.
You can perform this miraculous feat with sturdy design, some clever styling, and use of the media type tag.
Different Media Types
The media type tag names a particular set of CSS properties.
The names chosen for media types reflect the target devices for which the relevant properties make sense:
all - suitable for all devices.
aural - intended for speech synthesizers.
braille - designed for braille tactile feedback devices.
embossed - suitable for paged braille printers.
handheld - intended for handheld devices with a small monochrome screen.
print - designed for paged documents viewed on screen in print preview mode.
projection - intended for projected presentations.
screen - designed primarily for a color computer monitor.
tty - intended for media using a fixed-pitch character grid.
tv - suitable for television-type devices with low resolution color and sound.
Media Types in Action
Let's take it for a test drive. Open a blank document in your HTML editor. Copy the text below and Paste it into your document:
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Media Style Types</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
<!--
body { font-family: sans-serif;
font-size: 2 em;
font-weight: bold;
text-align: center;
margin-top: 10em;
color: blue;
background-color: yellow;
}
-->
</style>
<style type="text/css" media="print">
<!--
body { font-family: serif;
font-size: 12 pt;
font-style: italic;
margin-left: 20pt;
border-bottom: 2pt gray solid;
color: black;
background-color: white;
}
-->
</style>
</head>
<body>
Add some text here!
</body>
</html>
Add some text between the <body> tags and preview the page in your browser. Then, select Print Preview to view the page in Printer Mode.
Did anything change? If so, you just saw an example of media type tags in action. What's more, you've just witnessed how you can seamlessly apply two style sheets to the same document.
Go to Week Seven - Part Three