Your SlideShare is downloading. ×
  • Like
  • Save


Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Web Best Practices


Session content from SoCal Code Camp LA III & My DevExpress webniar

Session content from SoCal Code Camp LA III & My DevExpress webniar

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Mobile Web Best Practices
    Woody Pewitt
    Technical Evangelist
  • 2. Welcome to a Technology Revolution
  • 3. Rare availability
    Desired functionality
    Expensive initial cost
    Ever reducing costs and greater availability
    And it all started in…
  • 4.
  • 5. “Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.”
    —Jon Agar , Constant Touch
  • 6.
  • 7.
  • 8. Staggering Numbers
    1996GSM phones in 103 countries
    2000 10 million i-mode users (Japan)
    2002 1 billion mobile phone users worldwide
    2009 3 billion mobile phone users worldwide
  • 9. UK More mobile phones than humans...
  • 10. Problem
  • 11. Reader Poll
    ~400 Participants
    159 Unique handsets
    (Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)
    19 Manufacturers
    44 Countries
    Cameron Moll
  • 12.
  • 13. So What Now?
    Wireless Access Protocol (WAP)
    Simple HTML/XHTML
    HTML 4.0 Guidelines for Mobile Access
    Mobile Web Best Practices 1.0
  • 14. W3c Default Delivery Context
    Usable Screen Width
    120 pixels, minimum.
    Markup Language Support
    XHTML Basic 1.1 delivered with content type application/xhtml+xml.
    Character Encoding
    UTF-8 [UTF-8].
    Image Format Support
    GIF 89a.
    Maximum Total Page Weight
    20 kilobytes.
    256 Colors, minimum.
    Style Sheet Support
    CSS Level 1. In addition, CSS Level 2 @media rule together with the handheld and all media types.
    HTTP/1.0 or more recent [HTTP1.1].
    No support for client side scripting.
  • 15. Content Adaption Strategies
    Do nothing
    Strip images and styling
    Handheld stylesheets
    Mobile-specific site/app
  • 16.
  • 17. Content Adaption Strategies
    One Size Fits All
    No Change
    Easy for the (lazy) Developer
    Reasonable on Advanced Phones (ie: iPhone)
    HORRIBLE for most phones.
    Minimal Adaption
    Cater to the lowest dominator
    Will Look OK on most phones
    But fails to leverage of features of more advanced phones
  • 18. Content Adaption Strategies: Redirection
    Server Recognizes the Browser is from a mobile device and redirects it to a different webpage (ie: .mobi v. .com)
    Web Fragmentation / Can’t Share Bookmarks
    dotMobi – ”this approach is probably best considered a temporary solution. “
  • 19. Content Adaption Strategies: Unification
    One Site for Everyone
    Server Recognizes the Browser is on a mobile device and reformats the website accordingly.
    Allows for bookmark sharing
    Hardest on Developers
    Easiest on Users
    dotMobi – ” ultimately leads to more satisfactory user experiences and repeat visits to your site. “
  • 20. Optimize Navigation
    Provide a consistent but minimal navigation at the top
    Use descriptive links texts, with access keys for the most important ones
    Use an easy-to-type address for your entry page
    Don't put too many links on a page, but make sure each page of your site is easily reachable
  • 21. Keep it Small
    Terse, efficient markup
    Keep style sheets small
    Page Size Limit
    Be aware of memory limitations
    Avoid 2D scrolling at all costs
  • 22. Minimize Network
    Users have to pay!
    Most people don’t have unlimited internet plans
    Externally linked Resources
    Enable Caching
  • 23. Guide Input
    Minimize Keystrokes & Free Text
    Provide Defaults
  • 24. Users on the Go
    Short Page Title
    Clear Central Meaning
    Suitable for a Mobile Context
  • 25. Mobile Web Checkers
    How to ‘debug’ HTML?
    Use these programs to ensure your code is compliant
    W3C Mobile Web Best Practices checker
  • 26. Resources
    Designing Web Sites for Windows Mobile Powered Devices
    Mobile Web Design
    How to Design and Build a Mobile Website
     A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone
    Mobile Web Best Practices 1.0
    Mobile Web
    ASP.NET Web Sites for Mobile Devices
    Mobile Web Developer’s Guide
    DeviceAtlas (database of mobile devices )
  • 27. Tools
    Google Mobile Proxy 
    mobiReady testing tool
    Mobile Emulators