How to make your website mobile today

It's 2010 and your users are on smartphones and iPads. Here's how to make sure your website is too

You've long held off, but it's now time -- even past time: You need to make your website mobile. Between what you see in the news and what your site logs reveal, it's clear that the number of people surfing the Web from their mobile devices is growing by the day.

Here are a few tips to help your site (and you) get up to speed in this new mobile world.

[ InfoWorld's Dori Smith shows you how to use HTML5 on your website today. | Keep up on key mobile developments and insights with the Mobilize newsletter. ]

Addressing the device proliferation challenge
If you start off by panicking about all the cell phones you (and your family and your friends and your coworkers) have had over the years, and then ask youself how you're going to support all those mobile OSes and models, rest easy.

The truth is that while mobile browsing is growing by the minute, virtually all that growth is from just a few devices -- mainly those running Apple's iOS (iPhone, iPod Touch, and iPad) and Google's Android (used by HTC, Motorola, Samsung, and others in a bunch of models).

Here's the proof: Quantcast's August data showed iPhone and iPod Touch together claim 56 percent, Android devices 23 percent, and RIM BlackBerrys 10 percent. AdMob, which focuses on sites with ads, found similar results in its May survey [PDF]: iPhones accounted for 54 percent of usage (it doesn't track iPod Touches or iPads), Android devices for 33 percent, and BlackBerrys for just 7 percent.

The good news: The popular Apple and Android devices' browsers run on WebKit, the open source rendering engine, as do the less-popular WebOS-based Palm Pre and Pixi and the new RIM BlackBerry Torch.

The bad news: These devices come in all sorts of screen dimensions, as the table below shows. (If the table, screen images, and code snippets in this article do not appear correctly, see the original article at



Screen dimensions


HTC Tattoo, HTC Wildfire

240 × 320


HTC Aria, HTC Hero, HTC Legend

320 × 480


Google Nexus One, HTC Desire, HTC Evo, HTC Droid Incredible, Samsung Galaxy S

480 × 800


Motorola Droid, Motorola Droid X, Motorola Droid 2

480 × 854

BlackBerry OS 6

BlackBerry Torch 9800

360 × 480


Apple iPhone 3G/3G S, iPod Touch

320 × 480


Apple iPhone 4

640 × 960


Apple iPad

768 × 1,024


Palm Pixi

320 × 400


Palm Pre

320 × 480

The really bad news: Although all of these browsers run on WebKit, all of them run WebKit just a little differently. Peter-Paul Koch of QuirksMode ran 19 WebKit-based browsers through 27 tests and described the results as "thinly veiled chaos."

1 2 3 4 5 Page 1
Page 1 of 5