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

10 things to make you a Great Mobile Web Developer

on

  • 2,991 views

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

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

Statistics

Views

Total Views
2,991
Views on SlideShare
2,987
Embed Views
4

Actions

Likes
2
Downloads
48
Comments
1

1 Embed 4

http://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Show sample using local storage for offline, back button support
  • Show sample using local storage for offline, back button support

10 things to make you a Great Mobile Web Developer 10 things to make you a Great Mobile Web Developer Presentation Transcript

  • 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!
  • Tellago
  • 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
  • 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 ;)
  • Market Reality
    http://on.mash.to/k38NZw
  • User Problems
  • Understand the Landscape
    Lots of Phones Out There!
    Several Browsers
    Opera, Safari, IE, FireFox, many others you never heard of
    Proxy Browsers
    Opera Mini
  • Opera
    “Opera Mobile has been installed on 125 million smartphones since 2004” Programming the Mobile Web
  • 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
  • 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
  • 2. Determine Content
    Reduce Form Pages
    Avoid Welcome Screens/Splash
    Predict User Actions Based On History
    Think Local Storage/Tombstoning
  • 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
  • 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
  • 3. Set The ViewPort
    • MetaTag
    • Width
    • Height
    • Initial-scale
    • User-scalable
    • Minimum-scale
    • Maximum-scale
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    http://tinyurl.com/wp7viewport
  • 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.
  • 4. Progressive Enhancement
  • Web Application Layers
    AJAX
    CSS
    HTML
    Server-Side Muckity Muck
  • 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
  • 5. Understand HTML
    Leverage HTML5 Semantics
    Realize HTML5 is much broader than Markup
  • 5. Typical Layout
    Header
    Navigation
    Content
    Footer
  • HTML5 Boilerplate
    http://html5boilerplate.com
    http://html5boilerplate.com/mobile/
  • 6. Understand CSS3
    Animations
    Gradients
    Transforms
    Shadows
    Rounded Corners
    Media Queries
    So Much More!!
  • 6. Transitions
    2D Transformations
    Shadows. Rounded Corners Etc
    3D Keyframe Animations!
  • 7. AJAX
    jQuery & Other Frameworks
    jQuery Mobile http://jQueryMobile.com
    Sencha Touch
    Drive Your Rich UI
  • 7. jQuery Mobile
    Provide Common Framework Across Devices
    Browser Capability Rating
  • 7. JS Mobile Frameworks
    SenchaTouch
    http://bit.ly/boAFA7
    jQTouch
    Really Nice Transitions
    Is a Commercial Product
  • 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
  • 8. Touch Gestures
    touchstart
    touchend
    touchmove
    touchenter
    touchleave
    gouchcancel
    gesturestart*
    gesturechange*
    gestureend*
    http://bit.ly/ion0Um
    http://bit.ly/bYeSRT
    * Safari Only
  • 8. Touch Gestures
    TAP === Click
    Double Tap !== Double Click
    Implement a DoubleTap Detection Pattern
    <imgsrc="bigbutton.png" onclick="tap(tapOnce, tapTwice)" />
  • 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
  • 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
  • 10. Offline
    Application Cache
    Local Storage
    localstorage
    sessionstorage
  • The Device APIS
    Messaging
    Address book management
    Geolocation
    Gallery
    Camera
    Calendar
    Device status information
    Native menus