How To Create Web Sites For Mobile Clients


Published on

This is a deck I used at several meetings.

Published in: Technology
  • Be the first to comment

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

No notes for slide

How To Create Web Sites For Mobile Clients

  1. 1. How to create web sites for mobile clients using . NET 4.0<br />Woody Pewitt<br />Product Manager<br />MindTouch<br /><br /><br />
  2. 2. Welcome to a Technology Revolution <br />
  3. 3. Rare availability<br />Desired functionality<br />Expensive initial cost<br />Ever reducing costs and greater availability<br />And it all started in…<br />1910<br />
  4. 4.
  5. 5. “Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.”<br /> —Jon Agar , Constant Touch<br />
  6. 6.
  7. 7.
  8. 8. Staggering Numbers<br />1996GSM phones in 103 countries<br />2000 10 million i-mode users (Japan)<br />2002 1 billion mobile phone users worldwide<br />2009 3 billion mobile phone users worldwide<br />
  9. 9. UK More mobile phones than humans...<br />
  10. 10. Problem<br />
  11. 11. Reader Poll<br />~400 Participants<br />159 Unique handsets<br />(Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)<br />19 Manufacturers<br />44 Countries<br />Cameron Moll<br />Test!<br /><br />
  12. 12.
  13. 13. So What Now?<br />Wireless Access Protocol (WAP)<br /><br />Simple HTML/XHTML<br />HTML 4.0 Guidelines for Mobile Access<br /><br />Mobile Web Best Practices 1.0<br /><br />
  14. 14. Content Adaption Strategies<br />Do nothing<br />Strip images and styling<br />Handheld stylesheets<br />Mobile-specific site/app<br />
  15. 15.
  16. 16. Content Adaption Strategies<br />One Size Fits All<br />No Change<br />Easy for the (lazy) Developer<br />Reasonable on Advanced Phones (ie: iPhone)<br />HORRIBLE for most phones.<br />Minimal Adaption<br />Cater to the lowest dominator <br />Will Look OK on most phones<br />But fails to leverage of features of more advanced phones<br />
  17. 17. Content Adaption Strategies: Redirection<br />Redirection<br />Server Recognizes the Browser is from a mobile device and redirects it to a different webpage (ie: .mobi v. .com)<br />Web Fragmentation / Can’t Share Bookmarks<br />dotMobi – ”this approach is probably best considered a temporary solution. “<br />
  18. 18. Content Adaption Strategies: Unification<br />One Site for Everyone<br />Server Recognizes the Browser is on a mobile device and reformats the website accordingly. <br />Allows for bookmark sharing<br />Hardest on Developers<br />Easiest on Users <br />dotMobi – ” ultimately leads to more satisfactory user experiences and repeat visits to your site. “<br />
  19. 19. Optimize Navigation<br />Provide a consistent but minimal navigation at the top<br />Use descriptive links texts, with access keys for the most important ones<br />Use an easy-to-type address for your entry page<br />Don't put too many links on a page, but make sure each page of your site is easily reachable<br />
  20. 20. Keep it Small<br />Minimize<br />Terse, efficient markup<br />Keep style sheets small<br />Page Size Limit<br />Be aware of memory limitations<br />Scrolling<br />Avoid 2D scrolling at all costs<br />
  21. 21. Minimize Network<br />Users have to pay!<br />Most people don’t have unlimited internet plans<br />Avoid<br />AutoRefresh<br />Redirection<br />Externally linked Resources<br />Enable Caching<br />
  22. 22. Guide Input<br />Minimize Keystrokes & Free Text<br />Provide Defaults<br />
  23. 23. Users on the Go<br />Clarity<br />Sparse<br />Short Page Title<br />Clear Central Meaning<br />Suitable for a Mobile Context<br />
  24. 24. Mobile Web Checkers<br />How to ‘debug’ HTML?<br />Use these programs to ensure your code is compliant <br />W3C Mobile Web Best Practices checker<br /><br /><br /><br />
  25. 25. Resources<br />Designing Web Sites for Windows Mobile Powered Devices <br /><br />Mobile Web Design<br /><br />How to Design and Build a Mobile Website<br /><br /> A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone<br /><br />Guidance<br /><br /><br />Mobile Web Best Practices 1.0<br /><br />Mobile Web<br /><br />ASP.NET Web Sites for Mobile Devices<br /><br />
  26. 26. Tools<br />Google Mobile Proxy<br /> <br />mobiReady testing tool <br /><br />Mobile Emulators<br /><br />