Your SlideShare is downloading. ×
10 things to make you a Great Mobile Web Developer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

10 things to make you a Great Mobile Web Developer

2,601

Published on

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

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,601
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
1
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 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
    • 14. 3. Set The ViewPort
      <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

    ×