• 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.

Like this presentation? Why not share!

Like this? Share it with your network

Share

Mobile Web Best Practices

on

  • 2,713 views

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

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

Statistics

Views

Total Views
2,713
Views on SlideShare
2,257
Embed Views
456

Actions

Likes
2
Downloads
1
Comments
0

8 Embeds 456

http://community.devexpress.com 199
http://www.socalcodecamp.com 106
http://steveyuen.org 80
http://blog.pewitt.org 66
http://www.linkedin.com 2
http://feeds.feedburner.com 1
http://dragon.ep.usm.edu 1
http://www.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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

Mobile Web Best Practices Presentation 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