O'Reilly logo

Web Site Cookbook by Doug Addison

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

6.12. Offering Your Site on Mobile Devices

Problem

You want to see how your site looks on PDAs and cell phones.

Solution

First, create a mobile device-friendly stylesheet and add it to the pages you want people to be able to access while on the go. Use the attribute/value pair media="handheld" in a linked stylesheet to define separate formatting rules for pages when viewed on a mobile device, like this:

	<link href="/styles/handheld.css" rel="stylesheet"
	         type="text/css" media="handheld" />

Then, use a mobile-browser emulator to preview your pages and tweak them as necessary.

Discussion

If you think creating standards-compliant, cross-platform sites for large-screen browsers is a challenge, then prepare to lose some hair, some sleep, and possibly your lunch when trying to sort out the truly mind-boggling world of web browsing on the myriad wireless devices available today. Screen widths vary from as little as 120 pixels on the smallest cell phones to 320 pixels or more on the latest Palms and Pocket PCs. Although there is a version of Internet Explorer that runs on Pocket PCs, and Opera's mobile browser ships in many devices, other handset browsers (of which there are many) share little in common with their large-screen counterparts.

When faced with this amount of complexity, your best bet is to simplify. Fortunately, your mobile web surfers will be in agreement with this approach. No one wants to spend a long time navigating a web site on a handheld device. Users want to get in, get what ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required