joe marini principal program manager, windows phone microsoft corporation session code: wph310
TRANSCRIPT
Designing and Developing for the Rich Mobile WebJoe MariniPrincipal Program Manager, Windows PhoneMicrosoft Corporation
SESSION CODE: WPH310
AgendaUnderstanding the Mobile Context
What makes mobile different?Guidelines for Building Usable, Engaging, Rich Mobile Web Sites
Best PracticesWhat to Avoid
Designing and Developing for MobileQ & A
We’ve Come a Long Way
Remember this?
We’ve Come a Long Way<?xml version = '1.0' encoding = 'UTF-8'?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html>
<head xmlns="http://www.w3.org/1999/xhtml"><title xmlns="">CNN</title> <meta name="portal" content="mmmcnnd - 409" xmlns=""/> <style xmlns="http://www.w3.org/1999/xhtml"
type="text/css" media="screen"> @import "/generic/cnnstyle.css";
</style><meta xmlns="http://www.w3.org/1999/xhtml" http-equiv="Content-Type" content="text/html;
charset=utf-8"/></head> <body id="home-type">
<div id="top"/> <div class="section_"> <div class="module_" id="xml_3d240959-e353-45a8-a4f0-
0354c1b4761f"> </div> </div>
The Case for the Mobile Web
Understanding The Mobile Context
The Mobile Web isDifferent From the Desktop
Full KeyboardAccurate Pointing DeviceLarge Screen, multiple monitorsPowerful CPU / GPU, Big Disk
Limited / Virtual KeyboardFinger Pointing DeviceSmall Screen, which can rotateLess Capable CPU / GPU, Small StoragePH
YSIC
ALEX
PERI
ENCE Typically used from fixed,
predictable locationsGood for open-ended browsingEasy to switch among many tasksUser is focused and comfortable
Typically used on-the-go in an unpredictable environmentGood for quick, glanceable informationFocused on discrete individual tasksUser is often distracted or busy
Understanding The Mobile ContextMobile Web Users Have Different Expectations Than Desktop Users
Mobile Web users expect immediate access to important information and applications
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 WebTry to provide the same information to all users of your site regardless of their device
NOTE: This does not mean that you have to provide the same presentation of the information to all users
Don’t exclude users based solely on the class of device they are usingIf you’ve separated your content from presentation and behavior, this process is made much easierUse separate CSS and JavaScript filesDon't embed styles or script in the page content's markup
Design for the Finger, not the Stylus
Good finger-friendly design is also stylus-friendly, as long as you make sure that the stylus isn't the only way to access features
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.
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 phoneDistill the features of your main site into the ones that are most critical for mobileDisplay the most common features prominently without having to scrollWhat to do should be obvious – a “blink decision” by the user
Be Crisp, Clean, & SuccinctDesign pages that use fewer fonts & colors
Dramatically increases readabilityAvoid gratuitous graphics and unnecessary interactivityBackground images can make the page hard to readOptimize content for the small screen space
Scale down images, use short titlesUse whitespace to separate elements, but be sparing and judicious
Minimize Required InputEntering data on a phone can be tiresome and error-prone
This requires the user to focus on the taskEntering a lot of text data particularly increases the likelihood of errors and frustration
Only require the minimum amount of information to get the job done Provide sensible default values where possibleUse cookies to remember previous user input
Example: Alaska Airlines
Design for One Web. Design for the Finger.Focus. Be Crisp and Clean. Minimize.
DEMO
Designing & Developing for Mobile
Use Well-Defined StandardsUse minimum standard Web technologies:
XHTML 1.0 / HTML 4.01 / XHTML-MPCSS 2.1, DOM 1, ECMAScript 3
Always specify a DOCTYPE for your pagesUse standard media types
Static: JPEG, GIF, PNGDynamic: 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 NothingBasic Mobile Adaptation
Multi-Serving Content
Mobile-Specific Design
Hosting Web Content
No special content adaptation, result is the desktop site being delivered to the device
Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile
Same page is sent to mobile and desktop, styled differently for each
Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary
Managed app that uses WebBrowser control to host Web content
Mobile <META> TagsPages that have been laid out specifically for mobile devices can be flagged as such
Prevents the browser from optimizing layoutThree <META> tags:
<META name=”HandheldFriendly” content=”true” />
<META name=”MobileOptimized” content=”320” />
<META name=”Viewport” content=”width=device-width” />
The ViewportThe Viewport controls how content is laid out
Device Screen Document
Viewport
Controlling the Viewport
DEMO
Multi-Serving ContentSame page, different devices, styled rightUsually involves some kind of detection
Client: use script to detect the browser's capabilitiesServer: use code to detect User Agent string and specific devices
Caveats:DO NOT use script on client to check the User AgentDO NOT use User Agent detection to do things like work around shortcomings in specific browsers – use capability detection for that
Mobile-Specific Design
Web pages designed and coded specifically for mobile devicesPages 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, unless you're just doing a quick "rich vs. non-rich" detection. Use a good 3rd party detector, like MDBF (ASP.NET) or WURFL (PHP)
Multi-Serving Content and User Agent Detection
DEMO
IE Windows Phone 7 vs. IE DesktopAdditional Script Functions
getElementsByClassName(name)querySelector(selector)querySelectorAll(selector)
Viewport SettingsIE Mobile supports the following values:
IE Mobile Viewport SettingsProperty Name Property 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 HandlingFor usability reasons, IE Mobile expands frames and other scrollable containers to fit their contents.
Support for Navigating to XHTML filesPages that end with the .xhtml file suffix are not properly navigated to in the browser – you no longer get a prompt to download the file
IE Windows Phone 7 vs. IE DesktopCSS For Adjusting Text Size
IE Mobile recognizes “-ms-text-size-adjust” and “-webkit-text-size-adjust”
No Support for 3rd Party Plug-InsIE Mobile does not allow the installation of third party plug-ins
Behavior of Fixed PositioningElements that have fixed positions are attached to the document, not the browser window.
Browser Window
Fixed Position DIV Fixed Position DIV
Device Screen
Desktop Web Page in Window Web Page in Mobile Browser
Viewport
Track Resources
Visit http://developer.windowsphone.com
Follow @joemarini on Twitter
Mobile IE Blog: http://blogs.msdn.com/iemobile
Related Content
BOF12-DV: Mobile Technology has Reached the Masses
WPH06-INT: Microsoft's Next Generation Mobile Enterprise Application Platform
WPH303: Understanding the Windows Phone Developer Tools
Windows Phone ResourcesQuestions? Demos? The Latest phones? Visit the Windows Phone Technical Learning Center for demos and more…
Business IT Resourceswww.windowsphone.com/businessDeveloper Resourcesdeveloper.windowsphone.com Experience Windows Phone 7 on-line and get a backstage passwww.windowsphone7.com
Win a Windows Phone ContestHat Contest*
How do you enter?Enter by visiting the Windows Phone booth, accepting a free Windows Phone branded hat, and wearing that hat during the Event.
How am I selected?Each day of the event, a Windows Phone representative will randomly select up to 5 people who are observed wearing their Windows Phone branded hat
Session Contest*During each Windows Phone session the moderator will post a question. The first person to correctly answer the question and called on by the moderator will potentially win
Questions? Go to the WPH Information Counter at the TLC
* Restrictions apply please see contest rules for eligibility and restrictions. Contest rules are displayed in the Technical Learning Center at the WPH info counter.
Related Windows Phone Content – Breakout Sessions Mon &Tue
MondayWPH301 WP7: Deploy Microsoft Forefront Unified Access Gateway for Access Control
to SharePoint, Exchange and more.WPH202 Deploying Windows Phone 7 with Exchange Server and SharePoint Server
TuesdayWPH203 Overview of the Windows Phone 7 Application PlatformWPH313 Windows Phone 7 Architecture Deep DiveWPH304 An In-Depth view at Building Applications for WP7 with Silverlight (Part 1)WPH305 An In-Depth view at Building Applications for WP7 with Silverlight (Part 2)WPH306 Developing Occasionally Connected Applications for Windows Phone 7
Related Windows Phone Content – Breakout Sessions Wed &Thu
WednesdayWPH310 Designing and Developing for the Rich Mobile Web WPH311 Developing Mobile Code Today that will run on WP 7 TomorrowWPH309 Silverlight performance on Windows PhoneWPH307 Building Windows Phone Games with XNAWPH308 Building a High Performance 3D Game for Windows Phone
ThursdayWPH303 Understanding the Windows Phone 7 Development ToolsWPH314 Learn Windows Phone 7 Development by Creating a Robotic T-Shirt CannonWPH312 Understanding Marketplace and Making Money with WP7 Applications
Related Windows Phone Content – Interactive Session & HOL
Windows Phone Interactive SessionsWindows Phone 7 Demo Only!Microsoft’s Next Generation Mobile Enterprise Application Platform (MEAP)
Windows Phone 7 Application PerformancePrepare for Windows Phone 7 Development! Coding practices you should start using now in Windows Mobile
Windows Phone Hands On LabsHello Windows Phone - Building Your first Windows Phone ApplicationMicrosoft Silverlight for Windows PhoneMicrosoft XNA Framework 4.0 for Windows PhonesUsing Push Notifications and Windows Communication Foundation (WCF) Services
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
Complete an evaluation on CommNet and enter to win!
Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st
http://northamerica.msteched.com/registration
You can also register at the
North America 2011 kiosk located at registrationJoin us in Atlanta next year
© 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.
JUNE 7-10, 2010 | NEW ORLEANS, LA