The Key Challenge For Mobile Web Apps

As you can tell from the previous post, there are many, many handset models and each model may support several browsers. Each of these browsers have different levels of support for the various web technologies eg. CSS, Javascript. This is known as Device Fragmentation and is a well known problem in the industry.

So the designer for the Mobile Web app is faced with a dilemma – build a basic site using the lowest common denominator eg. no CSS, no Javascript; or utilize whatever web technology that was available to that handset model – for a target list of handset models. The problem with the first approach is that the user experience is not optimal for the best handset model available; the problem with the second is that you have to know which handset/browser combination is making the request and serve out whatever markup is most suitable.

A common approach adopted by many sites is to have one site catering to the majority of handset models/browsers utilizing just basic markup eg. just xHTML and another that supports higher end (eg. HTML5 or Javascript/CSS capable) browsers eg. iPhone. This was the approach adopted by Facebook early on – if you type on the WebKit browser on a Nokia N95, you would be redirected automatically to However, if you’re on the iPhone Safari browser, you would be redirected to – an iPhone optimized site. This is a simple and effective approach.

A more fine-grained approach is to render the appropriate markup for each device. This is the approach used in Yahoo!’s Blueprint and Netbiscuits. In this approach, the developer just builds his app to serve out the a page as XML, the platform will then render the markup most suitable for that device. This is done by classifying (based on each device’s capabilities) devices into several “device classes” and rendering the appropriate markup for each.

This approach presents certain difficulties in testing since the rendered page will look different for different devices. Also classification of which markup approach to adopt for each device can be tricky.

Leave a comment

Filed under Mobile Web

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s