Appendix A: Creating a Mobile-Friendly Site using only Stylesheets

Web sites coded with “Best Practices” in mind (Semantically-coded XHTML/CSS-based design without tables for layout) adapt to mobile devices much more easily than those that are not. Lists placed at the top for navigation, header elements properly providing context to the content and non-use of tables make it possible for the mobile user to read and use the site, often with few changes to code.

The reality is that it can take as little as adding only one line of code on desktop Web page to make it format in a mobile friendly way. Just apply a handheld media type for displaying the mobile stylesheet to the well-formed XHTML markup and the site turns into a site for mobile browsers.

The one line of code that often appears in XHTML documents is the following:

This loads an external file called “mainstyles.css” containing the site’s styles and applies it to the XHTML document. It loads the same stylesheet regardless of device type. To specify that only desktop Web browsers should use this stylesheet, just add “media=screen” as shown in the following example:

Since you’re adding several stylesheets to a document, for clarity, name each stylesheet after the medium it’s intended for. Start by renaming “mainstyles.css” to “screen.css” as in the next example:

Now add the mobile stylesheet, using the “handheld” media attribute:

When specifying different media types as shown in the next example, the browser conditionally loads the stylesheet designed for its medium. Desktop Web browsers, for example, use the screen stylesheet. When the user prints the page, however, the browser switches to the print stylesheet. The real magic happens when you load the same page on a mobile device. Recent Web browsers load the handheld stylesheet, styling the content specifically for the small screen.

Using only one line of code, you gain the ability to transform your markup for mobile devices. (Of course, you still have the task of creating the mobile stylesheet.)