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:
- Wireless Application Protocol (WAP) is the protocol for enabling mobile access to internet content.
- Wireless Markup Language (WML) was the language of choice for WAP 1.0.
- Nearly all devices sold today are WAP 2.0 devices.
- 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:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile10.dtd">
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:
- Developers Home XHTML-MP Tutorial – An impressively replete resource for all things XHTML-MP
- XHTML-MP Tags List – A complete list of XHTML-MP elements and accompanying attributes
And last but certainly not least, CSS. There exists WAP CSS, 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.
Stocking stuffers: Flickr Mobile, Fandango Mobile, and Popurls Mobile. A few sites with whom you can do the View Source song and dance for further study.
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.
Simple enough?
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
19/12/2006
Ah! Perfect timing… thanks for this. I have been trying to develop a mobile version of a few parts of our uni web space and it has proven a bit challenging if you want to go with anything more than plain text. CSS support is very different and figuring out how to make a text heavy web ‘usable’ on a small screen is a challenge.
Get that book of yours published ;) I need it!
Vote Helpful or Unhelpful
19/12/2006
5. Don’t forget to test your page on 145 devices… at least. :)
Vote Helpful or Unhelpful
19/12/2006
A bit sad that the mobile web needs special treatment, would be much easier and in my opinion better if one webpage could serve all devices – a pc as well as a mobile phone or a psp.
What about using this standard for desktop use then? What would be the downsides of making a web enabled for mobile devices and then use it at a desktop device? Does Firefox support this standard? IE doesn’t I suppose because it doesn’t even support usual real XHTML. But if we follow the limitations of the mobile web on the desktop web – what would we loose? We can send this standard to all browsers supporting it and all which doesn’t can just have it sent as HTML 4 or something because it’s backwards compatible – nothing new only things removed – right?
Vote Helpful or Unhelpful
19/12/2006
whoa…I thought you needed an xml declaration, I guess I better read up.
Vote Helpful or Unhelpful
19/12/2006
I had this doctype on a page I was testing a bit.
Could you tell me the difference?
<!DOCTYPE html PUBLIC “-//OMA//DTD XHTML Mobile 1.0//EN†“http://www.openmobilealliance.org/tech/DTD/xhtml-mobile10.dtdâ€>
Vote Helpful or Unhelpful
19/12/2006
With Opera Mini spreading, and other mobile browsers likely to head in the same direction (because of it’s popularity and the rave reviews people have made about it’s usefulness), I can’t see that coding specific sites for other ‘devices’ is a long term effort worth investing in.
I’ve compared opening one of our own web sites on my Opera Mini installed phone, and a colleagues old style mobile browser.
Opera mini opened the full site fine. Some tweaks could be made to make it mroe friendly, but the site worked, you could navigate, view content etc…. And that was version 1 of Opera Mini.
Colleagues phone…. well, that never got to actually opening the site, it’s memory got full and crashed….
So which is better, a mobile browser that can open most sites already out there (and can even utilise a certain amount of Javascript, though that’s apparently a proper battery drainer) or one that needs specially crafted ‘lite’ web sites which are never going to get the same attention as the main site (same reason text-only versions of sites for accessibility aren’t a good idea).
With the DS and the Wii both having Opera as the browser to use, they are in similar boats, and as usual, I’m sure other browser manufacturers will copy what Opera’s been upto.
Vote Helpful or Unhelpful
19/12/2006
Pelle – I’m not clear about your question. Can you clarify?
Kabari – Good catch. Not sure how I managed to leave that out. The most common XML declaration, whose placement is in the prolog above the doctype, is the following:
<?xml version=“1.0�>. Another suggested option is to include character encoding in the declaration, such as<?xml version=“1.0†encoding=“UTF-8�>Mats – I don’t know that I could accurately describe the difference between the two doctypes. Need to look into that. My gut assumption is that the wapforum doctype has been the accepted doctype for several years now, and possibly the oma doctype that you mention will soon replace it as the accepted/preferred doctype. (Just as a bit of history, WAP Forum was formerly an independent organization that was later consolidated into the Open Mobile Alliance, or OMA.)
Adrian – “Opening a full site fine†and “opening a contextually relevant site that doesn’t cost the user an arm and leg in data costs†are two different things. The brevity of this article doesn’t allow me to cover the whole one web / device independence vs. mobile-optimized content issue, but you can read about that further here
Vote Helpful or Unhelpful
20/12/2006
Can a page made for mobile use also be used on a desktop pc? If a mobile can’t show a usual page but a usual browser can show a mobile page – then maybe one could make only a mobile page, because to have two different pages for different platforms isn’t very nice.
Vote Helpful or Unhelpful
20/12/2006
Ok, I’m confused now. I’ve been doing some WAP work and it all references cards and different HTML tags but when I view the source of the sites listed, they look like normal HTML...is it because it is accessed via the browser and not a wap device?
Vote Helpful or Unhelpful
26/12/2006
Blackwaterdev,
I think you’ll find that you’re developing WAP1.0, while WAP2.0 is essentially the XHTML that you’re no doubt familiar with.
Al.
Vote Helpful or Unhelpful
Impress us