BTB035

Extending Your Experience To Mobile Devices
Derek Snyder Product Manager Mobile and Embedded Devices Microsoft Corporation
1

What Is Mobile Browsing?

2

Mobile Web Challenges

3

Major Browsers
WAP Browsers

4

Major Browsers
Opera

5

Major Browsers
Web Browser for Series 60

6

Major Browsers
Internet Explorer Mobile

7

Device Rendering
MSN Desktop

Palm Treo 700w, Internet Explorer Mobile

Sony Ericsson W900 Walkman

Nokia N70, Series 60 Browser

Palm Treo 650, Blazer 8

Device Rendering
MSN Mobile

Palm Treo 700w, Internet Explorer Mobile

Sony Ericsson W900 Walkman

Nokia N70, Series 60 Browser

Palm Treo 650, Blazer 9

Different Ways To Design
Design for mobile first? Design for mobile site as a companion? Design for desktop first? Adaptive rendering?

10

Minimize Roundtrips
Why: Data network has high latency
Loading images, external script libraries requires extra trip to the server

Example: Windows Live Mobile
Thumbnail and strip out images in the proxy, serialize images into the page

How: Consolidate data
Use text where possible
Merge multiple images into one
11

Use Adaptive Rendering
Why: Every phone is slightly different
Could have a 96x96 screen with 12 keys Could have 640x480 screen with QWERTY

Example: ASP.NET Control Adapters
ASP.NET can automatically generate code based on the requesting device
WML 1.1, Monochrome, HTML 4.01, XHTML-Basic, How: Write device agnostic websites WBMP graphics

Use adaptive experience automatically based on device
12

CSS1, Jscript, Full color, renderingJPG, customize your to GIF, PNG graphics

Don’t Port The Desktop
Why: the phone is not a miniature PC
Some features don’t make sense Site navigation is entirely different

Example: Gmail
Gmail doesn’t clutter their mobile version with infrequently used actions and fields

How: Cut features users won’t use
Keep design simple and focus on tasks

13

Create A Companion
Why: Extend your reach
Use the phone to leverage work done on the desktop site

Example: FLIKR
FLIKR allows you to snap a photo with your camera phone, and email it to an online photo album

How: Use features unique to a phone
Emailing a photo from your desktop may not make sense, but on the phone it does
14

Input Less Text
Why: Limited input method
Phones may have anything from 12 keys up to a full QWERTY keyboard

Example: Passport Mobile Credentials
Grants customers unique credentials where only a phone number and PIN is needed

How: Design for the lowest denomination
Assume numeric input, use cookies and smart defaults to reduce input
15

Use The Phone
Why: It’s not a computer, it’s a phone!
Use the differences to your advantage

Example: Windows Live Local Search
When searching local listings, phone numbers become hyperlinked (for clickto-call)

How: Take advantage of phone specs
Camera can be used for OCR, local search can know where you are, etc.
16

Know Your Limits
Why: Limited battery, memory, processor
The phone can’t optimize its battery when timed events are running

Example: Animated GIFs
Repeated animation will continually run on phones, draining battery life

How: Limit scripting, avoid animations
Set timeouts for looping scripts and make animations static
17

One-Handed Navigation
Why: People use phones one-handed
Common actions should be easily accessible without needing both hands

Example: ESPN Mobile
Images are shrunk and layout is optimized so movement happens in one dimension

How: Make the page vertical
Avoid side-to-side scrolling, and break up extra long pages into phone-friendly chunks 18

Test On Real Phones
Why: Emulators can be inaccurate
Rendering and speed may be very different from actual phone experience

Example: These design patterns
All design patterns here were developed out of the pain of browsing on real phones

How: Test on real phones
Allow you greater ability to optimize for screen size and network speed
19

Allow For Operator Branding
Why: It’s a mobile operator’s world
Mobile operators can control what makes it on or off the phone

Example: Handango
Handango has branded their web site based on the phone and operator that accesses it

How: Cascading Style Sheets
Use technologies like CSS Mobile Profiles to change logos and color schemes to match the operator20

W3C Initiative
Mobile Web Initiative (MWI) This is an industry group promoting a Best Practices guide for developing mobile web content with the intention of having a “mobileOK” trustmark. More info at: http://www.w3.org/Mobile/

21

Choosing The Right Tools
When does a rich client make sense? What about an Ajax-ed website? What about a simple HTML/WAP site? An SMS gateway?

22

Intro To IE Mobile

Seana Seraji Test Manager

23

Virtual Earth And Mobile AJAX

Dave Stewart Lead Developer Steve Garrity Program Manager
24

Virtual Earth And Mobile Ajax
Virtual Earth maps are made up of 256by-256 pixel tiles Usable space in Pocket IE on Smartphone is 176-by-180 pixels

25

Virtual Earth And Mobile Ajax

26

© 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.