From desktop to mobile web
Upcoming SlideShare
Loading in...5
×
 

From desktop to mobile web

on

  • 1,196 views

 

Statistics

Views

Total Views
1,196
Views on SlideShare
1,196
Embed Views
0

Actions

Likes
1
Downloads
6
Comments
0

0 Embeds 0

No embeds

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…
Post Comment
Edit your comment

From desktop to mobile web From desktop to mobile web Presentation Transcript

  • From Desktop Web To Winning Mobile Web Experience
    Chris Love
    Tellago Inc.
    http://ProfessionalASPNET.com
    http://Twitter.com/ChrisLove
  • Books
    Coming Soon…
  • 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
    http://www.w3.org/TR/mobile-bp/
    Introduction To Mobile Web
    http://dev.opera.com/articles/view/introduction-to-the-mobile-web/
  • Why Mobile Web?
    You Should Attend My “10 Things to Make You A Great Mobile Web Developer” session.
    http://tinyurl.com/10mobweb
    Why You Need To Build Mobile Web Sites
    http://tinyurl.com/whymobweb
  • Why Mobile Web?
  • User Problems
  • “Among U.S. mobile phone users, in May 2010 65.2 percent sent a text message to another phone, 31.9 percent used their phone’s browser, 30 percent used/downloaded applications, 22.5 percent played mobile games and 20.8 percent accessed a social networking site or blog.”
    MobileMarketer.com
    http://www.mobilemarketer.com/cms/news/research/7342.html
  • “We often see double consumption and usage on touchscreen devices versus non-touch interfaces,” he said. “The mobile Web is becoming more app-like in appearance and experience, and the likelihood is that the mobile Web and apps will continue to coexist.
    As the industry pushes towards the HTML 5 standard, the Web is becoming more app-like, so there’s an increasing convergence between the appearance and experience.”
    MobileMarketer.com
    http://www.mobilemarketer.com/cms/news/research/7342.html
  • “The key thing for marketers is the combination of larger screens and the touch Web really shouldn’t be underestimated,” Mr. Elkin said. “There are much higher interaction rates for the Web and apps among smartphone owners, and on a bigger canvas we expect those deltas to go even higher.”
    MobileMarketer.com
    http://www.mobilemarketer.com/cms/news/research/7342.html
    Don’t Forget TableTs
  • Understand the Landscape
    Lots of Phones Out There!
    Several Browsers
    Opera, Safari, IE, FireFox, many others you never heard of
    Proxy Browsers
    Opera Mini
  • One Site for Mobile & Desktop?
    http://mysite.com
    http://mysite.com/m
    Creates A Mesh of two client platforms in single project
  • Handling Redirection
    WURFL
    No Not This Guy ->
    Wireless Universal Resource File
    http://wurfl.sourceforge.net/
    XML configuration file which contains information about capabilities and features of many mobile devices
  • 51 Degrees
    .NET Library to Manage Redirection
    http://51degrees.codeplex.com/
  • Demo
  • Page Layout
    Navigation
    Context
    Progressive Enhancement
    Touch Design Patterns
  • Navigation
    Decide What Is Useful To Your User
    80% Of The Desktop Is Not Useful Mobile
    Define Use Cases
    Try For 3 Click Success
    Try to Predict User Path
  • Typical Layout
    Header
    Navigation
    Content
    Footer
  • Use List
    Use Vertical Lists
    OL
    UL
    DL (Definition List)
    Consider Accordians
  • Demo
  • Context
    Where Is Your User?
    Why Are They Accessing My Site?
    What Are They Looking For?
    What Can Your Mobile Platform Offer for Success?
    This Is Information Architecture
  • Organizing The Site
    Back To The Code
  • 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.
  • Touch Patterns
    Consider Hidden Areas
    Provide Space
    Feedback
    Touch Ref Guide
    http://tinyurl.com/tchref
  • CSS For Mobile
    wap-accesskey
    wap-marquee
    Form Extensions
    -wap-input-format
    -wap-input-required
    <input type="text" name="zip" style="-wap-input-format: '5N'; -wap-input-required: true" />
  • 8. AJAX
    jQuery & Other Frameworks Work w/Limitations
    jQuery Mobile - jQueryMobile.com
    Do Not Assume It Is Available
  • jQuery Mobile
    Provide Common Framework Across Devices
    Browser Capability Rating
  • JS Mobile Extensions
    Messaging
    Address book management
    Geolocation
    Gallery
    Camera
    Calendar
    Device status information
    Native menus
  • 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