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.
The 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:
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.
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
[...] 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 [...]