This is a deck I used at several meetings.

1. How to create web sites for mobile clients using . NET 4.0 Woody Pewitt Product Manager MindTouch woodyp@mindtouch.com woody@pewitt.org

2. Welcome to a Technology Revolution

3. Rare availability Desired functionality Expensive initial cost Ever reducing costs and greater availability And it all started in… 1910

5. “Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.” —Jon Agar , Constant Touch

8. Staggering Numbers 1996GSM phones in 103 countries 2000 10 million i-mode users (Japan) 2002 1 billion mobile phone users worldwide 2009 3 billion mobile phone users worldwide

9. UK More mobile phones than humans...

10. Problem

11. Reader Poll ~400 Participants 159 Unique handsets (Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...) 19 Manufacturers 44 Countries Cameron Moll Test! http://cameronmoll.com/mobile/mkp/

13. So What Now? Wireless Access Protocol (WAP) http://en.wikipedia.org/wiki/Wireless_Application_Protocol Simple HTML/XHTML HTML 4.0 Guidelines for Mobile Access http://www.w3.org/TR/NOTE-html40-mobile/ Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/

14. Content Adaption Strategies Do nothing Strip images and styling Handheld stylesheets Mobile-specific site/app

16. Content Adaption Strategies One Size Fits All No Change Easy for the (lazy) Developer Reasonable on Advanced Phones (ie: iPhone) HORRIBLE for most phones. Minimal Adaption Cater to the lowest dominator Will Look OK on most phones But fails to leverage of features of more advanced phones

17. Content Adaption Strategies: Redirection Redirection Server Recognizes the Browser is from a mobile device and redirects it to a different webpage (ie: .mobi v. .com) Web Fragmentation / Can’t Share Bookmarks dotMobi – ”this approach is probably best considered a temporary solution. “

18. Content Adaption Strategies: Unification One Site for Everyone Server Recognizes the Browser is on a mobile device and reformats the website accordingly. Allows for bookmark sharing Hardest on Developers Easiest on Users dotMobi – ” ultimately leads to more satisfactory user experiences and repeat visits to your site. “

19. Optimize Navigation Provide a consistent but minimal navigation at the top Use descriptive links texts, with access keys for the most important ones Use an easy-to-type address for your entry page Don't put too many links on a page, but make sure each page of your site is easily reachable

20. Keep it Small Minimize Terse, efficient markup Keep style sheets small Page Size Limit Be aware of memory limitations Scrolling Avoid 2D scrolling at all costs

21. Minimize Network Users have to pay! Most people don’t have unlimited internet plans Avoid AutoRefresh Redirection Externally linked Resources Enable Caching

22. Guide Input Minimize Keystrokes & Free Text Provide Defaults

23. Users on the Go Clarity Sparse Short Page Title Clear Central Meaning Suitable for a Mobile Context

24. Mobile Web Checkers How to ‘debug’ HTML? Use these programs to ensure your code is compliant W3C Mobile Web Best Practices checker http://validator.w3.org/mobile/ Ready.mobi http://ready.mobi/

25. Resources Designing Web Sites for Windows Mobile Powered Devices http://msdn.microsoft.com/en-us/library/bb415387.aspx Mobile Web Design http://www.cameronmoll.com/archives/000398.html How to Design and Build a Mobile Website http://www.webpagefx.com/design-build-mobile-web-site.html A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5-sites-to-visit-from-your-android-phone/ Guidance http://en.wikipedia.org/wiki/Mobile_Web http://www.w3.org/2006/07/Mobile_Web_Design.pdf Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/ Mobile Web http://www.w3.org/standards/webdesign/mobilweb ASP.NET Web Sites for Mobile Devices http://msdn.microsoft.com/en-us/library/ms178619(VS.100).aspx

26. Tools Google Mobile Proxy http://www.google.com/gwt/n mobiReady testing tool http://ready.mobi/ Mobile Emulators http://mobiforge.com/emulators/page/mobile-emulators