Recipe 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 they want, and move on. For that reason, you only need to provide stripped-down mobile versions of your highest trafficked pages, such as your contact page, a page with directions, and your home page and the frequently updated sub-pages that it links to.

If your site is already coded with valid XHTML syntax and CSS for formatting, then you've got a fairly clear path to creating a mobile version of those pages. (For more information about XHTML, see Recipe 4.1.) If your site design still uses tables, font tags, and other deprecated markup elements, then you might want to consider setting up XHTML-and CSS-compliant versions of the pages that will be most useful to mobile browsersor redesigning your entire site to bring it up to snuff with the latest HTML specifications.

Many mobile devices also support Wireless Markup Language (WML) over Wireless Application Protocol (WAP). Using these technologies offers the promise of better compatibility across all devices, but will require you to learn WML (which differs somewhat from HTML) and maintain a separate set of pages for your mobile content.

As you saw in Recipe 6.10, CSS gives web designers the ability to specify different stylesheets depending on the output device that will view or render the page. The CSS rule you should be using most often in your handheld stylesheet is display:none. With it, you can hide CSS id- or class- tagged navigation, images, advertisements, and other page elements that will be superfluous to the mobile browsing experienceand can drag out the load time, too.

Reorient your layout vertically, either by hiding sidebar columns or rewriting their positioning rules to stack them one atop another. Remember that content blocks and images wider than about 120 pixels will require the surfers with the smallest small screens to scroll horizontally, a web design no-no regardless of the medium.

Finally, make your mobile pages as lean as possible by streamlining your code and removing (or hiding) any Java applets, Flash movies, or other plug-in dependent eye-candy. (For more information, see Recipe 4.8.)

When reviewing your CSS-based mobile design, the Opera web browser is a good place to start. With its small-screen viewing mode, you can see on your PC how your handheld stylesheet will render a page on a mobile device. Download links for specific device and browser emulators are listed in the "See Also" section of this Recipe. If you're designing a site for users with a specific mobile device, then you'll want to invest in an actual handset for testing.

See Also

For more information on the web design techniques that apply to mobile devices, see Recipes 4.1, 4.8, and 6.10.

Emulators are available for Palm (http://www.palmos.com/dev/tools/emulator), BlackBerry (http://www.blackberry.com/developers/downloads/simulators), and Windows Mobile for Pocket PC and Smartphone (http://www.microsoft.com/windowsmobile/downloads). The OpenWave Mobile Browser is installed on many newer phone handsets, and a simulator can be downloaded at http://developer.openwave.com/dvl/tools_and_sdk/openwave_mobile_sdk/phone_simulator. Check wireless service providers and handset, manufacturer web sites for other web-based or downloadable emulators. To get the Opera browser, visit http://opera.com.