Choosing the right platform for your mobile website

By

A summary of the capabilities and specifications of common mobile devices

The hardest thing about mobile web development is trying to cater to the huge variety of devices used by consumers. They have different screen sizes, different standards, different input mechanisms (keyboard, touch-screen, etc.,) some have Flash player, some don’t… the list goes on. How can you build a mobile website that caters to everyone?

The answer is – you can’t. The key to mobile development is to know which devices you will cater for right from the start, and which devices you will not support. Sometimes we have the luxury of being able to support one device exclusively – especially when we are developing web apps – but more often than not, our websites must cater to a larger group. Some options we have are to target devices with Flash player, devices with HTML5 support, or even just devices with a solid HTML, CSS and JavaScript browser.

To make this decision a little bit easier, I have compiled a table showing a basic summary of the capabilities and specifications of some of the most common mobile devices used to browse the web today.

Brand Device Web browser Screen res Flash player HTML5 HTML, JavaScript, CSS WiFi
Apple iPhone Safari (based on WebKit) 320 x 480 No Yes Yes Yes
Apple iPod Touch Safari (based on WebKit) 320 x 480 No Yes Yes Yes
Motorola Droid Android (based on WebKit) 854 x 480 Flash Player 10.1 Yes Yes Yes
HTC HD2 Microsoft Internet Explorer 480 x 800 Flash Player 10.1 No Yes Yes
HTC Dream Android (based on WebKit) 320 x 480 No Yes Yes
Palm Pre Palm Pre (based on WebKit) 320 x 480 Flash Player 10.1 Yes Yes Yes
Nokia N900 Maemo 800 x 480 Flash Player 10.1 No Yes Yes
Samsung SCH-R350 Openwave Mobile 6.2 176 x 220 No¹ No No³ No
HTC Hero Android (based on WebKit) 320x 480 Flash Lite 3.1 No Yes Yes
HTC Magic Android (based on WebKit) 320x 481 No Yes Yes
Motorola CLIQ Android (based on WebKit) 320 x 482 No Yes Yes
Nokia N70 Nokia (WAP 2.0 only) 176 × 208 No¹ No No³ No
Samsung SCH-R450 Openwave Mobile 6.2 176 x 220 No¹ No No³ No
RIM BlackBerry 8300 BlackBerry Browser 320 x 240 No¹ No² Yes No
Nokia N97 Nokia (based on WebKit) 360 x 640 Flash Lite 3.0 No Yes Yes
HTC Desire Android (based on WebKit) 480 X 800 Flash Player 10.1 Yes Yes Yes

¹ Many phone companies are collaborating in the Open Screen Project to bring a consistent Flash platform to a large number of devices.
² RIM are currently developing a new browser which will support HTML5.
³ Newer Samsung and Nokia devices such as the i8910, 5530 and N97 have WiFi and a WebKit based browser which supports HTML, JavaScript and CSS but not HTML5.

Some of the devices in this table were drawn from the AdMob Mobile Metrics Report for February 2010 as the most common mobile devices and smart phones encountered by AdMob’s extensive international ad network. Of course, this report probably doesn’t represent the target audience of your mobile website, but it’s a good place to start if you don’t know what devices you should be targeting.

Various phones displaying the same HTML websiteThe last two mobile websites we have developed at These Days have been built with HTML, CSS and JavaScript. That has enabled us to target a large group of devices but still create rich, attractive, interactive websites. We designed the websites with a fluid layout and a minimum width of 320 pixels.  That meant the sites would display correctly on the iPhone and flow out to fill larger displays. HTML5 was also a strong contender because it would have allowed us to create websites that could run in ‘offline mode’ and play videos. But for these particular projects, we decided that reaching other devices such as Nokia S60 5th Edition phones was more important.

Note: I have tried to ensure the information in the table is accurate but I can’t guarantee that my sources were correct. For more information about the specifications of mobile devices, try these sites:

This entry was tagged with Mobile development. Bookmark the permalink.

Comments

  1. Uh oh, some bugs:

    So if you should cater to the device's capabilities, why can't I read the table in this post on my iPhone? Instead every table cell becomes a paragraph.

    Why does the link in the bottom left lead to 2010.com instead of your actual mobile website?

    W.

  2. Oops! How embarrassing. Thanks for finding those bugs Wolf. This page should display correctly on your iPhone now. You will need to hold it horizontally to see the whole table.

    Cheers,
    Keegan

  3. [...] This post was mentioned on Twitter by Do Not Fold, Sam Serrien, Tom, Lennart Stoop, Keegan Street and others. Keegan Street said: New post: Choosing the right platform for your mobile website http://bit.ly/bucGTB #thesedays [...]

Leave a Reply