Mobile Web: A Primer on Design and Development
Refresh Austin - September 11, 2007
Ryan Joy
atxryan.com
Why should I care about mobile?
- It's not as good as the desktop. It's not the real web, right? Wrong.
- A renewed interest in developing mobile web content has been ignited by the W3C's Mobile Web Initiative and dotMobi, among others, and an increase in capable devices such as the iPhone.
By the numbers...
- 2.7 billion global mobile subscribers.Yes, but how many of those access the mobile web?!
- "30 million (or 19 percent) of the 159 million U.S. PC Web users ... accessed the Web from a mobile device during the same month" - Comscore 05/2007 (http://www.comscore.com/press/release.asp?press=1432)
- Translation: the number of U.S. mobile web users is already almost one-fifth (19 percent) the size of PC web users.
Define 'mobile'
- adj. Moving or capable of moving readily
- "Fundamentally, 'mobile' refers to the users, and not the device or the application." - Barbara Ballard, Designing the Mobile User Experience
Limitations
- Dozens of user-agents.
- Low bandwidth
- Unlike the desktop web experience, the mobile web is usually a small screen, intermittent, one-handed experience. Mobile users may be walking down the sidewalk glancing back and forth from your content to avoid people and poles. Or, god forbid, they're driving.
- Carrier-controlled 'decks'
Opportunities
- Location-specific content delivery
- Handheld voice communication
- Store and retrieve data on the go
- Store contact info directly from a mobile website. More to come on this later.
Context is king.
- Users are on the go.
- Only able to perform one task at a time.
- Everything is time relevant.
- Needs may be location specific.
CONTEXT IS KING.
Let's go over that again:
- Users are on the go.
- Only able to perform one task at a time.
- Everything is time relevant.
- Needs may be location specific.
"The user's mobile context can be defined as the set of and the intersection between facts, events, circumstances, and information that surrounds the (mobile) user at a given point in time." C. Enrique Ortiz (http://weblog.cenriqueortiz.com/mobile-context)
What is relevant? Ask yourself this and you'll be off to a good start.
Avoid PC Nearsightedness
- Do not try to replicate the desktop web experience.
- Barbara Ballard refers to this as 'miniaturizing' in her article, Mobilize, Don't Miniaturize (http://www.littlespringsdesign.com/design/mobilize/)
- Instead, 'mobilize' by targeting mobile user needs and making the best use of technology. The contextual user tasks should should drive the content, architecture, and user experience of the mobile site.
Some examples:
More examples:
So, what do I do now?
- Maybe nothing.
- Send raw HTML markup.
- Use a media="handheld" stylesheet.
- Create mobile-optimized content.
Which is best?
Ok, I choose to develop a mobile website?
- Mobile web pages for the most part are served over WAP (Wireless Application Protocol)
- Who knows what WML and WMLScript are? Forget about them. They were the primary markup and scripting language of WAP 1.0
- XHTML Mobile Profile (XHTML-MP) is preferred for WAP 2.0. XHTML Basic also works and, in fact, the two markup languages are very similar and render equally as well on most devices.
Convergence
- "...the markup language of the wireless world and the wired world finally converges. XHTML Mobile Profile and WAP CSS give wireless Internet application developers more and better presentation control. The greatest advantage, however, is that the same technologies can now be used to develop both the web and wireless version of your Internet site. You can use any web browsers to view your WAP2.0 application during the prototyping and development process." (http://www.developershome.com/wap/xhtmlmp/xhtml_mp_tutorial.asp?page=introduction)
Recommended Markup
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site's Title</title>
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css"/>
<meta http-equiv="Cache-Control" content="max-age=600" />
</head>
<body>
<h1>My Page Heading</h1>
<p>Content goes here.</p>
</body>
</html>
Mobile CSS Support
floatcan be sketchy. Keep in mind the amount of screen real estate available on some devices.font-sizewill be ignored by most mobile browsers. Use headings (h1,h2, ...) insteadfont-familyis out too. Generally everything will render in a sans-serif.background-imageis marginal at best whilebackground-coloris much better.border-stylebetter besolid.- Use caution with
marginandpadding.
Best Practices
- Provide a "skip navigation" link.
- Identify outside links, targets, and resource sizes.
- Do not cause pop-ups.
- Limit scrolling.
- Reduce click-stream.
- Judiciously use color and contrast.
- Do not use frames
- Do not use tables for layout
- Label all form elements appropriately.
- Use alt tags and noscript elements.
What about those so-called opportunities?
- Remember this?
Voice communication / contact management
-
WTAI (Wireless Telephony Application Interface)
Office: <a href="wtai://wp/mc;+15554755138">1 512 232 5952</a>
<a href="wtai://wp/ap;+15122325952;Amy%20Miller">[Add to Ph.Book]</a>
-
XHTML protocol
Office: <a href="tel:+15122325952">1 512 232 5952</a>
- Some browsers will even automatically convert phone numbers.
- Currently there is not a way to access the device's address book with a similar XHTML protocol. Microformats will fill this void.
More on 'convergence'
- The same technologies that have driven Web 2.0 are available to be leveraged for mobile.
- RSS and APIs lend themselves to the portability of data.
- The cross-platform, cross-browser, cross-device nature of these technologies, powered by XML, make them prime technologies to consider for mobile development. Especially when coupled with an XHTML presentation.
AJAX on a mobile device
- AJAX (XMLHttpRequest) is already supported by Opera Mobile, Opera Mini 4.0 beta, Nokia/Symbian (WebKit), Pocket IE, and MobileSafar browsers.
- Asynchronous communication benefits the mobile experience where the traditional page reloading experience can be mindnumbing.
- The drawbacks are that it is not supported by most phones, making it viable only for high end devices. Fall-backs will need to be provided.
- Bad AJAX is even worse than no AJAX.
Location Based Services
Some examples of location-based services are:
- Requesting the nearest business or service, such as an ATM or restaurant
- Receiving alerts, such as notification of a sale on gas or warning of a traffic jam
Testing
- Validate! Mobile browsers can be much less forgiving of invalid markup.
- Use compatibility resources: ready.mobi & W3C Mobile Web Best Practice Checker
- Use emulators.
- Test using actual devices in real world situations (daylight, one-handed, sporadic user-focus)
More!
- Text Messaging - SMS (Short Code Messaging) Messaging is a far more prevalent mobile activity than viewing content through a browser
- Widgets like Nokia's WidSets
iPhone
One Web vs. The Mobile Web
- One Web. The Internet is the Internet, and sites should run well on all devices. Optimization should be based on CSS and device detection, but should not change site function or content beyond the necessary.
- Mobile Web. The mobile is a different platform with different capabilities and different user needs. Sites should be optimized for mobile in many (but not all) cases.
Expect the consumer to indicate which they prefer -- a unified web vs. device-specific delivery
Additional links
- W3C Mobile Web Best Practices 1.0
- dotMobi
- dotMobi Mobile Web Developer's Guide
- Wireless Universal Resources File
- U.S. Common Short Code Administration (SMS)
- TextMarks (generic U.S. short code 41411)
- Mobile Advertising: How to Monetize Your Mobile Site
- Mobile Web Design - The Series by Cameron Moll
- Mobile Web Design - A Book by Cameron Moll \