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 Nokia N70, Series 60

W900 Walkman Browser

Palm Treo 650, Blazer

8
Device Rendering
MSN Mobile

Palm Treo 700w, Internet

Explorer Mobile

Sony Ericsson Nokia N70, Series 60

W900 Walkman 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
How:
WML Write device agnostic
1.1, Monochrome, websites
HTML 4.01, XHTML-Basic,
WBMP graphics CSS1, Jscript, Full color,
Use adaptive renderingJPG,
to customize
GIF, PNG graphics your
experience automatically based on device

12
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 click-
to-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 256-
by-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.