5 Simple Rules For Creating Mobile-Savvy Websites

It's appalling when you go to a website on your iPad, iPhone, Xoom, Atrix, Droid, Torch, other favorite mobile device and you get a hard-to-navigate desktop site. It's even worse when you're redirected to a stripped-down, oversimplified site that eliminates most of the value of the original destination. Both situations happen way too often.

But they don't need to. The first situation occurs because the website hasn't used the simple technologies available for Web templates to autoadapt the presentation for the smaller screens of mobile devices. The second scenario transpires when the site has implemented one of the many "mobilize" services that essentially scrape Web pages or take RSS feeds from a site, then create a WAP-compatible version for nearly any mobile device to use.

[ InfoWorld's Dori Smith explains the ins and outs of mobile HTML development. | Get your websites up to speed with HTML5 today using the techniques in InfoWorld's HTML5 Deep Dive PDF how-to report. | Stay up on the key mobile trends with InfoWorld's Mobilize newsletter. ]

The problem with that WAP approach is that it is lowest-common denominator, stripping basics such as links in many cases, to support yesteryear's phones that weren't designed to access the Web. These devices -- most Nokia handsets, BlackBerrys that shipped before the Bold, and all cell phones that included proprietary carrier information services -- account for less than 0.5 percent of mobile Web usage, so optimizing for them at the expense of iOS, Android, BlackBerry OS 5 and later, Windows Mobile, Windows Phone, WebOS, and the high-end Nokia devices' version of Symbian is simply silly.

Don't be silly. Instead, be effective in addressing the growing army of mobile users by applying these five rules to your website.

1. Detect the device accessing the website
You likely already detect the browser to handle Internet Explorer's many oddities, using either on-page JavaScript or a server-level Apache script. Harness that user agent information to detect the mobile devices you care about. Zytrax has a great, frequently updated, and comprehensive list of user agents.

Tip: The Motorola Mobility Xoom tablet identifies itself as simply an Android device, so if you're not careful, you'll end up treating it like a smartphone in terms of what you display. That would be cruel to Xoom users. The work-around is to also detect the browser window size and use that information to distinguish an Android tablet from an Android smartphone. However, you don't have to do this for the iPad, as it has a distinct user agent from other iOS devices.

For comprehensive coverage of the Android ecosystem, visit Greenbot.com.

Subscribe to the Daily Downloads Newsletter

Comments