Handheld Stylesheets

From CSS Discuss

Jump to: navigation, search


Stylesheets for handheld devices

This document describes some of the issues concerning the use of CSS for handheld devices (using the media type "handheld"). See also Media Stylesheets for practical media stylesheet strategies.

List member Karen Stevenson has extensive experience of the subject and her comments are given below. Jonny Axelsson is the Web Standards expert at Opera Software and contributed two major postings in January 2005. His comments are summarised here. For his original postings, see the archive here and here.

Support for handhelds is going to be a far worse mess than the mess of browser support for computers. Every manufacturer has their own standard, and there is not even consistency from one device to another from any one manufacturer. Here is the information I have found so far, and my feeling about how to proceed:

  1. The future for handhelds will be XHTML and CSS, using a stylesheet designated with the media type "handheld". WAP sites are dwindling (or at least not growing) and the newest handhelds are moving to XHTML/CSS. Phones that are labeled "WAP2" can use regular web sites, not just WAP sites. I know XHTML/CSS sites work great on at least some WAP2 phones like my Motorola V600.
  2. It appears that the most reliable way to present the handheld stylesheet is to use the <link> element since some handhelds don't recognize various flavors of @import or @media, but any that recognize anything seem to be able to pick up a link. [Jonny agrees that <link> is the most reliable method to use.]
  3. Another reason to use the link stylesheets (for all styles and all devices) is that the handhelds don't have to download linked stylesheets they don't need -- an important saving over tight bandwidth.
  4. Some current phones apply "screen" styles as well as "handheld" styles, others ignore both, and in some cases the phone carrier runs pages through a proxy that strips styles out even if the phone could recognize them, so it's a crapshoot figuring out what will get applied. The best bet is to just keep it simple (you can't do much fancy on a tiny screen anyway).
  5. Handhelds can really butcher tables, if they recognize them at all - another great reason to use CSS positioning.
  6. If they recognize any style, "display: none" seems to be a reliable way to hide navigation columns, big images, advertising, and whatever else you don't want to send to a tiny screen. If you put the handheld stylesheet after the screen stylesheet in your code, then use "display: none" for whatever you don't want going to a handheld. You have a reasonable chance of hiding things even if the handheld tries to read the screen stylesheet.
  7. You can try an emulator like Opera's Small Screen Rendering, but be aware that that does not even begin to guarantee what you might see in various handhelds. It will just give you a general idea what the pages might look like on a tiny screen. There are other emulators out there, but none are "universal".
    • [Jonny suggests using Opera's emulator to test, making sure that you invoke your own handheld stylesheet, otherwise all you will test is Opera's own SSR attempt, good though that is. You can also use Opera to test with images switched off (View - Images - No images) and with all CSS switched off (View - Style - Manage modes), since these are likely scenarios for handheld users. After that, test using as many devices as you can.]

People who get Internet access on a handheld are more likely to be the ones who would be upgrading to newer, better devices, so my plan is to code to the standards and assume the devices will get there reasonably soon. Also, handhelds get lost, stolen, broken, etc. much more quickly than desktop computers. Hopefully this means we will fairly quickly get people using newer ones, and hopefully the newer ones will have better CSS support. [But Jonny points out that, conversely, many handheld owners will not (or cannot) upgrade its browser.]

Further advice

Device widths: Jonny reports a huge range: 100-320px for mobile phones and 320-640px for PDAs. The need for Fluid Design is greater than ever.

Jonny suggests that accessible sites and sites designed to work on handhelds should have a lot in common, for example, useful Alt text; no frames; no popups; no Javascript; no dynamic menus; single column design. That's not surprising: in the first case, the user has some sort of limitation, whilst in the second, it's the device that is limited.

The W3C Mobile Web Initiative Workshop was held in November 2004. If you're seriously into designing for the mobile Web, some of the Position Papers are worth reading to see where things are going. In particular, Opera's Position Paper is noteworthy for two reasons. Firstly, Opera Software's major market lies in porting its browser to mobile devices. Secondly, the paper contains some pointers as to how Web authors should be designing sites today for maximum future-proofing (e.g. single-version write-once, read anywhere; validated code; use of CSS2.1 and media stylesheets).

Selected links

Introductory and practical

Cameron Moll: Mobile Web Design Four articles for better mobile web development, published in 2005, followed in 2007 by his really comprehensive book.

Opera Software's Articles on mobiles Detailed advice on HTML/CSS coding, testing and design, not specific to Opera but applicable to all handheld design and rendering.

HTML and CSS for Mobiles Patrick Griffiths (HTML Dog) has written a good introduction to this subject. The comments from his readers indicate that correct support for media types in handheld browsers is often very deficient.

A List Apart #187 Pocket-Sized Design: Taking Your Website to the Small Screen covers the major practical considerations and suggestions on what to include in a Handheld Stylesheet.

The End-All Guide to Small-Screen Web-Dev by Heidi Pollack: a really comprehensive article on Web Monkey covering design considerations rather than CSS specifically.

7 steps to better handheld browsing Simon Collison looks at simple steps to make better sense of your site for handheld-device users.

To see which media type your browser is currently applying (and therefore the range of media types it's capable of applying), see Tarquin's Media Type test and HTML Dog's test page.

More advanced

Targeting Small Screens An analysis by Douglas Bowman of Stopdesign on why support for media types on handhelds is so poor. He proposes the use of Javascript to invoke stylesheets according to the detected device width (but see also the CSS3 Media Queries link below). His solution is clever but there are inevitably several drawbacks. See the comments on the article for a useful discussion, a range of opinions and possible alternative solutions.

Creating Web Content for Mobile Phone Browsers Part1 and Part 2 This O'Reilly Network article covers the use of WML and XHTML but not CSS.

CSS3 Media Queries Candidate Recommendation (as at November 2007), providing a means of tailoring CSS to the particular capabilities/limitations of a device with a given media type. Opera has experimental support. The use of Media Queries can give your site greatly improved Fluid Design since, even within handheld devices, screen width can vary considerably.

The Wireless Universal Resource File (WURFL) How to figure out what mobile devices support what features.

Mobile Design The Mobile Design discussion list seeks to provide news, information, discussion and tips to the mobile user interface design community. The goal is to provide resources and understanding to designers new to mobile as well as to advocate creating user-centered experiences to the community.

Standards for Markup and CSS

If you are developing a site solely for handhelds you may wish to take a stricter (i.e. more limited, less ambitious) approach than if you want a conventional site to be viewable on handhelds also.

If you use HTML rather than XHTML, it's essential to validate your code. Handheld browsers are likely to be less capable at recovering from invalid code than their very forgiving desktop counterparts.

The Open Mobile Alliance is a consortium of phone manufacturers that recommends "standards" for mobile phones. These "standards" should not be confused with W3C Recommendations - hence the quote marks. Its markup "standard" is:-

XHTML Mobile Profile 1.0 and 1.1, which lies between the W3C XHTML Basic and XHTML 1.0.

Its CSS "standard" is WCSS, roughly equivalent to the :-

CSS Mobile Profile 2.0 W3C Working Draft (as at November 2007), proposing a subset of CSS2.1 tailored to the needs and constraints of mobile devices.

Mobile Web Initiative (MWI)

About this page

This page was created in June 2004 by Jim Wilkinson, who welcomes contributions, comments and corrections.

Personal tools