The Mobile Web Top 10

Pukupi's top 10 hints for building interoperable mobile web sites.

  1. Forget WML
  2. Use XHTML Basic
  3. Avoid the XML declaration with XHTML Basic
  4. Use non-progressive JPEGs
  5. Avoid tables
  6. Avoid picture symbols (emoji)
  7. Use numeric form passwords
  8. Avoid dark body background colours
  9. Use full URLs with any server-side redirection
  10. Test and test again

1. Forget WML

Even the creators of the Wireless Markup Language (WML) have realized attempting to reinvent the wheel was a silly idea and have dropped WML in favour of XHTML.

WML has no future so forget it. OK? Good.

2. Use XHTML Basic

XHTML Basic is the most widely supported mobile web language. As a subset of XHTML MP, it is native to Docomo's 3G i-mode mobiles as well as newer 2 and 3G mobiles from other operators. XHTML Basic also degrades very nicely on older 2G i-mode mobiles.

XHTML Basic is the future so use it. OK? Good.

3. Avoid the XML declaration with XHTML Basic

While 2G i-mode mobiles do play well with XHTML Basic, they do stumble with the optional <?xml version="1.0" encoding="utf-8"?> XML declaration: instead of being a good browser and ignoring this unknown tag, 2G i-mode mobiles render it as plain text.

Although it is a bit naughty to omit the XML declaration if you are serving up anything other than Unicode, doing so allows you to deliver content native to XHTML mobiles that still plays nicely with 2G i-mode mobiles.

4. Use non-progressive JPEGs

Mobiles support a variety of image formats but JPEG is the only format with wide adoption across all platforms. Many mobiles still have problems displaying progressive JPEGs so it is better to stick to using the humbler non-progressive variety.

5. Avoid tables

Most 2G i-mode mobiles do not support tables so

B U
G G
E R

is displayed as BUGGER which is probably not what you want.

6. Avoid picture symbols (emoji)

There is no emoji standard with AU, Docomo and Softbank all supporting different emoji sets and methods for displaying them. Docomo has even assigned different emoji character codes for Japanese and European i-mode mobiles.

Until this mess gets sorted out and an emoji standard is adopted by all players, it is better to avoid these 12x12 pixel bundles of joy altogether.

7. Use numeric form passwords

Some mobiles mask their password input fields, making the correct entry of anything other than numeric passwords difficult for even the most hardened txt junky.

8. Avoid dark body background colours

Smart mobiles usually highlight the currently selected link on a page with colours inverse to the page background and text colours: A link and the selected link. A link and the selected link.

Unfortunately, some mobiles are stupid and use a single highlight colour - usually black or dark blue - regardless of the body background colour: A link and the selected link. A link and the selected link.

This makes visualizing the currently selected link difficult or impossible on pages with dark body background colours.

9. Use full URLs with any server-side redirection

If you plan to branch web content using any form or server-side redirection, use fully qualified URLs as mobile gateways can choke on relative URL redirection.

For example, using PHP to redirect mobile users to Pukupi's mobile site would entail header("Location: http://pukupi.com/mobile/"); instead of header("Location: /mobile/");

10. Test and test again

Nothing beats real world testing on as many mobiles as possible as there is always going to be some troublesome mobile that doesn't do as it's told.