From CSS Discuss
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:
- 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.
- 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.]
- 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.
- 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).
- Handhelds can really butcher tables, if they recognize them at all - another great reason to use CSS positioning.
- 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.
- 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.]
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.
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).
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.
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:-
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.
About this page
This page was created in June 2004 by Jim Wilkinson, who welcomes contributions, comments and corrections.