Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Just a few years ago, when you published your website online, you can safely assume that visitors to your site would be viewing it on either a Mac or a Windows PC, with at least, say, a 15 inch monitor, and they were using one of maybe four or five of the major web browsers. It seems like kind of an obvious statement to make, but these days with the proliferation of all kinds of web-enabled devices, you can't really be sure visitors are viewing your site on a computer, or on a PDA, or on a mobile phone. Or these days, even on a gaming system. In the past, it was relatively easy to set up your site so that it would look pretty much the same to all visitors browsing it on a computer. But, with all the different devices out there today, depending on how your site is laid out, it may look great on a computer monitor, but it may look completely different, or perhaps even unreadable, on a PDA or a mobile phone. This shift in the Internet landscape is yet another reason to embrace the idea of separating content from presentation using Cascading Style Sheets. With CSS, you can set up style sheets aimed at rendering your pages specifically for certain types of devices. For example, you can have one style sheet for people browsing your site on a computer, and one for people caught in your site on say, a phone.
And all the while, the actual content of your pages never changes; just the style information changes based on the device that's browsing your site. At this point there are 10 different types of devices you can account for with CSS. These are just the terms you use to designate which type of device should be using a particular style sheet you've created. Let me give you a quick rundown of these different media types. First of all, we have all, and that's used as the default media type by Cascading Style Sheets if nothing else is specified. As a result, any device accessing the site will use this style sheet to render the contents of your page.
We have Braille, which is used for Braille tactile feedback devices. We have embossed, which is used for Braille printers. Handheld, which is used for handheld devices, like PDAs and phones. We have print, which is used for printing and print previews. Projection, which, as you might imagine, is used for projectors. Screen, which is used for computer display. Speech, which is used for speech synthesizers. We have TTY, which is aimed at people with hearing impairments, basically this if for teletype devices. And we have TV, which is used in situations where you think your site might be viewed on a TV screen.
Basically, you can take a page on your web site, add some lines of code to let the browser to know which style sheet to use if someone is browsing your site on his mobile phone, and the style sheet you've designed takes care of rendering the page for that particular device. We could spend hours talking about how to design for all of these devices, but my goal here is to introduce you to the concept of designing for devices. you might not even ever care if someone is visiting your site on a mobile phone. Maybe your site is designed specifically for people viewing it on a monitor. In this chapter I'll discuss this topic by showing you how to set up a style sheet for print, because nearly everybody has a printer, and it's a good idea to set up style sheet for print, especially if you have an elaborate, interactive page, that may look great on screen, but might not look that great printed out on paper. Before we get started with this in the next movie, we should take a moment to define the site we're going to be using in this chapter. On my desktop I've copied the file 10_devices, which is the chapter 10 devices folder, and that contains all the files we'll be using for this particular chapter. Let's define that as a site.
Site > New Site. We'll call this teacloud 10. Browse for it, click OK. Now we've defined our site. In the very next movie we'll take a look at how to attach a printer-friendly style sheet.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.