Speciality of mobile web applications

Introduction

WML is died. Mobile devices support XHTML, so theoretically regular web applications work on mobile devices. Amazing. Unfortunately real life is more complicated.

Problems with WAP browsers

• Mobile screens are small. Sites built for big screens are very inconvenient when browsing on mobile device.
• There are 5 popular desktop web browsers and dozens of mobile browsers, so cross-browsing compatibility becomes serious problem.
• Existing mobile browsers do not support all HTML/CSS features and often behave differently. So cross browser writing is hard.
• JavaScript/ECMA Script is not widely supported. Even if it is supported the DOM of each browser has its own specialty.
• Some standard events are not supported.
  • onmouseover cannot be supported on simple phones that do not have mouse pointer and on new phones with touch screen.
  • onkeypres, onkedown, onkeyup are often not supported because when user types text into “input” element the phone actually opens native editor, so browser even does not “know” that a key is pressed.
• Java applets are not supported; Flash is supported by very few models.
• Supported fonts list is very limited.
• Different phones support different media format. Most phones support 3GP but as far as I know modern phones do not support this format but do support MP4. And we have to be careful when we choose codec we use for video clip.
• Even phone identification is may be problematic. User can use any browser compatible with his phone instead of built-in browser. This custom browser may send User-Agent that does not contain any information about the device.

This means that to make web application useful on mobile phone we can

• make it primitive, static, as portable as it is possible. Avoid using scripts, complicated markup and absolute positioning. Application will not be “sexy” but will be available on maximal types of devices. Chance to succeed →0.
• Write 2 separate applications: one for desktop, other for mobile phones. The mobile version could have even subversions for different platforms. Number of working hours →∞.

Amazing trade-off .

Solution

So, what’s the solution?

• Write 2 different applications. One for WEB, other for WAP.
• Use WURFL and if you are lucky Java programmer user tag library WALL (both by Luca Passani). This will help to render elements, support legacy WML devices, show the best quality images and video etc.
• Use script-less tricks that help to make illusion of dynamic application.
• Sometimes use scripts for devices that support them but only if scripts add functionality to the application so that poor users of old phones can still use it.

Let’s see some details of suggested tricks.

Scriptless tricks

Experienced WEB designers are regular to use client side scripting for a lot of tasks. This is good and convenient technique very that allows to create dynamic, responsive, good looking application. Obviously this technique does not work when scripts are disabled or even unsupported by client’s browser. A lot of relatively simple phones do not support client side scripting. Here is a humble list of tips that can help to create powerful applications even with these restrictions.

Use animated GIFs

Animated GIFs are supported by most cellular phones. WURFL property “gif_animated” can help to identify whether phone supports animated GIFs.

*:hover and *:focus

Hover is irrelevant for old phones that do not have mouse cursor and for touch screens. So, for better compatibility we should use them together. Selected element should be always marked using background, border or font color. Otherwise user with device without mouse cursor or touch screen cannot understand which element is active now.

Save space

Screens of mobile devices are very small. We do not have enough space to show label, icon and text field. We should show text field only and put label on it. Label should disappear when user selects the element. How to implement this in scriptless world? Create transparent image with text and put it as background of the text field when it is not selected. Background of selected field should be empty.
This solution has disadvantage: someone has to create the image that contains text only and handle it if text is changed. But it can be improved. It is not a problem to write servlet that receives required text as a parameter and writes it to image. URL of this servlet may be used in CSS background-url definition. Implementation of such servlet may be a subject of separate article.
Find here examples of scriptless tricks.

Limited Scripting

Browsers typically ignore unknown tags. We can write scripts that will work if browser supports them and ignored otherwise.

Control typed characters

Keypad of mobile phone is typically small and inconvenient. You have to press button 5 times to type digit 7 into a text field. Only very motivated user is able to type his phone number into text field. How to make field numeric? There is an CSS extension -wap-input-format that helps to do this:

<input type="text" style='-wap-input-format: "N"'/>

For more details click here.
Unfortunately this CSS extension is not supported by many smart phones like Symbian, Blackberry, IPhone. But these phones support java script.
Solution implemented here uses both -wap-input-format for Nokia S40, SonyEricson and others and java script that substitutes letters by digits.
Function that implements the substitution is called from “onkeyup” event of text field. But many phones do not fire this event. To support such devices I implemented timer task that starts when field is selected, runs periodically and replaces characters entered by user to digits.

Conclusions

There are huge number of different mobile devices and browser. Each one has its own limitations and characteristics. But it does not mean that web applications for mobile devices must be primitive and ugly. Some simple techniques and tricks allow creating powerful and good looking applications targeted for mobile devices.

Acknowledgments

I would like to thank Yaron Amir begin_of_the_skype_highlighting     end_of_the_skype_highlighting,  my colleague at Vringo for valuable ideas in WEB design he gave me during our discussions.