Designing for the mobile web is not about finding new ways to fit the bells in whistles in into these devices. Its about deciding what is valuable to the site and what is expendable in this format. This often means removing extraneous elements and really thinking about what’s valuable to the core of the site.
Phones come in a variety of sizes, shapes, operating systems, web capabilities. This is important to know when developing for mobile platforms, but what’s more important is to know how many of these people are really in your target audience.
HTC Touch Diamond2 and Samsung I8000 Omnia II are using 480 x 800 pixels (WVGA) display resolution. My brother just bought LG KM900 Arena. It has 3.0 inches 480 x 800 pixels display resolution too. Pretty much like the standard for smart phone nowadays.
The trend in display size is moving towards a common resolution of 240×320. It’s becoming something of a standard in the same way that modern desktop web sites are optimized to display at roughly 1280×800. 75% of phones provide a screen resolution of 240×320 pixels or more. This number is only increasing. It will become more of a standard. Keeping 240 pixels as your optimal screen width will ensure the best user experience for the majority of mobile web browsers.
This doesn’t mean you should strictly code widths of 240 pixels into your divs or images, it just means you should design with the thought in mind that most people will be viewing your site at this resolution. A good standards compliant layout will adapt to many screen sizes.
While width is the real obstacle in designing for mobile platforms, height doesn’t seem to be as challenging. Touch interfaces make navigating and scrolling through content a breeze. Common sense should tell you not to drop a 5 inch high header at the top of your mobile site, but height of site is generally not much an issue. Those who frequently browse the web from well-equipped devices are accustomed to scrolling.
You need to consider your site visitors’ most common screen size and resolution. Your site should work on the widest range of mobile devices that your visitors might be using. Common resolutions for standard cell phones include 101×80 pixels (many Sony Ericsson phones), 128×128 pixels (some Samsung phones), and 120×160 pixels (many Motorola phones). For smartphones, there’s a lot more to work with. The iPhone has a 320×480 pixel screen; the HTC Touch Pro has a 480×640 pixel screen; the Palm Pre has a 320×480 pixel screen; the BlackBerry Storm has a 360×480 pixel screen; and the HTC Venus has a whopping 800×480 pixel screen. Many of these screens can comfortably display a standard website.
- 72% have a screen resolution of 240×320 or more
- 68% strictly equals to 240×320
This resolution is good enough to have a decent experience on a properly designed mobile site: it can display enough text on one screen, and it can display many button and links without scrolling too much, or it can even display a readable full size image.
Today, the average handset isn’t a barrier anymore for mobile web browsing. And with the short period of mobile renewal for the user, soon most users will have a web capable phone.