The Mobile Web

The Mobile Web Ready to move to the small screen? How does designing and developing for mobile differ from a traditional desktop experience? How do you architect an experience that is contextually sensitive to both time and location? We'll discuss these questions and more while demonstrating how you can create a great mobile experience. Jeremy will also give a behind-the-scenes look at a recently developed WAP 2.0 site, and a preview of a new iPhone application. Buzz words included: XHTML-MP, WAP 2.0, iPhone, Ajax, SMS, Widgets, Mobile Research, and more! ;-) (presentation from 10/2007)

Hello.

jeremy www.jeremyjohnsononline.com

Me playing with the iPhone when it first came out, now both me and my wife have one, and my three year old is next. jeremy www.jeremyjohnsononline.com

The Mobile Web I need something better than this...

It’s easier to get a camelcontent into a mobile 1. getting through the device is a design challenge eye of a needle (Than design for a mobile device)

It’s easier to get a camel through the eye of a needle (than design for a mobile device)

320 x 240low fidelity is the 160 pixels 220 pixels 240 pixels 320 pixels 320 pixels 2. Small screens = new black 128 pixels 176 pixels 240 pixels Recommended Max Size 200 x 250 pixels 320 pixels 320 pixels Multiple Screens Sizes

240 x 320 is the 160 pixels 220 pixels 240 pixels 320 pixels 320 pixels new black 128 pixels 176 pixels 240 pixels Recommended Max Size 200 x 250 pixels 320 pixels 320 pixels Multiple Screens Sizes

it’s 2007 where’s mymobile device wethe best 3. Why is the jetpack! !$&* iphone have? (and the iphone is not a jetpack...)

it’s 2007 where’s my !$&* jetpack! (and the iphone is not a jetpack...)

Mobile Lingo mostly from.... wait for it... en.wikipedia.org

SMS / Texting (what you do while driving) ...is a means of sending short messages to and from mobile phones. 160 characters

MMS / Photo Messaging (what you do to embarrass your friends) ...allows sending messages that include multimedia objects (images, audio, video, rich text)

WAP 2.0 (what is known as the “mobile web”) ...is a set of technologies set by the Open Mobile Alliance (previously the WAP Forum). The name for this collection of technologies (WAP 2.0), was set in 2002 and has no relation to “web 2.0” or “mobile 2.0” which are buzz words. XHTML-MP CSS TCP HTTP/1.1

Mobile 2.0 (buzz, do you hear a bee?) Mobile 2.0 (like Web 2.0) = many different things... SMS -> IM, mobile blogging MMS -> Media sharing Operator Portals -> Mobile Web and search Operator chooses -> User chooses Premium SMS billing -> Mobile stored value Accounts Java Games -> Connected Applications (e.g. photo sharing, blogging) Presence & Push-To-Talk -> VOIP applications WAP sites -> Web sites that adapt for mobile browsers WAP push -> RSS readers Wallpaper -> Idle screen applications Location services -> Google maps application Content consumption -> Content creation (e.g. mobile blogging) dig deeper: http://www.torgo.com/blog/2006/11/what-is-mobile-20-beta.html http://mashable.com/2005/09/30/whats-mobile-20/ http://www.readwriteweb.com/archives/understanding_mobile_2.php

XHTML-MP XHTML-MP (what you’ll be developing mobile sites with) * XHTML Basic and XHTML-MP are virtually indistinguishable * XHTML-MP is the predominant language for the mobile web. * It’s possible to use standard tools to create mobile web pages. * Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers. * XHTML-MP is the default industry-supported language for mobile web development. * Unless a mobile service provider requires providing WML to support older devices, XHTML-MP is the only needed language in mobile web design.

Location-based service (LBS) (How you know where your kids are) a way for your mobile device to know where you are (mostly via GPS) http://www.ﬂickr.com/photos/franklantz/241960473/

2G 2.5G 3G (How slow your mobile connection is) 2G = first digital network 2.5G = (up to) 144kbit/s 2.75G = EDGE 238kbit/s 3G = 384kbit/s to 2Mb/s (if you’ve heard of EDGE recently, it’s because of the iPhone)

(LOL cats love phones!)

Trends http://www.ﬂickr.com/photos/existentist/384332504/

who? http://www.ﬂickr.com/photos/johnnyvulkan/264231719/

as with any design problem you need to know who your audience is.

@ Sabre we deal with Travel and Travelers.

May 22, 2007 Travel eBusiness Execs: Focus On Mobile Data Now Mobile Data Creates A New Way To Distribute Travel And Engage Travelers

Forrester North American Traveler Survey 100% 100% Business Leisure Travelers Travelers

Forrester North American Traveler Survey Business Leisure Travelers 87% Travelers 80% Travelers who own any type of mobile phone. R

Forrester North American Traveler Survey Business Leisure Travelers Travelers Travelers who send receive text 42% messages (SMS) 34%

Forrester North American Traveler Survey Business Leisure Travelers Travelers Travelers who send receive text picture messages (MMS) 20% 16%

Forrester North American Traveler Survey Business Leisure Travelers Travelers Travelers who access the mobile internet 15% 12%

Forrester North American Traveler Survey Business Leisure Travelers Travelers Travelers who send and receive mobile email 14% 10%

M:Metrics - general mobile usage... Business Leisure Travelers Travelers Users who access content from a downloadable application 5% 4%

(voice!) Travelers w/ mobile devices*: * Travel eBusiness Execs: Focus On Mobile Data Now HIGH Business SMS: 42% OK, here’s a shocker: Ownership of mobile phones is nearly ubiquitous among North American travelers. More than eight in 10 leisure travelers and nearly 87% of business travelers have one; among online travelers ownership is even higher (see Figure 1).1 SMS Leisure SMS: 34% What makes all of this noteworthy is that 37% of leisure travelers and 45% of business travelers use mobile data services such as text messaging, sending or receiving picture messages, email, or accessing the mobile Internet. How does usage of these services break out? * Data from Forrester: Travel eBusiness Execs: Focus On Mobile Data Now: Mobile Data Creates A New Way To Distribute Travel And Engage Travelers “Google hits everything but MMS, they even do voice (1-800-goog-411), which has near 100% adoption” http://gigaom.com/2007/05/07/do-you-mobile-download/ * Business MMS: 20% M:Metrics says 9.9 million U.S. Mobile subscribers accessed mobile Leisure MMS: 16% User MMS content via a downloaded Don’t forget » Mobile AJAX Browsers...(the wild card!) application in March, up from 7.4 Adoption * Business Internet: 15% million in March 2006. (this is a Leisure Internet: 12% small percentage of mobile internet users, and an even smaller percent of the total mobile WAP 2.0 device users...) * Business email: 14% email Leisure email: 10% Java ME App. 5% ? (or other non-native OS app.) LOW $ LOW Cost of development and maintenance Custom OS App. HIGH

Interactive event number one http://www.ﬂickr.com/photos/somesay/196723316/

!"#$%&'()*&+",-$.

How many own a mobile phone? How many use SMS (texting)? How many use MMS? How many use mobile web? More than 1 once a day? How many have downloaded and installed a mobile app? other than a Google, Yahoo or Microsoft app? How many have purchased something on a mobile? besides a ringtone, game, etc...? How many have used GPS on a mobile?

what? http://www.ﬂickr.com/photos/boldcreative/1028818117/

What device do we design for?

http://www.ﬂickr.com/photos/alexsegre/1032726140/ http://www.ﬂickr.com/photos/hendry/1044032898/in/set-72157601290313227/ Travel Network User Experience | sabreux.com 40

Travel Network User Experience | sabreux.com 41

http://www.ﬂickr.com/photos/joshb/1088794679/ http://www.ﬂickr.com/photos/lajandy/987714078/ Travel Network User Experience | sabreux.com 42

Where would Jesus queue? Apple accomplishes a marketing feat to be envied and studied http://www.economist.com/business/displaystory.cfm?story_id=9443542 http://www.ﬂickr.com/photos/thephotoherald/1071506752/ Travel Network User Experience | sabreux.com 43

iPhoneDevCamp Travel Network User Experience | sabreux.com 44

Do we stop at the iPhone?

http://www.flickr.com/photos/pmtorrone/59461135/ http://www.flickr.com/photos/theelectronicsinfo/852570665/ http://www.flickr.com/photos/theelectronicsinfo/914253595/ http://www.flickr.com/photos/theelectronicsinfo/953937868/ http://www.flickr.com/photos/benarent/1032432455/

what device do you design for? how many devices do you design for? what technologies do you use?

mobile web mobile applications XHTML-MP JAVA ME BREW WML Small Screen Palm OS Rendering Reformatting complex. (squeezing) Windows Mobile OS (and smartphone) Mobile Style Sheets “desktop web” BlackBerry OS (Deepfish, Mobile Safari, S60) Nokia S60 + all the different Flash Lite browsers (40+) “Widgets”

let’s go back to the audience. » In general travelers are more likely to use the mobile web over a mobile application. » Check your analytics to determine popular device types (smart phones? iPhones? feature phones?) » Will your website/application benefit from a higher interaction level? it’s all about tradeoffs...

what devices do you design for? The devices your audiences are using. what technologies do you use? The technology that best serves your audience.

Some current conversations... http://www.ﬂickr.com/photos/nouqraz/200049988/

“one web” vs. Content Adaption/Multiserving

there are some in the mobile space that believe you need multiple WAP 2.0 sites, ones targeted at specific devices. This could be: showing larger graphics on smartphones, simplifying tasks for smaller phones, hiding downloadable ringtones from a phone that can’t use ringtones, etc... dig deeper: Three articles discussing this topics: .mobi “One Web” http://dev.mobi/node/87 WURFL Creator’s GAP http://www.passani.it/gap/ (created in 2002, updated in 2007) "The Demise of Mobile???" http://www.blueflavor.com/blog/mobile/the_demise_of_mobile.php

Others have strategies that involve multiple technology solutions (WAP 2.0, iPhone, JAVA, OS Specific...) in fact this is how Google is doing it: SMS WAP 2.0 JAVA ME Custom OS (but who has Google’s resources???)

Others have strategies that involve multiple technology solutions (WAP 2.0, iPhone, JAVA, OS Specific...) in fact this is how Google is doing it: Even voice! SMS WAP 2.0 JAVA ME Custom OS (but who has Google’s resources???)

We’re fans of the “One Web” concept (using WAP 2.0) and that’s what we’d recommend in most cases. This means developing one mobile site using best practices – like using degradable XHTML-MP with CSS to display to all devices. After you’ve launched a successful WAP 2.0 site, go crazy - create a JAVA app, a iPhone specific version - this is only limited by time and money (and remember your audience!)

In fact: We were recently able to take the WAP 2.0 Travelocity site and create a new iPhone specific front-end. From this...

To this: Why an iPhone site? » Improved interactions over the WAP 2.0 site » Improved information design » A set canvas to try new things » PR (iPhone is the B.S.O. of the day) CHECK IT OUT: IPHONE.TRAVELOCITY.COM

Facebook.com WAP 2.0 site (m.facebook.com)

Facebook.com iPhone site (iphone.facebook.com)

In some cases you might not even need a specific mobile site - if your developing a simple content based site just adding a mobile style sheet could suffice. (and is some cases can be created in just hours!)

Interactive event number Two http://www.ﬂickr.com/photos/girlofsummer/1088355386/in/pool-theitemswecarry/

/+"0& 0%1+,(2(3'& 4(*&5+#1+& ")-#%,1%6 http://www.ﬂickr.com/photos/50043277@N00/259742285/

QUESTION: What type of site & technology would you use for this person? » iPhone » Photographer » USB Key Drive custom iPhone site

QUESTION: How about this person? » feature phone » not an early adopter » still uses a pen ;-) WAP 2.0 Site

QUESTION: How about this person? » feature phone » PSP - using for web browsing » Rail pass, maybe a long ride to work? » Used to simple Shuffle interface WAP 2.0 Site with a PSP formated version?

QUESTION: How about this person? » Direct and to the point » Busy lifestyle » Simple flip phone SMS alerts http://www.ﬂickr.com/groups/theitemswecarry/

When is your audience? http://www.ﬂickr.com/photos/ludwig/27848454/ Travel Network User Experience | sabreux.com 70

If you’re a traveler... pre-trip during-trip post-trip How can the interactions be different for each of these timed events? What’s most important to the traveler at each of these points in time? Travel Network User Experience | sabreux.com 71

When & Where are closely tied Travel Network User Experience | sabreux.com 72

where? http://www.ﬂickr.com/photos/paulforsdick/295185170/

vs. http://www.flickr.com/photos/bangalore_scs/373379365/ http://www.flickr.com/photos/mmoorr/348604772/ http://www.flickr.com/photos/gabyu/187689499/

Go to where your travelers are. You need to understand the environment in which the mobile is used. (in context!) Check out Jan’s blog “future perfect” for some inspiration on this topic: http://www.janchipchase.com/

What’s You’re in a crowed different on a train station. Mobile? You’re in the car late for an appointment. You’re on the go. You’re @ the airport and need your flight information. You want to know where the nearest You want to update Starbucks is. your Facebook status at lunch. Travel Network User Experience | sabreux.com 76

http://www.ﬂickr.com/photos/stuartforster/368698937/ Use any location information you have to help your Travel Itinerary? Plane Tickets? Home ZIP Code? traveler along. Phone Number? GPS/LBS information? ... or just ask!

These who contexts are what the reason when you may need a custom where mobile site. (even if you’re targeting devices that can view the “full” web)

Interactive event number three http://www.ﬂickr.com/photos/marxpix/949138086/

7#*%&)8&'()*& 9(:#2%&5%:& :*(5$%*$;;;

go to: http://www.jeremyjohnsononline.com/mobile-test/

How long did it take? That’s 20kb.

quick c ase study.

th e design problem

Marketing had a long list of “business requirements*” they wanted to provide to the mobile traveler. * “business requirements” = features

Beans = Business requirements grinder = UX team http://www.ﬂickr.com/photos/dominocat/24437265/

Great Experience! (one that solves development, marketing, design and traveler goals!) http://www.ﬂickr.com/photos/stevengregor/1120263313/in/pool-37069182@N00/

http://www.ﬂickr.com/photos/sssdc/466537549/ s tructure

What are the travelers goals? » Have my travel itinerary in my pocket. » Quickly access my travel content. » Get relevant alerts to my situation. When are the travelers? » Pre-trip? At my destination? Post-Trip? » Is my flight leaving in a week? 1 day? or 15 mins? » Am I reviewing or inputing information? » What is most important to me at this moment in time? Where are the travelers? » Provide me with details about my current location. » Let me connect with others in my location. » Let me interact with my location.

Instead of “what category do these belong to” it’s “what action does the Traveler want to take next?”

Make sure the next actions are at their fingertips. http://www.ﬂickr.com/photos/editor/194137577/

Be conservative with your clicks. They cost time and money...

Be conservative with dev.mobi your clicks. They cost time and money...

Our mobile interface adapted to time. http://www.ﬂickr.com/photos/trinity/181934604/

pre-trip during-trip post-trip Welcome John! Welcome to Dallas John! 1 My Alerts (1) Check-in for your flight Dallas city guide (change) 2 Expense Tracker 1 My Alerts (7) 1 My Alerts (4) 3 Trip Scrapbook 2 View Itinerary 2 View Itinerary Non-stop flights to Cancun starting at $189 Ready for your next trip? 3 Flight Status (on time) 3 My Trip 4 Book your next trip 4 Gate Information (C21) 4 Expense Tracker 5 Flight Lookup 5 Trip Planning 5 Trip Scrapbook 6 Weather 6 Weather 6 Returning Info 7 Travel Tools 7 Travel Tools 7 Travel Tools Need Travel Insurance?

pr ototype

Skipped Wireframes & PhotoShop Mock-ups Early Code...

Prototyping is fun! (Especially on a mobile site!) » Simpler code » Less “design” » Test directly on a mobile device » Creating “real” pages helps fill holes ...and when it’s done! » Helps development team “visualize” what they’re creating. » Helps Marketing, Project Management, and Development teams to agree on a solution (and a timeline). » You know EXACTLY how the site should look and function.

code http://www.ﬂickr.com/photos/icco/366800038/

<? 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>Hello World!</title> <meta http-equiv=”content-type” content=”application/vnd. wap.xhtml+xml” /> </head> <body> <div id=”intro”> <h1>Hello World!</h1> </div> <div id=”content”> <p>This is a simple XHTML-MP Page</p> </div> </body> </html>

<? 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>Hello World!</title> look familiar? <meta http-equiv=”content-type” content=”application/vnd. wap.xhtml+xml” /> </head> <body> <div id=”intro”> <h1>Hello World!</h1> </div> <div id=”content”> <p>This is a simple XHTML-MP Page</p> </div> </body> </html>

Top 5 things I learned while coding this prototype... 1. Unordered lists don’t work very well. 2. Access keys don’t always work (but add them anyways) 3. External Style Sheet vs. embedding 4. Font sizes (there’re really only 3!) 5. Don’t trust the “Box Model” viA: mobile Front-end development wizard

design

Keep it Simple

Use CSS for design elements when possible.

Remember: When people use a mobile device - it’s usually because they’re not near a desktop. » They’re not expecting a desktop experience » They need the information QUICKLY » It’s cumbersome to surf on a mobile (compared to a desktop) » Focus on tasks and actions, design elements come second

test http://www.ﬂickr.com/photos/jalopnik/tags/brilliancebs6/

test. test. test. For developers, this may seem like 1999 all over again, with multiple browsers splitting the share of web users across different rendering engines, proprietary tags, and Operating Systems. But, fear not! luckily it’s 2007 and web standards are here - not only making it easier to develop for the desktop web, but also the mobile web. http://www.brucelawson.co.uk/index.php/2007/great-review-of-web-accessibility-web-standards-and-regulatory-compliance/

But, aren't there 10o’s of devices? Yes, in fact a recent count had it at 256+ currently available devices (some are just variants for different carriers.) While that sounds like a lot, when developing with web standards the rule of graceful degradation applies “accepting the unpredictability that rules the user interface of the (mobile) Web”. Graceful degradation means that your Web site continues to operate even when viewed with less-than- optimal software in which advanced effects don't work. Example:

How do I know my code is Web Standard compliant? Luckily the folks over at .mobi have developed a great tool at ready.mobi In the example here you can see at a glance the validation score, page size, speed of page, and cost of bandwidth. The page goes on to show what it will look like on two different phones, as well as providing a range of development tests.

What tools do I use? Here is a listing of just some of the many tools available: Openwave The Openwave mobile browser software has shipped on over one billion handsets, approx 49% of the global browser-capable device shipments, over 70 mobile operators. You can download the free Openwave Emulator (PC only) here: http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/ YOSPACE SmartPhone Emulator Developer Edition 6.1 ($) The world's only WAP development tool that allows you to simultaneously view and test your WAP applications in emulations of the world's most popular mobile handsets has just got more powerful. Now featuring 45+ different handset personalities and support for XHTML-MP, i-mode and 3G devices, SmartPhone Emulator Developer Edition 6.1 is the ultimate WAP development tool. (Windows, Lunux, and OSX!) - YOSPACE is also being used on Lastminute.com: http://www.lastminute.com/lmn/pso/catalog/Category.jhtml?CATID=96022 http://www.yospace.com/spede.html

http://www.operamini.com/demo/ This is a live demo of Opera Mini that functions exactly like it would when installed on a handset. Opera Mini is pre-installed on many handsets (they have a co-branded deal with T-Mobile in Europe), and is available as a free download for almost all mobile device types (JAVA, MIDP 1+2, BlackBerry, Windows Mobile, etc...). Opera Mini works by using a remote server to pre- process Web pages before sending them to a device. You can view the entire compatibility list here: http://www.operamini.com/download/pc/ http://www.operamini.com/demo/ Opera Small-Screen Rendering (aka. Opera Mobile) Opera Mobile is a pay for browser that works with Windows Mobile, S60, and UIQ devices (learn more here: http://www.opera.com/products/mobile/). Opera Mobile uses Opera's Small-Screen Rendering™ technology which intelligently reformats today's Web sites to fit inside the screen width, thereby eliminating the need for horizontal scrolling. This browser can be easily emulated on any PC/Mac by using the "Small Screen" feature within the "View" menu on the free version of Opera for PCs: http://www.opera.com/ iPhoney If you’re doing any iPhone developing, this is the next best thing to actually owning one of these great devices! You can download iPhoney for free here: http://www.marketcircle.com/iphoney/

These are just emulators and tests, how do I KNOW it’s going to work? Again, when developing with Web Standards you’re creating websites using industry standard code that modern Browser’s are looking for. With some light testing (a few emulators, ready.mobi, etc...) your web content is likely to function on a variety of mobile devices and carriers. It’s a best practice to pick five devices for your target audience and then focus on those as a start. But, if you want to be 100% sure - you really only have two options: 1) Have the actual device in hand 2) A company called Device Anywhere has a unique service that gives you access to real handsets on live carrier networks. They have 300+ handsets DeviceAnywhere and 10 carriers available. Visit: http:// www.deviceanywhere.com/

thanks! www.jeremyjohnsononline.com del.icio.us/jeremyjohnson/mobile

The Mobile Web

by Jeremy Johnson on Oct 12, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 6

Statistics

The Mobile Web — Presentation Transcript