How To Create A Mobile-Ready Site (Part 1)

As you’ve probably heard by now, Google is testing a version of AdSense for mobile users. Up until now, AdSense publishers haven’t really had to worry about mobile users. But with all the recent fuss about the Apple iPhone, more people are realizing that they can (slowly, at least for now) browse the Web from their mobile phone. When Google releases its mobile AdSense solution, will you be ready to take advantage of the growing segment of mobile Internet users? Probably not! That’s why I’m writing this series of articles. Today we start by looking at the reality of mobile browsing and why you’re going to have to change your site if you want to make things easier for your mobile users.

The Evolution of the Mobile Web

As a longtime employee of the leading vendor of mobile middleware and the author of numerous books and articles about mobile application development, I’ve had a front-row seat from which to view the evolution of the mobile Web. And, let me tell you, it’s taken a long time to get to where we are today.

It’s important to distinguish between mobility and the mobile Web. Mobility refers to the running of applications on devices that are inherently mobile. Such devices tend to be small (typically using a handheld form factor) and very constrained with respect to processing and data storage capabilities when compared to a typical desktop computer.

Many people consider “mobility” and “wireless” to be synonymous, but mobility actually goes beyond wireless communication. The original Palm devices, for example, had no wireless capabilities and yet could still exchange data with external applications by connecting them (typically through a “cradle” or a USB connection) to a computer or a network. Writing applications that work in the disconnected environment of devices like these can be particularly challenging, especially when the applications need to interface with corporate databases — this is where serious development tools (think mobile database and data synchronization) become essential.

The mobile Web refers to the subset of the World Wide Web that can be used from mobile devices. Like the normal Web, it’s accessed through an on-device web browser. Early versions of the mobile Web focused on non-HTML technologies like WAP for interacting with the user, but these have fallen out of favor as network speeds and device capabilities have improved. Today, in theory, any site on the Web can be accessed through a mobile device. The reality is far different, however, because few of those sites are actually mobile-ready. In fact, the trend to use network- and CPU-intensive technologies like AJAX (where the web browser is continuously talking to a web server in the background in order to update onscreen data) is shrinking the effective size of the mobile Web.

How Sites Fail The Mobility Test

Let’s look at what makes the mobile Web different. There are three primary problems to overcome.

Problem #1: Small Screen Size

If you’ve ever tried to browse the Web on a handheld mobile device, your first thought was probably that the screen was incredibly small compared to your desktop or laptop. Desktop monitors have been getting wider and wider in recent years, but handheld devices can only go so wide before they stop qualifying as “handheld”.

The horizontal bias of the tethered Web leads to sites that render poorly on small screens. Consider the CNN site. Here’s what it looks like in Firefox on my desktop (I’ve shrunk the image to 400 pixels):

Here’s the same page on my BlackBerry:

As you can see, site navigation dominates the latter: I have to scroll down quite a bit to see any stories. To keep content “above the fold” on a mobile device you have to move the content to the top left of the page and put all the navigational and ancillary stuff (like the ads!) elsewhere. Here, for example, is a properly-formatted CNN home page shown on a different mobile device:

This CNN home page has been specially designed for use with the free AvantGo mobile web browser, so content is the priority. For most devices this is the kind of reworking you need to do to your pages in order for them to be mobile-ready. The only exception are devices like the Apple iPhone that use a “pan and scan” browser that displays the web page as if it were being shown on a larger screen and lets you move around and zoom in and out of the parts that interest you. For most devices, though, pushing content to the top left is a necessity.

And don’t even get me started about data input problems…

Problem #2: Unsupported Technologies

Although there are still some die-hards out there that turn off the JavaScript support in their browsers, much of the Web becomes unusable — or at least harder to use — if there’s no JavaScript. And I’m not just saying this because I’m an AdSense publisher and AdSense ads only show if JavaScript is enabled. Many sites don’t function well without JavaScript. Even logging in to certain sites requires JavaScript support these days.

And then there are all the sites built on AJAX technologies. AJAX in this case refers to “asynchronous JavaScript and XML”, which is a fancy way to say “run some JavaScript whenever the user does something on the page and update the page with data from the web server based on what the user did”. If your mobile browser doesn’t support JavaScript, or doesn’t support it fully, none of that fancy AJAX functionality is going to work, is it?

But it’s not just JavaScript. Flash is a problem, too. Consumer-oriented sites use a lot of Flash-based interaction. That stuff just won’t work on most mobile browsers today. Audios and videos may not play, either. In some ways, the mobile Web is where the tethered Web was 7 or 8 years ago, and that really affects how sites built to today’s standards work (or don’t) on mobile web browsers.

Problem #3: Slow and Unreliable Networks

What’s been one of the common complaints about the iPhone? That the web browsing is too slow. If you’ve ever tried to browse the Web on your own mobile device, you’ll know that blazingly fast download speeds isn’t something you can expect.

Wireless network speeds are all over the map, but they’re all slower than what you expect on a tethered device. The iPhone suffers because it’s on an EDGE network, which isn’t particularly fast (although it’s better than the GPRS we were stuck with a few years back). There are faster solutions out there, it all depends what carrier you’re on and what model of device you have. And how many other people in your area are also browsing the Web from their own devices — remember that you’re sharing wireless bandwidth with everyone else in the same cell area.

Another problem with mobile devices is that they can wander in and out of network coverage. There’s nothing more frustrating that trying to download a page and losing it halfway through the download because of some kind of network problem. These issues don’t crop up nearly as much as they used to, but it’ll still happen from time to time and it’s another reason to keep the pages on your site as small and content-rich as possible.

What’s Next

That’s the end of this first part. In the second part we’ll start looking at the things you can do to your site or blog to make it mobile-ready. A few simple things can make a big difference in your site’s usability.

Sponsored Link: For a complete set of AdSense best practices, read Uncommon AdSense.

Eric Giguere is the author of Uncommon AdSense and the award-nominated (that just means it lost!) blog Make Easy Money with Google and AdSense.

Comments