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
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.
Designing and Developing for the Rich Mobile Web
Principal Program Manager
The Mobile Web isDifferent From the Desktop
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
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
Design for One Web. Design for the Finger.Focus. Be Crisp and Clean. Minimize.
Designing & Developing for 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
<META name=”HandheldFriendly” content=”true” />
<META name=”MobileOptimized” content=”320” />
<META name=”Viewport” content=”width=device-width” />
Controlling the Viewport
Multi-serving content and UA Detection
Additional Script Functions
IE Mobile supports the following values:
Questions and Answers
© 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.