chapter sixteen

Making Your Website Look Great Across Multiple Devices

With so many different types of devices able to access the web today, how a web page is displayed on those devices needs to change to best suit the device it is being viewed on. At the moment, the Cool Shoes & Socks page is suited for desktop browsers, but cramming all of that page into the small screen of a mobile device, for example, makes the content very small and difficult to read.

As you saw in Chapter 2, CSS2 offers media types (www.w3.org/TR/CSS2/media.html), which allow you to apply styles to specific conditions such as screen, print, and handheld. Of course, these media types were rather short-sighted. What is handheld? A mobile phone? A tablet device, such as an iPad? A Nintendo DS? All these devices could be considered as “handheld,” but they still differ greatly—in size, in features, and the environment in which they are used.

css3_badge.psd  The CSS3 media queries module (www.w3.org/TR/css3-mediaqueries/) adds many new ways for you to query attributes of a device on which a page is being viewed and to set up styles specific to those conditions.

In this chapter, you use the free Opera Mobile Emulator (www.opera.com/developer/tools/mobile/) to build and test a Cool Shoes & Socks page that is capable of adapting to varying device conditions.

Project files update (ch16-00): If you haven’t followed the previous ...

Get CSS3 Foundations now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.