• Reported by Andreas

As I recently moved to Tokyo, I became the happy owner of a Sony Ericsson A5404S mobile phone, sporting an Openwave browser (6.2.0.5) and a QVGA color screen. After three months of surfing the web with a mobile browser, time for some thoughts and pointers to caveats...

First of all, some useful resources:

• The End-All Guide to Small-Screen Web-Dev by Heidi Pollock
• HTMLDog's HTML and CSS for Mobiles
• A simulator of the Openwave browser this article is mainly about
• Best Practices in XHTML design: a word from the developers of the Openwave browser

About the browser itself: the Openwave browser (6.2.0.5) supports WML 2.0 and XHTML Basic + a range of proprietary tags and properties (e.g. a copyright="yes|no" property for the img and object tags that prevents the user from downloading the respective contents). As the rendering engine is not too strict, displaying 'normal' XHTML and HTML pages seems to be possible, too. That is, pages that separate structure and layout, of course. Table driven sites go awry. As for character sets, the most common ones (including UTF-8) seem to be supported (not the case for the simulator though), although not all letter signs might be installed on the device itself. In case of the A5404s for example, letters with accents are replaced by question marks, while Japanese characters are displayed without a problem. Cascading stylesheets are partly supported, too, but they seem to be only mounted when linked to in the following way: <link rel="stylesheet" href="#" type="text/css" media="handheld" />. Changes in the order of the attributes might prevent the browser from rendering the stylesheet at all.

Some things to keep in mind if you want your pages to be viewable and usable in Openwave and other mobile browsers:

• Big chunks of content will load slow or might even result in an error message, saying the page is too big (over 56Kb?). That is certainly the case for most blogs, having lots of posts, links and images on the frontpage.
• Provide not only skipnav links but also skipcontent links. Scrolling down a whole page on a mobile device is rather annoying - a skipcontent link on top of the page allows the visitor to jump immediately to the navigation section.
• Accesskeys only work on mobile phones when they're a number between 0 and 9, * or #.
• It takes some time to apply stylesheets - something that might disturb the user experience. That is, after loading a page, the Openwave browser starts downloading the associated stylesheet. This results in a short delay of a few seconds, which can be rather annoying in case the user already started reading or scrolling down the page.
• Also important to remember is the fact that very often, mobile phones (and other mobile devices) only have limited typographical possibilities. Bold and italic variants of fonts are rather rare, and most of the time, only one font (with two sizes) comes preinstalled. Defining extensive font properties thus doesn't really make sense. Note that the Openwave simulator does not have this problem as it uses the fonts installed on your OS.
• And then, a spoiler: in case the visitor arrives on your page via a Wireless Google search, it is possible that he's actually seeing a WAP-version of your page - that is, Wireless Google pulls all the content it links to through a proxy, which WAPifies it and cuts it into several smaller pieces. That's a good thing in case you want to access a site with a table driven design, but is unneeded when viewing standards compliant pages (that are not too heavy). To make things worse, Google's WAP proxy will break all your skipnav links, accesskeys and what not. To view an example of this problem, open up the Openwave simulator and compare WG with WG through Google's WAP proxy.

Additions, suggestions are welcome!