Mobile Web Best Practices
Woody Pewitt
Technical Evangelist
DevExpress
woodyp@devexpress.com
Welcome to a Technology
Revolution
• Rare availability
• Desired functionality
• Expensive initial cost
• Ever reducing costs and greater availability
• And ...
“Pocket watches provide the
closest historical parallel to
the remarkable rise of the
mobile phone.”
—Jon Agar , Constant ...
Staggering Numbers
1996 GSM phones in 103 countries
2000 10 million i-mode users (Japan)
2002 1 billion mobile phone users...
UK More mobile phones than humans...
Problem
Reader Poll
• ~400 Participants
• 159 Unique handsets
(Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, N...
Symbian
41%
Research In
Motion
18%
Android
17%
iOS
14%
Win Mobile
5%
Linux
3%
Other OSs
2%
Q2 2010 Market Share (%)
Symbia...
Symbian
6%
Research In
Motion
11%
Android
33%
iOS
14%
Win Mobile
-8%
Linux
-9%
Other OSs
19%
Market Growth
Symbian Researc...
So What Now?
• Wireless Access Protocol (WAP)
http://en.wikipedia.org/wiki/Wireless_Application_
Protocol
• Simple HTML/XH...
W3c Default Delivery Context
• Usable Screen Width
– 120 pixels, minimum.
• Markup Language Support
– XHTML Basic 1.1 deli...
Content Adaption Strategies
1. Do nothing
2. Strip images and styling
3. Handheld stylesheets
4. Mobile-specific site/app
Content Adaption Strategies
• One Size Fits All
– No Change
– Easy for the (lazy) Developer
– Reasonable on Advanced Phone...
Content Adaption Strategies: Redirection
• Redirection
– Server Recognizes the Browser is from a
mobile device and redirec...
Content Adaption Strategies: Unification
• One Site for Everyone
– Server Recognizes the Browser is on a
mobile device and...
Optimize Navigation
• Provide a consistent but minimal navigation at
the top
• Use descriptive links texts, with access ke...
Keep it Small
• Minimize
– Terse, efficient markup
– Keep style sheets small
• Page Size Limit
– Be aware of memory limita...
Minimize Network
• Users have to pay!
– Most people don’t have unlimited internet
plans
• Avoid
– AutoRefresh
– Redirectio...
Guide Input
• Minimize Keystrokes & Free Text
• Provide Defaults
Users on the Go
• Clarity
– Sparse
– Short Page Title
– Clear Central Meaning
• Suitable for a Mobile Context
Recommended Approach
Recommend that a mobile web application strategy is developed in
stages in the following order:
• Sta...
Mobile Web Checkers
• How to ‘debug’ HTML?
• Use these programs to ensure your code
is compliant
– W3C Mobile Web Best Pra...
Resources
• Designing Web Sites for Windows Mobile Powered Devices
– http://msdn.microsoft.com/en-us/library/bb415387.aspx...
Tools
• Google Mobile Proxy
– http://www.google.com/gwt/n
• mobiReady testing tool
– http://ready.mobi/
• Mobile Emulators...
Mobile Web Best Practices
Mobile Web Best Practices
Mobile Web Best Practices
Mobile Web Best Practices
Mobile Web Best Practices
Upcoming SlideShare
Loading in...5
×

Mobile Web Best Practices

2,366

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,366
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile Web Best Practices

  1. 1. Mobile Web Best Practices Woody Pewitt Technical Evangelist DevExpress woodyp@devexpress.com
  2. 2. Welcome to a Technology Revolution
  3. 3. • Rare availability • Desired functionality • Expensive initial cost • Ever reducing costs and greater availability • And it all started in… 1910
  4. 4. “Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.” —Jon Agar , Constant Touch
  5. 5. Staggering Numbers 1996 GSM 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
  6. 6. UK More mobile phones than humans...
  7. 7. Problem
  8. 8. 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/
  9. 9. Symbian 41% Research In Motion 18% Android 17% iOS 14% Win Mobile 5% Linux 3% Other OSs 2% Q2 2010 Market Share (%) Symbian Research In Motion Android iOS Microsoft Windows Mobile Linux Other OSs Symbian 51% Research In Motion 19% Android 2% iOS 13% Win Mobile 9% Linux 5% Other OSs 1% Q2 2009 Market Share (%) Symbian Research In Motion Android iOS Microsoft Windows Mobile Linux Other OSs
  10. 10. Symbian 6% Research In Motion 11% Android 33% iOS 14% Win Mobile -8% Linux -9% Other OSs 19% Market Growth Symbian Research In Motion Android iOS Microsoft Windows Mobile Linux Other OSs
  11. 11. 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/
  12. 12. 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.
  13. 13. Content Adaption Strategies 1. Do nothing 2. Strip images and styling 3. Handheld stylesheets 4. Mobile-specific site/app
  14. 14. 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
  15. 15. 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. “
  16. 16. 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. “
  17. 17. 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
  18. 18. 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
  19. 19. Minimize Network • Users have to pay! – Most people don’t have unlimited internet plans • Avoid – AutoRefresh – Redirection – Externally linked Resources • Enable Caching
  20. 20. Guide Input • Minimize Keystrokes & Free Text • Provide Defaults
  21. 21. Users on the Go • Clarity – Sparse – Short Page Title – Clear Central Meaning • Suitable for a Mobile Context
  22. 22. Recommended Approach Recommend that a mobile web application strategy is developed in stages in the following order: • Start with Lowest Common Denominator: build a mobile website using simple XHTML and web 1.0 technologies to guarantee compatibility with most mobile browsers. • Then build specific Web Apps for better user acceptance and user experience on the particular device – iPhone – Symbian S60 – Blackberry – Android – Opera Mini This approach will make the web app available to a large percentage of mobile users and at the same time provides optimal user experience for the particular device and mobile browser. Your mileage may vary!
  23. 23. 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/
  24. 24. 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/ • Gartner Worldwide Mobile Device Study – http://www.gartner.com/it/page.jsp?id=1421013
  25. 25. 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

×