Mobile devices (read: cell phones) are becoming considerably advanced in their ability to utilize the web, and available coverage is growing to meet the demand for mobile services. It’s becoming increasingly important for those with a web presence to also have a mobile presence.
Why is this Important?
In order for people to find and use your website, you have to make it accessible. How many people have a web-enabled phone? Apple sold over a million of it’s latest iPhone in three days.At the beginning of the year, Apple announced they have sold over 17 million units to date. And this is just the iPhone.
A few months ago, I was unexpectedly looking for a new car. My wife and I found a few that we liked at some local dealerships, but when we test drove them, they were duds. On the spot, we used my Blackberry to look at online inventories of other nearby dealerships. One large dealership in our area didn’t have a mobile accessible site. Due to the overuse of JavaScript and Flash, it was DOA on my Blackberry. After buying a vehicle from another dealership, we later found out they had plenty of what we were looking for. Because their website was inaccessible on a mobile device, they lost a sale.
So What do I Have to do?
The extent to which you go to mobilize your website really depends on your target audience. There are a few things to keep in mind:
- You don’t have to modify your normal website whatsoever. It’s entirely possible, and recommended, to setup a separate site or extend your normal site for your mobile version. We’ll cover this in a few paragraphs.
- Different mobile devices have different capabilities. Some can utilize CSS, JavaScript and Flash like desktop web browsers, while others only render HTML. How basic do you want to go to reach the broadest mobile audience? It’s a good idea to make sure the site is organized in a way that the content flows properly when CSS is disabled, that the site doesn’t rely on JavaScript to function, and that you provide alternatives to Flash content. You can have all of this (CSS, JavaScript and Flash), but provide fallback alternatives.
- While 3G networks have made downloading data on phones fairly fast, it’s still not as fast as your high speed connection at work and home. Elements like Flash, JavaScript and images can bloat your mobile site and make downloads slow. At what point does your mobile site become so bloated that it’s not worth waiting for it to download? The key here is to keep it simple and to not overwhelm the user with media.
The answer to these questions depend very much on the audience you are intending to reach.
The Approach
The simplest approach to designing your mobile site involves using a different stylesheet for the mobile version of your site and simply restyle your layout and content to make it better displayed on a phone. This method provides for the easiest maintenance as you only have one to maintain content.
A more involved approach would be to have a different header and footer and even page specific replacements for your mobile site. This allows you to only replace the heavy pages with lighter versions, such as a heavy flash page with a static HTML page.
The final approach would be to construct an entirely different website to serve to mobile devices. This obviously creates the most maintenance work as you have two entirely separate sites to maintain.
Handling the User
You have several options when it comes to setting up your mobile site. You can setup a subdomain, such as m.yoursite.com or mobile.yoursite.com. Or you can register a .mobi domain, the official domain for mobile devices. Or you can do both of these options to ensure any user guessing the address of your mobile site will find it.
The most important thing to do, however, is to redirect users who visit your main site, such as www.yoursite.com, to your mobile site automatically. You can do this by analyzing the User-Agent string of the HTTP request (the specifics of how to do this depend on the language your website is written in). A big list of user agent strings is available at Wikipedia.
How do I Test the Results?
You obviously don’t have access to all of the popular phones out there, so how do you test to see how it will look in popular devices? There are many emulators available for a variety of phones. I’ve linked to a few of these in the Useful Links section below.
Useful Tools
There are a few tools to help you along the way:
- W3C mobileOK Checker
- mobiReady – dotMobi Compliance and mobileOK Checker
- TestiPhone.com – web based iphone browser simulator
- Various Mobile Emulators
- Mobile User Agent Strings
- Detect Mobile Browsers – Prewritten PHP code for detecting user agents
Tags: Mobile Web, Web Development
Love this post! Thanks for this. I’ll be sure to come back again. P.S: I’ve bookmark your site as well.