1 / 37

Designing and Developing for the Rich Mobile Web

Required Slide. SESSION CODE: WPH310. Designing and Developing for the Rich Mobile Web. Joe Marini Principal Program Manager, Windows Phone Microsoft Corporation. Agenda. Understanding the Mobile Context What makes mobile different?

sai
Download Presentation

Designing and Developing for the Rich Mobile Web

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Required Slide SESSION CODE: WPH310 Designing and Developing for the Rich Mobile Web Joe Marini Principal Program Manager, Windows Phone Microsoft Corporation

  2. 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

  3. We’ve Come a Long Way Remember this?

  4. 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>

  5. The Case for the Mobile Web

  6. Understanding The Mobile Context The Mobile Web isDifferent From the Desktop Limited / Virtual Keyboard Finger Pointing Device Small Screen, which can rotate Less Capable CPU / GPU, Small Storage Full Keyboard Accurate Pointing Device Large Screen, multiple monitors Powerful CPU / GPU, Big Disk Physical 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 Typically used from fixed, predictable locations Good for open-ended browsing Easy to switch among many tasks User is focused and comfortable Experience

  7. Understanding The Mobile Context Mobile 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

  8. Creating the Rich Mobile Web Guidelines for building rich mobile web sites

  9. Design for One Web • Try 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 using • If you’ve separated your content from presentation and behavior, this process is made much easier • Use separate CSS and JavaScript files • Don't embed styles or script in the page content's markup

  10. 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.

  11. 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

  12. Be Crisp, Clean, & Succinct • Design pages that use fewer fonts & colors • Dramatically increases readability • 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 sparing and judicious

  13. Minimize Required Input • Entering data on a phone can be tiresome and error-prone • This requires the user to focus on the task • Entering 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 possible • Use cookies to remember previous user input

  14. Example: Alaska Airlines Design for One Web. Design for the Finger.Focus. Be Crisp and Clean. Minimize. DEMO

  15. Designing & Developing for Mobile

  16. 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

  17. Adapting Content to Mobile Managed app that uses WebBrowser control to host Web content 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 Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile

  18. Mobile <META> Tags • Pages that have been laid out specifically for mobile devices 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” />

  19. The ViewportThe Viewport controls how content is laid out Device Screen Document Viewport

  20. Controlling the Viewport DEMO

  21. Multi-Serving Content • Same page, different devices, styled right • Usually involves some kind of detection • Client: use script to detect the browser's capabilities • Server: use code to detect User Agent string and specific devices • Caveats: • DO NOT use script on client to check the User Agent • DO NOT use User Agent detection to do things like work around shortcomings in specific browsers – use capability detection for that

  22. 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, 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)

  23. Multi-Serving Content and User Agent Detection DEMO

  24. IE Windows Phone 7 vs. IE Desktop • Frameset Handling • For usability reasons, IE Mobile expands frames and other scrollable containers to fit their contents. • Support for Navigating to XHTML files • Pages 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 • Additional Script Functions • getElementsByClassName(name) • querySelector(selector) • querySelectorAll(selector) • Viewport Settings • IE Mobile supports the following values:

  25. 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.

  26. Required Slide Track PMs will supply the content for this slide, which will be inserted during the final scrub. Track Resources • Visit http://developer.windowsphone.com Follow @joemarini on Twitter • Mobile IE Blog: http://blogs.msdn.com/iemobile

  27. Required Slide Speakers, please list the Breakout Sessions, Interactive Sessions, Labs and Demo Stations that are related to your session. 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

  28. Windows Phone Resources Questions? Demos? The Latest phones? Visit the Windows Phone Technical Learning Center for demos and more… • Business IT Resources www.windowsphone.com/business • Developer Resources developer.windowsphone.com • Experience Windows Phone 7 on-line and get a backstage pass www.windowsphone7.com

  29. Win a Windows Phone Contest Hat 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.

  30. Related Windows Phone Content – Breakout Sessions Mon &Tue Monday WPH301WP7: 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 Tuesday WPH203 Overview of the Windows Phone 7 Application Platform WPH313 Windows Phone 7 Architecture Deep Dive WPH304 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

  31. Related Windows Phone Content – Breakout Sessions Wed &Thu Wednesday WPH310 Designing and Developing for the Rich Mobile Web WPH311 Developing Mobile Code Today that will run on WP 7 Tomorrow WPH309 Silverlight performance on Windows Phone WPH307 Building Windows Phone Games with XNA WPH308 Building a High Performance 3D Game for Windows Phone Thursday WPH303 Understanding the Windows Phone 7 Development Tools WPH314 Learn Windows Phone 7 Development by Creating a Robotic T-Shirt Cannon WPH312 Understanding Marketplace and Making Money with WP7 Applications

  32. Related Windows Phone Content – Interactive Session & HOL Windows Phone Interactive Sessions Windows Phone 7 Demo Only! Microsoft’s Next Generation Mobile Enterprise Application Platform (MEAP) Windows Phone 7 Application Performance Prepare for Windows Phone 7 Development! Coding practices you should start using now in Windows Mobile Windows Phone Hands On Labs Hello Windows Phone - Building Your first Windows Phone Application Microsoft Silverlight for Windows Phone Microsoft XNA Framework 4.0 for Windows Phones Using Push Notifications and Windows Communication Foundation (WCF) Services

  33. Required Slide Resources Learning • Sessions On-Demand & Community • Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning • Resources for IT Professionals • Resources for Developers • http://microsoft.com/technet • http://microsoft.com/msdn

  34. Required Slide Complete an evaluation on CommNet and enter to win!

  35. 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

  36. © 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.

  37. Required Slide

More Related