How To Create Web Sites For Mobile Clients

2,282 views

Published on

This is a deck I used at several meetings.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,282
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
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 />woodyp@mindtouch.com<br />woody@pewitt.org<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 />http://cameronmoll.com/mobile/mkp/<br />
  12. 12.
  13. 13. So What Now?<br />Wireless Access Protocol (WAP)<br />http://en.wikipedia.org/wiki/Wireless_Application_Protocol<br />Simple HTML/XHTML<br />HTML 4.0 Guidelines for Mobile Access<br />http://www.w3.org/TR/NOTE-html40-mobile/<br />Mobile Web Best Practices 1.0<br />http://www.w3.org/TR/mobile-bp/<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 />http://validator.w3.org/mobile/<br />Ready.mobi<br />http://ready.mobi/<br />
  25. 25. Resources<br />Designing Web Sites for Windows Mobile Powered Devices <br />http://msdn.microsoft.com/en-us/library/bb415387.aspx<br />Mobile Web Design<br />http://www.cameronmoll.com/archives/000398.html<br />How to Design and Build a Mobile Website<br />http://www.webpagefx.com/design-build-mobile-web-site.html<br /> A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone<br />http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5-sites-to-visit-from-your-android-phone/<br />Guidance<br />http://en.wikipedia.org/wiki/Mobile_Web<br />http://www.w3.org/2006/07/Mobile_Web_Design.pdf<br />Mobile Web Best Practices 1.0<br />http://www.w3.org/TR/mobile-bp/<br />Mobile Web<br />http://www.w3.org/standards/webdesign/mobilweb<br />ASP.NET Web Sites for Mobile Devices<br />http://msdn.microsoft.com/en-us/library/ms178619(VS.100).aspx<br />
  26. 26. Tools<br />Google Mobile Proxy<br />http://www.google.com/gwt/n <br />mobiReady testing tool <br />http://ready.mobi/<br />Mobile Emulators<br />http://mobiforge.com/emulators/page/mobile-emulators<br />

×