Designing and developing for the rich mobile web
1 / 28

- PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about '' - barr

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Designing and developing for the rich mobile web l.jpg

Designing and Developing for the Rich Mobile Web

Joe Marini

Principal Program Manager

Windows Phone

[email protected]

Agenda l.jpg

  • 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 l.jpg
We’ve Come a Long Way

Remember this?

Understanding the mobile context l.jpg
Understanding The Mobile Context

The Mobile Web isDifferent From the Desktop

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


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 context6 l.jpg
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

Guidelines for building rich mobile web sites l.jpg
Guidelines for building rich mobile web sites

Creating the Rich Mobile Web

Design for one web l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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

Example alaska airlines l.jpg
Example: Alaska Airlines

Design for One Web. Design for the Finger.Focus. Be Crisp and Clean. Minimize.

Use well defined standards l.jpg
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 l.jpg
Adapting Content to Mobile

No special content adaptation, result is the desktop site being delivered to the device

Same page is sent to mobile and desktop, styled differently for each

Managed app that uses WebBrowser control to host Web content

Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile

Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary

Mobile meta tags l.jpg
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 l.jpg
The ViewportThe Viewport controls how content is laid out

Device Screen

Document Viewport

Multi serving content l.jpg
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 l.jpg
Mobile-Specific Design

  • Web pages designed and coded specifically for mobile devices

  • Pages are usually kept separate – in their own domain ( or folder (

  • 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)

Ie windows phone 7 vs ie desktop l.jpg

Additional Script Functions




Viewport Settings

IE Mobile supports the following values:

IE Windows Phone 7 vs. IE Desktop

  • 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 desktop24 l.jpg
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.

What to do next l.jpg
What To Do Next

  • Visit

    • 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!

  • Fill out the session evaluation form!

Slide26 l.jpg


Questions and Answers

Slide28 l.jpg

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.