From desktop to mobile web
Download as PPTX, PDF1 like689 views
The document discusses developing mobile web experiences. It covers topics like understanding the mobile landscape with different phones and browsers. It recommends a single responsive site over separate mobile and desktop sites. It also discusses techniques like progressive enhancement, touch patterns, and frameworks like jQuery Mobile. The goal is to provide an accessible and optimized experience across all mobile devices.
From desktop to mobile web
- 1. From Desktop Web To Winning Mobile Web ExperienceChris LoveTellago Inc.http://ProfessionalASPNET.comhttp://Twitter.com/ChrisLove
- 3. ReferencesMobile Web BooksProgramming the Mobile Webhttp://amzn.to/bZMOchMobile Web Development http://amzn.to/9cvDoEMobile Design and Developmenthttp://amzn.to/hh8cPdhttp://www.w3.org/TR/mobile-bp/Introduction To Mobile Webhttp://dev.opera.com/articles/view/introduction-to-the-mobile-web/
- 4. Why Mobile Web?You Should Attend My “10 Things to Make You A Great Mobile Web Developer” session.http://tinyurl.com/10mobwebWhy You Need To Build Mobile Web Siteshttp://tinyurl.com/whymobweb
- 7. “Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.” MobileMarketer.comhttp://www.mobilemarketer.com/cms/news/research/7342.html
- 8. “We often see double consumption and usage on touchscreen devices versus non-touch interfaces,” he said. “The mobile Web is becoming more app-like in appearance and experience, and the likelihood is that the mobile Web and apps will continue to coexist.As the industry pushes towards the HTML 5 standard, the Web is becoming more app-like, so there’s an increasing convergence between the appearance and experience.” MobileMarketer.comhttp://www.mobilemarketer.com/cms/news/research/7342.html
- 9. “The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.” MobileMarketer.comhttp://www.mobilemarketer.com/cms/news/research/7342.htmlDon’t Forget TableTs
- 10. Understand the LandscapeLots of Phones Out There!Several BrowsersOpera, Safari, IE, FireFox, many others you never heard ofProxy BrowsersOpera Mini
- 11. One Site for Mobile & Desktop?http://mysite.comhttp://mysite.com/mCreates A Mesh of two client platforms in single project
- 12. Handling RedirectionWURFLNo Not This Guy ->Wireless Universal Resource Filehttp://wurfl.sourceforge.net/XML configuration file which contains information about capabilities and features of many mobile devices
- 13. 51 Degrees.NET Library to Manage Redirectionhttp://51degrees.codeplex.com/
- 14. Demo
- 15. Page LayoutNavigationContextProgressive EnhancementTouch Design Patterns
- 16. NavigationDecide What Is Useful To Your User80% Of The Desktop Is Not Useful MobileDefine Use CasesTry For 3 Click SuccessTry to Predict User Path
- 18. Use ListUse Vertical ListsOLULDL (Definition List)Consider Accordians
- 19. Demo
- 20. ContextWhere Is Your User?Why Are They Accessing My Site?What Are They Looking For?What Can Your Mobile Platform Offer for Success?This Is Information Architecture
- 21. Organizing The SiteBack To The Code
- 22. Progressive EnhancementBasic content is accessible to all browsers.Basic functionality is accessible to all browsers.Semantic markup contains all content.Enhanced layout is provided by externally linked CSS.Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
- 23. Touch PatternsConsider Hidden AreasProvide SpaceFeedbackTouch Ref Guidehttp://tinyurl.com/tchref
- 24. CSS For Mobilewap-accesskeywap-marqueeForm Extensions-wap-input-format-wap-input-required<input type="text" name="zip" style="-wap-input-format: '5N'; -wap-input-required: true" />
- 25. 8. AJAXjQuery & Other Frameworks Work w/LimitationsjQuery Mobile - jQueryMobile.comDo Not Assume It Is Available
- 26. jQuery MobileProvide Common Framework Across DevicesBrowser Capability Rating
- 27. JS Mobile ExtensionsMessagingAddress book managementGeolocationGalleryCameraCalendarDevice status informationNative menus
- 28. ImagesLimit to Logo, Product or MapDo NOT use forBackgroundsButtonsIconsCompressThe mandatory attributes for an img tag are src, width, height, and alt