Your SlideShare is downloading. ×
Mobile Web Best Practices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mobile Web Best Practices

2,313
views

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,313
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