Transcript CL23: Designing and Developing for the Rich Mobile Web

Designing and Developing for
the Rich Mobile Web
Joe Marini
Principal Program Manager
Windows Phone
[email protected]
Agenda
 Understanding the Mobile Context
 What makes mobile different?
 Guidelines for Building Usable, Engaging,
Rich Mobile Web Sites
 Best Practices
 What to Avoid
 Designing and Developing for Mobile
 Q&A
We’ve Come a Long Way
The Case for the Mobile Web
Understanding The Mobile Context
PHYSICAL
Full Keyboard
Accurate Pointing Device
Large Screen, multiple monitors
Powerful CPU / GPU, Big Disk
Limited / Virtual Keyboard
Finger Pointing Device
Small Screen, which can rotate
Less Capable CPU / GPU, Small Storage
USABILITY
The Mobile Web is
Different From the Desktop
Typically used from fixed,
predictable locations
Good for open-ended browsing
Easy to switch among many tasks
User is focused and comfortable
Typically used on-the-go in an
unpredictable environment
Good for quick, glanceable information
Focused on discrete individual tasks
User is often distracted or busy
Understanding The Mobile Context
Mobile Web Users Have Different
Expectations
Mobile Web users expect immediate access to
important information
Mobile Web users expect information to be
augmented by the real world – time, place, etc.
Environmental conditions can vary widely –
lighting, background noise, network speed, etc.
A user’s surroundings influence how they use a
Web application – relative privacy, for example
Creating the Rich Mobile Web
Guidelines for building rich mobile web sites
Design for One Web
 Provide the same information to users of your site
regardless of their device
 NOTE: This does not mean that you should
provide the same presentation
 Don’t exclude users based solely on the
class of device they are using
 If you’ve separated your content from
presentation and behavior, this is easy
Design for the Finger, not the Stylus
 Fingers are naturally more dexterous than a device like a stylus
 It is relatively easy to perform multiple actions with a finger, like
flicking, panning, scrolling, tapping, pinching, etc.
 The typical size of a fingertip is 40 to 80 pixels. Navigation elements
must be sized appropriately to ensure they respond well to the user.
 Good finger-friendly design is also stylus-friendly, as long as you
make sure that fingers aren’t the only way to access features
Focus, Grasshopper. Focus.
 Good mobile Web apps focus on
a few important tasks
 Resist the temptation to make all of
the features of your desktop site
available on the phone
 Distill the features of your main site
into the ones that are most critical for
mobile
 Display the most common features
prominently without having to scroll
 What to do should be obvious –
a “blink decision” by the user
Be Crisp, Clean, & Succinct
 Design pages that use
fewer fonts & colors
 Avoid gratuitous graphics and
unnecessary interactivity
 Background images can make
the page hard to read
 Optimize content for the
small screen space
 Scale down images, use short titles
 Use whitespace to separate
elements, but be careful
Minimize Required Input
 Entering data on a phone can be
tiresome and error-prone
 Only require the minimum amount
of information to get the job done
 Provide sensible default values
where possible
 Use cookies to remember
previous user input
Design for One Web. Design for the Finger.
Focus. Be Crisp and Clean. Minimize.
Example: Alaska Airlines
Designing & Developing for mobile
Use Well-Defined Standards
 Use minimum standard Web technologies:
 XHTML 1.0 / HTML 4.01 / XHTML-MP
 CSS 2.1, DOM 1, ECMAScript 3
 Always specify a DOCTYPE for your pages
 Use standard media types
 Static: JPEG, GIF, PNG
 Dynamic: 3GP, AVI, WMV, MP4
 Avoid things that cause known issues:
 Framesets, Tables Used for Layout, Nested Tables, Image
Maps, Reliance on Plug-Ins or DHTML Behaviors
Adapting Content to Mobile
Do Nothing
Basic Mobile
Adaptation
No special content
adaptation, result is
the desktop site
being delivered to
the device
MultiServing
Content
MobileSpecific
Design
Same page is sent to
mobile and desktop,
styled differently for
each
Content laid out so it
will at least be
consumable on a
device, special META
tags indicate that page
is ready for mobile
Hosting Web
Content
Managed app that uses
WebBrowser control to
host Web content
Parts of site are
designed for mobile
specifically, kept in
separate domain or
subfolder, redirected
to when necessary
Mobile <META> Tags
 Pages that have been laid out specifically for mobile
can be flagged as such
 Prevents the browser from optimizing layout
 Three <META> tags:
<META name=”HandheldFriendly” content=”true” />
<META name=”MobileOptimized” content=”320” />
<META name=”Viewport” content=”width=device-width” />
The Viewport
The Viewport controls how content is laid out
Device
Screen
Document
Viewport
Demo
Controlling the
Viewport
Multi-Serving Content
 Same page, different devices, styled right
 Usually involves some kind of detection
 Client: use script to detect capabilities
 Server: use code to detect User Agent string
 Caveats:
 DO NOT use script on client to check UA
 DO NOT use UA detection to do things like
fix bugs in specific user agents
Mobile-Specific Design
 Web pages designed and coded specifically
for mobile devices
 Pages are usually kept separate – in their own domain
(m.site.com) or folder (site.com/m/)
 Usually involves some kind of UA detection
 Suggestion: don’t roll your own. Use a good 3rd party detector,
like MDBF (ASP.NET) or WURFL (PHP)
Demo
Multi-serving content
and UA Detection
IE Windows Phone 7 vs. IE Desktop
 Additional Script Functions



getElementsByClassName(name)
querySelector(selector)
querySelectorAll(selector)
 Viewport Settings

IE Mobile supports the following values:
Property Name
Values
width
Integers from 320 to
10,000 or “device-width”
height
Integers from 768 to
10,000 or “device-height”
user-scalable
“yes”, “no”
minimum-scale
Not yet supported
maximum-scale
Not yet supported
initial-scale
Not yet supported
 Frameset Handling

For usability reasons, IE Mobile
expands frames to fit their content.
 Navigating to .xhtml files

Pages that end with “.xhtml” are
properly handled now – no download
prompt
IE Windows Phone 7 vs. IE Desktop
 CSS For Adjusting Text Size

IE Mobile recognizes “-ms-text-size-adjust” and “-webkit-text-size-adjust”
 No Support for 3rd Party Plug-Ins

IE Mobile does not allow the installation of third party plug-ins
 Behavior of Fixed Positioning

Elements that have fixed positions are attached to the document, not the
browser window.
Device Screen
Browser Window
Viewport
Fixed Position DIV
Desktop Web Page in Window
Fixed Position DIV
Web Page in Mobile Browser
What To Do Next
 Visit http://developer.windowsphone.com
 Download our whitepaper on the Rich Mobile Web
 Get the tools and sample code and start building
 Follow @joemarini on Twitter
 Dude! We’re getting the blog back together!
http://blogs.msdn.com/iemobile
 Fill out the session evaluation form!
? !
&
Questions and Answers