• Like
  • Save

Loading…

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.

Mobile Web Best Practices

  • 2,260 views
Uploaded on

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

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

More 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

Views

Total Views
2,260
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
1
Comments
0
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

Transcript

  • 1. Mobile Web Best Practices
    Woody Pewitt
    Technical Evangelist
    DevExpress
    woodyp@devexpress.com
  • 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…
    1910
  • 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
    Test!
    http://cameronmoll.com/mobile/mkp/
  • 12.
  • 13. So What Now?
    Wireless Access Protocol (WAP)
    http://en.wikipedia.org/wiki/Wireless_Application_Protocol
    Simple HTML/XHTML
    HTML 4.0 Guidelines for Mobile Access
    http://www.w3.org/TR/NOTE-html40-mobile/
    Mobile Web Best Practices 1.0
    http://www.w3.org/TR/mobile-bp/
  • 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
    JPEG.
    GIF 89a.
    Maximum Total Page Weight
    20 kilobytes.
    Colors
    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
    HTTP/1.0 or more recent [HTTP1.1].
    Script
    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
    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
    Minimize
    Terse, efficient markup
    Keep style sheets small
    Page Size Limit
    Be aware of memory limitations
    Scrolling
    Avoid 2D scrolling at all costs
  • 22. Minimize Network
    Users have to pay!
    Most people don’t have unlimited internet plans
    Avoid
    AutoRefresh
    Redirection
    Externally linked Resources
    Enable Caching
  • 23. Guide Input
    Minimize Keystrokes & Free Text
    Provide Defaults
  • 24. Users on the Go
    Clarity
    Sparse
    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
    http://validator.w3.org/mobile/
    Ready.mobi
    http://ready.mobi/
  • 26. Resources
    Designing Web Sites for Windows Mobile Powered Devices
    http://msdn.microsoft.com/en-us/library/bb415387.aspx
    Mobile Web Design
    http://www.cameronmoll.com/archives/000398.html
    How to Design and Build a Mobile Website
    http://www.webpagefx.com/design-build-mobile-web-site.html
     A Look At Mobile Web Design – 5 Sites To Visit From Your Android Phone
    http://androidandme.com/2009/06/news/a-look-at-mobile-web-design-5-sites-to-visit-from-your-android-phone/
    Guidance
    http://en.wikipedia.org/wiki/Mobile_Web
    http://www.w3.org/2006/07/Mobile_Web_Design.pdf
    Mobile Web Best Practices 1.0
    http://www.w3.org/TR/mobile-bp/
    Mobile Web
    http://www.w3.org/standards/webdesign/mobilweb
    ASP.NET Web Sites for Mobile Devices
    http://msdn.microsoft.com/en-us/library/ms178619(VS.100).aspx
    Mobile Web Developer’s Guide
    http://www.networksolutions.com/help/mobi-guide.pdf
    DeviceAtlas (database of mobile devices )
    http://deviceatlas.com/
  • 27. Tools
    Google Mobile Proxy
    http://www.google.com/gwt/n 
    mobiReady testing tool
    http://ready.mobi/
    Mobile Emulators
    http://mobiforge.com/emulators/page/mobile-emulators