Chris Love presentation on 10 Things To Make You a Great Mobile Web Developer

1. 10 Things to Make You A Great Mobile Web Developer Chris Love Tellago Inc. http://ProfessionalASPNET.com http://Twitter.com/ChrisLove Now With More Code!

2. Tellago

3. References Mobile Web Books Programming the Mobile Web http://amzn.to/bZMOch Mobile Web Development http://amzn.to/9cvDoE Mobile Design and Development http://amzn.to/hh8cPd

4. 1. Know The Landscape Mobile Devices Are Prevalent Around the World SmartPhones/Devices Becoming Common Mobile Data Plans (3/4G) HTML 5 Is Here, Embrace It ;)

5. Market Reality http://on.mash.to/k38NZw

6. User Problems

7. Understand the Landscape Lots of Phones Out There! Several Browsers Opera, Safari, IE, FireFox, many others you never heard of Proxy Browsers Opera Mini

8. Opera “Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web

9. Windows Phone 7 IE 9 Like Desktop Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff GPU Speed Does Not Support Touch Does Not Support Input Types http://bit.ly/ij3RAj http://bit.ly/kYOZ5W

10. 2. Determine Content Define Use Cases Order Cases by Most Frequent for Mobile Make Cases Successful within 3 clicks Always Offer Link to Desktop Site Determine if User Location Matters

11. 2. Determine Content Reduce Form Pages Avoid Welcome Screens/Splash Predict User Actions Based On History Think Local Storage/Tombstoning

12. 2. Context Where Is The User Why are They on Your Site What are they looking for What can you offer for mobile user to solve problem Where will the user be accessing the site

13. 3. UnderStand The ViewPort Viewable Area on Device May actually be very wide iPhone is actually 980pixels wide Internet Explorer Assumes 1024 pixels wide http://bit.ly/e18svU

15. Width

16. Height

17. Initial-scale

18. User-scalable

19. Minimum-scale

20. Maximum-scale<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> http://tinyurl.com/wp7viewport

21. 4. Progressive Enhancement Basic 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.

22. 4. Progressive Enhancement

23. Web Application Layers AJAX CSS HTML Server-Side Muckity Muck

24. 4.b Single Page SItes Use AJAX to Transition Between Content Use HashTags to Track State jQuery BBQ plugin http://bit.ly/abippr Allows Transition Effects jQuery Mobile, jqTouch & Sencha Leverage

25. 5. Understand HTML Leverage HTML5 Semantics Realize HTML5 is much broader than Markup

26. 5. Typical Layout Header Navigation Content Footer

27. HTML5 Boilerplate http://html5boilerplate.com http://html5boilerplate.com/mobile/

28. 6. Understand CSS3 Animations Gradients Transforms Shadows Rounded Corners Media Queries So Much More!!

29. 6. Transitions 2D Transformations Shadows. Rounded Corners Etc 3D Keyframe Animations!

30. 7. AJAX jQuery & Other Frameworks jQuery Mobile http://jQueryMobile.com Sencha Touch Drive Your Rich UI

31. 7. jQuery Mobile Provide Common Framework Across Devices Browser Capability Rating

32. 7. JS Mobile Frameworks SenchaTouch http://bit.ly/boAFA7 jQTouch Really Nice Transitions Is a Commercial Product

33. 8. Touch Gestures Fingers Are Fat 20px Spacing Primary Items Min 40px W &H Provide Quick Feedback of Touched Item Include Auto-Clear Feature for Text Inputs

34. 8. Touch Gestures touchstart touchend touchmove touchenter touchleave gouchcancel gesturestart* gesturechange* gestureend* http://bit.ly/ion0Um http://bit.ly/bYeSRT * Safari Only

35. 8. Touch Gestures TAP === Click Double Tap !== Double Click Implement a DoubleTap Detection Pattern <imgsrc="bigbutton.png" onclick="tap(tapOnce, tapTwice)" />

36. 9. Images Limit to Logo, Product or Map Do NOT use for Backgrounds Buttons Icons Compress The mandatory attributes for an img tag are src, width, height, and alt

37. 9. Inline Images IE 8+, Other newer browsers Convert to BASE64 Encoded Text Use gZip Compression This is a Data Url Can be used in CSS files

38. 10. Offline Application Cache Local Storage localstorage sessionstorage

39. The Device APIS Messaging Address book management Geolocation Gallery Camera Calendar Device status information Native menus