The Mobile Web, Simplified

A note from the editors: although eye-opening in 2006, this article is no longer relevant to today’s mobile web.

Considering a foray into mobile web development? Following are four things you need to know before making the leap.

1. 4 billion mobile subscribers expected by 2010

Fancy that. Coupled with the UN prediction of 6.8 billion humans by 2010, 4 billion mobile subscribers (source) is an astounding 59% of the planet. Just how many of those subscribers will have data plans and web-enabled phones is still in question, but inevitably this all means one thing for you and me: A ton of potential eyes to view our web content on a mobile device.

2. Context is king

Your content is of little value to users if it ignores the context in which it is viewed. Consider how you access data on your mobile device. You might be holding a bottle of water or gripping a handle on the subway/tube. You’re probably seeking specific data such as directions or show times, rather than the plethora of data at your disposal via a desktop PC.

The mobile web, a phrase often used to indicate “accessing the web on a mobile device”, is very much a context-, content-, and component-specific environment. Expressed in terms of your potential target audience, access to web content on a mobile device is largely influenced by surrounding circumstances and conditions, information relevant to being mobile, and the feature set of the device being used. Ask yourself, What is relevant to my users and the tasks, problems, and needs they may encounter while being mobile? Answer that question and you’ll be off to a great start.

3. WAP 2.0 is an XHTML environment

In a nutshell, here are a few fundamental tenets of mobile internet technology:

With the introduction of WAP 2.0, XHTML Mobile Profile (XHTML-MP) became the preferred markup language.

XHTML-MP will be familiar to anyone experienced with XHTML Transitional or Strict.

Summary? The mobile web is rapidly becoming an XHTML environment, and thus you and I can apply our existing “desktop web” skills to understand how to develop content for it. With WML on the decline, the learning curve is much smaller today than it was several years ago. I’m generalizing things gratuitously, but the point remains: Get off yo’ lazy butt and begin to take mobile seriously.

I’ll even pass you a few tips for getting started. First, the DOCTYPE for XHTML-MP is as follows:

As for MIME type, Open Mobile Alliance (OMA) specifies using the MIME type application/vnd.wap.xhtml+xml, but ultimately you need to ensure the server delivering your mobile content is configured properly for the MIME type you choose to use, as there are other options (see Setting up WAP Servers).

Once you’ve made it to the body, the XHTML-MP markup is not unlike what you’re already used to. A few resources worth skimming:

And last but certainly not least, CSS. There exists WAPCSS, which is essentially a subset of CSS2 with WAP-specific extensions. For all intents and purposes, much of the CSS you’re already comfortable using will be transferrable to mobile. As for including CSS in your pages, your options are the same as for desktop sites: external, embedded, and inline. Some experts will argue embedded or inline over external in favor of reducing the number of HTTP connections per page request, yet many popular mobilized sites and apps employ external linking without issue.

4. “Cell phone” is so DynaTAC

If you’re a U.S. resident, listen up: You must rid your vocabulary of the term “cell phone”. We’re one of the few economies on the planet to refer to a mobile phone accordingly. If you care to find yourself in any of the worthwhile mobile development circles, begin using terms more widely accepted: “mobile” or “mobile phone” or “handset” or “handy”. If you’re not sure which, go for “mobile”. Such as, “Yo dog, check out my new mobile.”

More importantly, however, is overcoming the mentality that access to the mobile web can be done only with a phone. Instead, “device” encourages us to think phone, handheld computer, watch, Nintendo DS, car, you name it.

Brought to you by

Comments

Related articles

Scott Jehl unties the ribbon on his cross-browser method of clearing away the address bar from small mobile screens to make more room for your design. So clear a space under the tree and on your phone for more Christmas pixels.

Sarah Parmenter reminds us that visual design for iOS devices involves more than just a smattering of CSS media queries. With a few extra steps, you can make your iPhone site work harder and put yourself in Santa’s good books.

Brian Fling offers his insight into the state of the mobile web as we hurtle towards 2008. Just as Web 2.0 taught us to rethink our assumptions about the web, Mobile 2.0 looks to do the same. There’s a little something to mull over as you munch your mince pies and move onto bottle of Sherry 2.0.