Your SlideShare is downloading. ×

Mobile Web Best Practices

2,339

Published on

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
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,339
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
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. “Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.” —Jon Agar , Constant Touch
  • 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. UK More mobile phones than humans...
  • 7. Problem
  • 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. 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. 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. 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. 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. Content Adaption Strategies 1. Do nothing 2. Strip images and styling 3. Handheld stylesheets 4. Mobile-specific site/app
  • 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. 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. 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. 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. 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. Minimize Network • Users have to pay! – Most people don’t have unlimited internet plans • Avoid – AutoRefresh – Redirection – Externally linked Resources • Enable Caching
  • 20. Guide Input • Minimize Keystrokes & Free Text • Provide Defaults
  • 21. Users on the Go • Clarity – Sparse – Short Page Title – Clear Central Meaning • Suitable for a Mobile Context
  • 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. 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. 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. 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

×