How to make your website mobile today

QArea Expert by QArea Expert on October 7, 2011

How to make your website mobile today
Reading Time: 2 minutes

Today users are mostly on smartphones, tablets and iPads. So it is important to be sure that your website is too.

It is time to make your website mobile. The number of people who are surfing the web through their mobile devices is increasing each day and is rather significant.

There are several tips how to make your website mobile and get up to speed in the new mobile world.

Addressing the device proliferation challenge

If to count how many cell phones person has had for the years, then it reasonable to count how many mobile OSes and models have been supported the number is impressive.

Nowadays mobile browsing is increasing every minute, and all this growth is from only few devices – basically Apple’s iOS (iPod, iPhone and iPad) and Google’s Android (HTC, Samsung, Motorola and others).

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

The bad news: These devices come in any sort of screen dimensions. The table below demonstrates.

Platform Device Screen dimensions
Android 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
iOS Apple iPhone 3G/3G S, iPod Touch 320 × 480
Apple Apple iPhone 4 640 x 960
Apple iPad 768 × 1,024
WebOS Palm Pixi 320 × 400
Palm Pre 320 × 480

The actually bad news: Even so all of these browsers run on WebKit, each of them run WebKit only a little bit differently. Peter-Paul Koch from QuirksMode ran 19 browsers based on WebKit through 27 tests and stated that the results were as “thinly veiled chaos”.

Let’s try to make some order of this chaos, firstly by being somehow picky, and then through deploying a touch of CSS, JavaScript and HTML to handle the remaining issues.

There are surely a lot of devices, but it is not essential to support them all.