Mobile compatibility a front end perspective


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Mobile compatibility a front end perspective

  1. 1. Mobile Compatibility<br />A front-end developer<br />perspective<br />
  2. 2. Fun facts<br />There are currently 5.3 billion mobile subscribers world wide<br />85%of new handsets sold today have access to mobile web<br />Half a billionpeople accessed mobile internet worldwide in 2009. Usage is expected to double by 2014as mobile overtakes the PC as the most popular way to get on the web<br />More than 200 million active userscurrently access Facebook through their mobile devices via mobile web and mobile apps<br />
  3. 3. Fun facts<br />ABI Research (May 2010) predicts that app stores will peak in 2013 then slowly decline as subscribers migrate from downloadable apps to mobile web sites<br />ABI Research (Feb 2010) predicts Mobile Commerce will reach US$119 billion by 2015, about 8 percent of the total e-commerce global market<br />
  4. 4. Three Degrees - Website Friendliness<br />Mobile Compatible (minimal effort)<br />Traditional desktop websites<br />Twist Image default on all new projects!<br />Hybrid Mobile Friendly<br />Hybrid desktop websites with mobile optimized CSS<br />Mobile Version<br />Dedicated mobile websites<br />
  5. 5. TI Minimum: Mobile Compatible<br />A mobile compatible site is a traditional website targeting desktop browsing (screen resolutions, keyboard and mouse input) that maintains the full experience when viewed on a mobile device<br />Key points:<br />Experience should be preserved on mobile<br />Non-compatible elements should be replaced with fall-backs<br />
  6. 6. Mobile Compatible<br />
  7. 7. Mobile Compatible<br />
  8. 8. Hybrid Mobile Friendly<br />A mobile friendly site is a hybrid mobile/desktop site that uses a single implementation of html code but adjusts itself to screen size/resolutions based on the device it is viewed on.<br />Key points:<br />Same HTML code and sitemap structure across devices<br />UX, design and integration considerations for each layout<br />Layouts can include smart phone, tablet, netbook and desktop<br />8<br />
  9. 9. Hybrid Mobile Friendly<br />smartphone<br />desktop<br /><br />
  10. 10. Hybrid Mobile Friendly<br />smartphone<br />desktop<br /><br />
  11. 11. Hybrid Mobile Friendly<br />smartphone<br />desktop<br />netbook<br />tablet<br /><br />
  12. 12. Mobile Version<br />A mobile version is a separate website from the desktop site, with unique HTML, CSS and JavaScript<br />Key points:<br />Specifically optimized for smart phones<br />Separate set of wireframes, functional specifications and design are required<br />
  13. 13. Mobile Version<br />
  14. 14. 6 Considerations<br />
  15. 15. Mobile Compatibility Limitations: Flash<br />Full Flash Websites<br />Alternate full html version<br />Landing page with relevant content<br />Non-Interactive Flash Components<br />Animated GIFs & Static Images<br />Interactive Flash Components/Tools<br />HTML5 version of the tool<br />“Sorry you need flash” warning<br />15<br />
  16. 16. Mobile Compatibility Limitations: Hover/Mouse-Over<br />There is no hover/mouse-over behavior on a mobile device so special consideration needs to be made for:<br />Navigation & drop-down menus<br />Tooltip elements<br />Links<br />should have visually distinctive characteristics (colors, underlines)<br />16<br />
  17. 17. Mobile Compatibility Limitations<br />Embedding Video<br />HTML5 vs. Custom Flash Video Players<br />Fixed Position Elements<br />Utility Components (DFC Websites)<br />Fixed Headers/Footers<br />JavaScript Animations (graceful degradation)<br />Pop-ins & DIV Scrolling Elements<br />17<br />
  18. 18. Device Support<br />
  19. 19. Default Devices We Support<br />Apple iOS v3+<br />iPhone, iPod Touch, iPad<br />Android v2.2+<br />Smart phones & tablets<br />Blackberry OS6+<br />Touch screen (Torch Slider 9800)<br />Keyboard & trackpad (Bold 9700, Curve 3G, Style 9670)<br />Windows Mobile 7<br />WebKit Based Browsers<br />Full support for HTML5 & CSS3<br />19<br />
  20. 20. Support With Additional Cost<br />Blackberry Legacy<br />v4.6, v4.7, v5.0<br />Android Legacy<br />v1 devices<br />Non-WebKit Mobile Browsers<br />3rd Party Browsers<br />Opera Mobile, Firefox for Android<br />20<br />
  21. 21. Development & QA Testing<br />Apple iOS<br />iPhone, iPod Touch, iPad devices in-house<br />iOS Simulator on OSX (provided with SDK)<br />Android<br />On device & Software Simulators<br />Blackberry OS6<br />On device<br />Windows Mobile 7<br />On device<br />21<br />
  22. 22. Interesting Links<br />Design:<br /><br /><br />Best Practices:<br />mobiThinking Best Practices<br />General Resources:<br />dotMobi<br />mobileThinking Stats Corner<br />22<br />
  23. 23. Thanks!Questions?<br />