From desktop to mobile web


Published on

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

From desktop to mobile web

  1. 1. From Desktop Web To Winning Mobile Web Experience<br />Chris Love<br />Tellago Inc.<br /><br /><br />
  2. 2. Books<br />Coming Soon…<br />
  3. 3. References<br />Mobile Web Books<br />Programming the Mobile Web<br /><br />Mobile Web Development <br /><br />Mobile Design and Development<br /><br /><br />Introduction To Mobile Web<br /><br />
  4. 4. Why Mobile Web?<br />You Should Attend My “10 Things to Make You A Great Mobile Web Developer” session.<br /><br />Why You Need To Build Mobile Web Sites<br /><br />
  5. 5. Why Mobile Web?<br />
  6. 6. User Problems<br />
  7. 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.”<br /><br /><br />
  8. 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.<br />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.”<br /><br /><br />
  9. 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.”<br /><br /><br />Don’t Forget TableTs<br />
  10. 10. Understand the Landscape<br />Lots of Phones Out There!<br />Several Browsers<br />Opera, Safari, IE, FireFox, many others you never heard of<br />Proxy Browsers<br />Opera Mini<br />
  11. 11. One Site for Mobile & Desktop?<br /><br /><br />Creates A Mesh of two client platforms in single project<br />
  12. 12. Handling Redirection<br />WURFL<br />No Not This Guy -><br />Wireless Universal Resource File<br /><br />XML configuration file which contains information about capabilities and features of many mobile devices<br />
  13. 13. 51 Degrees<br />.NET Library to Manage Redirection<br /><br />
  14. 14. Demo<br />
  15. 15. Page Layout<br />Navigation<br />Context<br />Progressive Enhancement<br />Touch Design Patterns<br />
  16. 16. Navigation<br />Decide What Is Useful To Your User<br />80% Of The Desktop Is Not Useful Mobile<br />Define Use Cases<br />Try For 3 Click Success<br />Try to Predict User Path<br />
  17. 17. Typical Layout<br />Header<br />Navigation<br />Content<br />Footer<br />
  18. 18. Use List<br />Use Vertical Lists<br />OL<br />UL<br />DL (Definition List)<br />Consider Accordians<br />
  19. 19. Demo<br />
  20. 20. Context<br />Where Is Your User?<br />Why Are They Accessing My Site?<br />What Are They Looking For?<br />What Can Your Mobile Platform Offer for Success?<br />This Is Information Architecture<br />
  21. 21. Organizing The Site<br />Back To The Code<br />
  22. 22. Progressive Enhancement<br />Basic content is accessible to all browsers.<br />Basic functionality is accessible to all browsers.<br />Semantic markup contains all content.<br />Enhanced layout is provided by externally linked CSS.<br />Enhanced behavior is provided by unobtrusive, externally linked JavaScript.<br />
  23. 23. Touch Patterns<br />Consider Hidden Areas<br />Provide Space<br />Feedback<br />Touch Ref Guide<br /><br />
  24. 24. CSS For Mobile<br />wap-accesskey<br />wap-marquee<br />Form Extensions<br />-wap-input-format<br />-wap-input-required<br /><input type="text" name="zip" style="-wap-input-format: '5N'; -wap-input-required: true" /><br />
  25. 25. 8. AJAX<br />jQuery & Other Frameworks Work w/Limitations<br />jQuery Mobile -<br />Do Not Assume It Is Available<br />
  26. 26. jQuery Mobile<br />Provide Common Framework Across Devices<br />Browser Capability Rating<br />
  27. 27. JS Mobile Extensions<br />Messaging<br />Address book management<br />Geolocation<br />Gallery<br />Camera<br />Calendar<br />Device status information<br />Native menus<br />
  28. 28. Images<br />Limit to Logo, Product or Map<br />Do NOT use for<br />Backgrounds<br />Buttons<br />Icons<br />Compress<br />The mandatory attributes for an img tag are src, width, height, and alt<br />