Web Design with HTML and CSS

246

The need for mobile-optimized websites

Web Design with HTML and CSS Digital Classroom

Other media types are available for use: screen, which is the standard for desktop monitors;

projection; print; handheld; etc. You can use the handheld media type by adding the following

link to target handheld devices:

<link rel="stylesheet" media="handheld" href="smallscreen.css"

type="text/css" />

In some cases, you can create a separate style sheet and attach it to your pages so that certain

handheld devices will use this style sheet accordingly. However, mobile web browsers have

not traditionally done a good job with these style sheets, and in some cases, will ignore or

interpret them in diff erent ways. An even greater issue today is that some of the most popular

and high-profi le mobile web browsers do not announce themselves as handheld devices at all,

so a line of code such as the one indicated above would not work.

Using CSS3 media queries

When media types don’t work, you can use media queries in CSS3 to recognize devices that

are visiting your website. Instead of looking for a device that announces itself as handheld, a

media query looks at the capability of the device, and then allows you to send it styles based

on certain values. For example, the media query might look for the width and height of the

browser window, the device width and height, the device orientation (landscape or portrait),

and the resolution, among other things.

When the user has a mobile browser that supports media queries, you can write CSS

specifi cally for certain situations, for example, to detect whether the user has a small device

such as a smartphone. To understand how this works, you will create some styles for the

mobile-optimized version of the SmoothieWorld site.