A Beginner's Guide to Mobile Web Development

Posted by cameronmoll 4 years 47 weeks ago

While accessing the web on a mobile device is nothing new, a renewed interest in developing mobile web content has been ignited by the increased availability of WAP 2.0 devices, an abundance of skilled XHTML developers, and notable efforts by groups such as dotmobi and the W3C’s Mobile Web Initiative. There’s no better time than now to learn how to publish web content beyond the desktop.

I’ll let you in on a little secret: I can read minds. I know what you’re thinking: “Why should I care about mobile? After all, the mobile web experience isn’t nearly as good as the desktop web experience.”

You’re not alone. That’s a mistake many of us make as traditional “desktop” web developers, managers, and producers when assessing the mobile web experience. We long for it to be the same as the desktop experience.

Truth of the matter is the “mobile web” -- a phrase used throughout this article to loosely represent “accessing the web on a mobile device” -- can be every bit as good of an experience, but in its own right. If we treat the mobile web as its own environment rich with possibilities, rather than an extension of the desktop experience with restrictive limitations, we begin to understand how to embrace and even exploit those possibilities.

By now you may have heard the facts: Mobile handset proliferation is expected increase to 3 billion subscribers worldwide by 2009 . Web usage on mobile devices is steadily increasing. Yet what’s really exciting are two key factors: 1) More people worldwide have access to a mobile phone than a PC, which means more eyes to view the web content you’ve worked so hard to create, and 2) you can utilize existing web publishing skills.

But let’s bring things back to down to earth for a moment: It’s fair to say accessing mobile web content, as it stands today, is rather inconsistent. There exists a wide range of mobile device user agents (browsers), each rendering markup in different ways. The choice to use WML, XHTML Mobile Profile, XHTML Basic, or cHTML can be an overwhelming decision, to say the least. And what about web addresses? Is it mobile.mysite.com, mysite.com/wap, mysitemobile.com? Where does device detection fit in?

There is hope! This article is a start. It won’t answer all of your questions, but hopefully it will spawn a desire not only to learn more but also to go forth with confidence in producing a successful mobile web endeavor.

Context is King

The importance of comprehending context -- circumstances and conditions that surround a place, thing, or event -- within the mobile environment cannot be overstated. Your content is of little value to users if it ignores the context in which it is viewed, manipulated, and processed. Consider how you access data on your mobile device. You’re on the subway or tube, or you’re walking to your next appointment. You’re holding your handset in one hand, coffee in the other. You’re glancing up to prevent a run-in with a pole or to be sure you haven’t missed your stop.

The mobile web is very much a context-, content-, and component-specific environment. Or put another way, access to web content on a mobile device is largely influenced by surrounding conditions, informational relevance to the task at hand, and the feature capabilities of the device being used. Unlike the desktop web experience, where screen space is liberal, web access is fast and reliable, and data input is facilitated by keyboard and mouse, the mobile web experience is often a small screen, intermittent, one-handed experience. Invariably, this often leads to leaner content and a reduced feature set in comparison to desktop web content, but it also leads to opportunities unavailable in the desktop web environment: location-specific data, on-the-go messaging, and of course voice communication to name a few.

Developing an Approach

1. Strip Images and Styling

2. Handheld Stylesheets

3. Mobile-optimized Site

Methods that rework only the aesthetics of a site merely to fit it on a small screen likely fail to address the context-, content-, and component-specific needs of mobile users and their devices.

Little Springs Design refers to this issue as miniaturizing vs. mobilizing. Miniaturizing “treats the mobile environment and technology as a subset of the desktop environment.” It fails to consider the strengths and weaknesses of mobile devices. Mobilizing, on the other hand, “precisely targets mobile user needs, making [the] best possible use of technology.” Contextual user tasks — not the existing website — determine the architecture of the mobilized site.

Yet even this method has its issues. Developers must maintain at least two sets of files (desktop, mobile), and alternate web addresses may be required. Mobile-optimized sites are often audience- and device-centric, which is inconsistent with Device Independence. Further, what happens when mobile devices are as powerful as desktop machines?

Yet nine times out of ten the payoff for the end user will justify the increased development effort. A mobile-optimized site addresses first how content is accessed, second what it looks like. In other words, context before aesthetics, function before form. Pages are leaner, which means users are spared excessive bandwidth costs and generally enjoy a faster browsing experience.

Consider the following example: Kayak.com has been quietly climbing the ranks as the Google of travel searches. They don’t book flights or hotels, but rather search sites that do, and bring in revenue with paid advertising and results. Recently Kayak introduced a mobile-optimized version of their site, kayak.com/moby. Search flights, hotels, even places to eat and you’re given quick access to phone numbers and addresses.

Note the home page is merely a category springboard:



Choose “fly” and you’re shown the following screen. Note the simplicity of data input. One field facilitates departure and arrival cities using airport codes (or city names), and departure date isn’t necessary:



You can’t book a flight (imagine the data entry on your device), but you’ll get price, departure/arrival times, and a phone number to call for reservations. After all, a phone -- the device you’re probably using -- is primarily an instrument for sending and receiving calls. So naturally, providing the user with a phone number rather than order form is a beautifully simple, contextually relevant solution:




You can see additional screens as part of a review posted to my site: “Search travel info with Kayak.com Mobile”

In conclusion, it’s easy to advocate choosing the mobile-optimized method, but the approach you choose will likely depend on such criteria as user goals and objectives, development resources, and the content depth and breadth of your website or application. Your strategy may very well be to do nothing until the time is right to deliver mobile-optimized content. However, if you’re waiting for users to beg for a mobilized version of your site, you’re likely missing out on important opportunities.

An Eye to the Future

Without question the mobile web can be an exciting, challenging, and rewarding experience. There is, however, plenty of room for improvement, as we’re still in the early stages of mobile web development, relatively speaking. Following are just a few ways to improve the mobile web for users and developers alike.

A more desirable, disciplined, dependable experience – There’s a good chance you’ve already accessed web content on your mobile device. And there’s a good chance you were not delighted by the experience. We need mobile web experiences that are desirable, dependable, and disciplined. Desirable in that the overall experience is usable, affordable, and contextual. Disciplined in that the content provided is relevant to the opportunities and limitations of being mobile. And dependable in that we can expect greater consistency across devices and increased convention among mobile sites.

Greater user agent consistency – While estimates vary considerably, we can safely assume there are more than a few hundred web-ready mobile devices on the market and a few dozen types of user agents installed on those devices. This presents a considerable challenge for developers, as testing on -- let alone access to -- the range of devices a given target audience may use is often costly and impractical.
The solution is not necessarily that every device display content the same as every other device on the market, but rather greater consistency at a level such that developers can develop for and test on devices with less time and expense.

Less jargon – One of the biggest barriers to entry for traditional web developers is the sheer amount of jargon and acronyms that riddle mobile web nomenclature; the transition to mobile is akin to learning a new language in some cases. And while study on the part of the developer should be expected, we need to be less concerned about technical terminology and more concerned about user experience.

Consider this example from Feedburner’s Mobile Feed Reader page:



Download the “JAD”? Type that web address using my handset’s numeric keypad? No wonder some fear using the web on their mobile if we have to download the “JAD” file version by multi-tapping 50 characters.

You - The mobile web needs you. Your experience. Your talent. Your innate ability to solve problems users are facing while being mobile. Your voice to encourage your organization to mobilize its web content in a contextually relevant manner.

So what are you waiting for?