0
10 Things to Make You A Great Mobile Web Developer<br />Chris Love<br />Tellago Inc.<br />http://ProfessionalASPNET.com<br...
Tellago<br />
References<br />Mobile Web Books<br />Programming the Mobile Web<br />http://amzn.to/bZMOch<br />Mobile Web Development <b...
1. Know The Landscape<br />Mobile Devices Are Prevalent Around the World<br />SmartPhones/Devices Becoming Common<br />Mob...
Market Reality<br />http://on.mash.to/k38NZw<br />
User Problems<br />
Understand the Landscape<br />Lots of Phones Out There!<br />Several Browsers<br />Opera, Safari, IE, FireFox, many others...
Opera<br />“Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web<br />
Windows Phone 7 IE 9<br />Like Desktop<br />Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff<br />GPU Speed<br />Does N...
2. Determine Content<br />Define Use Cases<br />Order Cases by Most Frequent for Mobile<br />Make Cases Successful within ...
2. Determine Content<br />Reduce Form Pages<br />Avoid Welcome Screens/Splash<br />Predict User Actions Based On History<b...
2. Context<br />Where Is The User<br />Why are They on Your Site<br />What are they looking for<br />What can you offer fo...
3. UnderStand The ViewPort<br />Viewable Area on Device<br />May actually be very wide<br />iPhone is actually 980pixels w...
3. Set The ViewPort<br /><ul><li>MetaTag
Width
Height
Initial-scale
User-scalable
Minimum-scale
Maximum-scale</li></ul><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/><br />http:/...
4. Progressive Enhancement<br />Basic content is accessible to all browsers.<br />Basic functionality is accessible to all...
4. Progressive Enhancement<br />
Web Application Layers<br />AJAX<br />CSS<br />HTML<br />Server-Side Muckity Muck<br />
4.b Single Page SItes<br />Use AJAX to Transition Between Content<br />Use HashTags to Track State<br />jQuery BBQ plugin<...
5. Understand HTML<br />Leverage HTML5 Semantics<br />Realize HTML5 is much broader than Markup<br />
5. Typical Layout<br />Header<br />Navigation<br />Content<br />Footer<br />
HTML5 Boilerplate<br />http://html5boilerplate.com<br />http://html5boilerplate.com/mobile/<br />
6. Understand CSS3<br />Animations<br />Gradients<br />Transforms<br />Shadows<br />Rounded Corners<br />Media Queries<br ...
6. Transitions<br />2D Transformations<br />Shadows. Rounded Corners Etc<br />3D Keyframe Animations!<br />
7. AJAX<br />jQuery & Other Frameworks<br />jQuery Mobile http://jQueryMobile.com<br />Sencha Touch<br />Drive Your Rich U...
7. jQuery Mobile<br />Provide Common Framework Across Devices<br />Browser Capability Rating<br />
7. JS Mobile Frameworks<br />SenchaTouch<br />http://bit.ly/boAFA7<br />jQTouch<br />Really Nice Transitions<br />Is a Com...
8. Touch Gestures<br />Fingers Are Fat<br />20px Spacing<br />Primary Items Min 40px W &H<br />Provide Quick Feedback of T...
Upcoming SlideShare
Loading in...5
×

10 things to make you a Great Mobile Web Developer

2,643

Published on

10 Things Web Developers Should know to develop successful Mobile Web Sites.

Published in: Technology, Business
1 Comment
2 Likes
Statistics
Notes
  • This is a session on why mobile web sites are important and 9 other things you need to be aware of when developing and architecting a mobile web site.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,643
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
50
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • Show sample using local storage for offline, back button support
  • Show sample using local storage for offline, back button support
  • Transcript of "10 things to make you a Great Mobile Web Developer"

    1. 1. 10 Things to Make You A Great Mobile Web Developer<br />Chris Love<br />Tellago Inc.<br />http://ProfessionalASPNET.com<br />http://Twitter.com/ChrisLove<br />Now With More Code!<br />
    2. 2. Tellago<br />
    3. 3. References<br />Mobile Web Books<br />Programming the Mobile Web<br />http://amzn.to/bZMOch<br />Mobile Web Development <br />http://amzn.to/9cvDoE<br />Mobile Design and Development<br />http://amzn.to/hh8cPd<br />
    4. 4. 1. Know The Landscape<br />Mobile Devices Are Prevalent Around the World<br />SmartPhones/Devices Becoming Common<br />Mobile Data Plans (3/4G)<br />HTML 5 Is Here, Embrace It ;)<br />
    5. 5. Market Reality<br />http://on.mash.to/k38NZw<br />
    6. 6. User Problems<br />
    7. 7. 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 />
    8. 8. Opera<br />“Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web<br />
    9. 9. Windows Phone 7 IE 9<br />Like Desktop<br />Supports Basic HTML5, CSS3, Canvas, Media Tag Stuff<br />GPU Speed<br />Does Not Support Touch<br />Does Not Support Input Types<br />http://bit.ly/ij3RAj<br />http://bit.ly/kYOZ5W<br />
    10. 10. 2. Determine Content<br />Define Use Cases<br />Order Cases by Most Frequent for Mobile<br />Make Cases Successful within 3 clicks<br />Always Offer Link to Desktop Site<br />Determine if User Location Matters<br />
    11. 11. 2. Determine Content<br />Reduce Form Pages<br />Avoid Welcome Screens/Splash<br />Predict User Actions Based On History<br />Think Local Storage/Tombstoning<br />
    12. 12. 2. Context<br />Where Is The User<br />Why are They on Your Site<br />What are they looking for<br />What can you offer for mobile user to solve problem<br />Where will the user be accessing the site<br />
    13. 13. 3. UnderStand The ViewPort<br />Viewable Area on Device<br />May actually be very wide<br />iPhone is actually 980pixels wide<br />Internet Explorer Assumes 1024 pixels wide<br />http://bit.ly/e18svU<br />
    14. 14. 3. Set The ViewPort<br /><ul><li>MetaTag
    15. 15. Width
    16. 16. Height
    17. 17. Initial-scale
    18. 18. User-scalable
    19. 19. Minimum-scale
    20. 20. Maximum-scale</li></ul><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/><br />http://tinyurl.com/wp7viewport<br />
    21. 21. 4. 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 />
    22. 22. 4. Progressive Enhancement<br />
    23. 23. Web Application Layers<br />AJAX<br />CSS<br />HTML<br />Server-Side Muckity Muck<br />
    24. 24. 4.b Single Page SItes<br />Use AJAX to Transition Between Content<br />Use HashTags to Track State<br />jQuery BBQ plugin<br />http://bit.ly/abippr<br />Allows Transition Effects<br />jQuery Mobile, jqTouch & Sencha Leverage<br />
    25. 25. 5. Understand HTML<br />Leverage HTML5 Semantics<br />Realize HTML5 is much broader than Markup<br />
    26. 26. 5. Typical Layout<br />Header<br />Navigation<br />Content<br />Footer<br />
    27. 27. HTML5 Boilerplate<br />http://html5boilerplate.com<br />http://html5boilerplate.com/mobile/<br />
    28. 28. 6. Understand CSS3<br />Animations<br />Gradients<br />Transforms<br />Shadows<br />Rounded Corners<br />Media Queries<br />So Much More!!<br />
    29. 29. 6. Transitions<br />2D Transformations<br />Shadows. Rounded Corners Etc<br />3D Keyframe Animations!<br />
    30. 30. 7. AJAX<br />jQuery & Other Frameworks<br />jQuery Mobile http://jQueryMobile.com<br />Sencha Touch<br />Drive Your Rich UI<br />
    31. 31. 7. jQuery Mobile<br />Provide Common Framework Across Devices<br />Browser Capability Rating<br />
    32. 32. 7. JS Mobile Frameworks<br />SenchaTouch<br />http://bit.ly/boAFA7<br />jQTouch<br />Really Nice Transitions<br />Is a Commercial Product<br />
    33. 33. 8. Touch Gestures<br />Fingers Are Fat<br />20px Spacing<br />Primary Items Min 40px W &H<br />Provide Quick Feedback of Touched Item<br />Include Auto-Clear Feature for Text Inputs<br />
    34. 34. 8. Touch Gestures<br />touchstart<br />touchend<br />touchmove<br />touchenter<br />touchleave<br />gouchcancel<br />gesturestart*<br />gesturechange*<br />gestureend*<br />http://bit.ly/ion0Um<br />http://bit.ly/bYeSRT<br />* Safari Only<br />
    35. 35. 8. Touch Gestures<br />TAP === Click<br />Double Tap !== Double Click<br />Implement a DoubleTap Detection Pattern<br /><imgsrc="bigbutton.png" onclick="tap(tapOnce, tapTwice)" /><br />
    36. 36. 9. 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 />
    37. 37. 9. Inline Images<br />IE 8+, Other newer browsers<br />Convert to BASE64 Encoded Text<br />Use gZip Compression<br />This is a Data Url<br />Can be used in CSS files<br />
    38. 38. 10. Offline<br />Application Cache<br />Local Storage<br />localstorage<br />sessionstorage<br />
    39. 39. The Device APIS<br />Messaging<br />Address book management<br />Geolocation<br />Gallery<br />Camera<br />Calendar<br />Device status information<br />Native menus<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×