The document discusses mobile compatibility from a front-end developer perspective. It provides statistics on mobile internet usage and predicts continued growth. It outlines three approaches to website friendliness for mobile - mobile compatible, hybrid mobile friendly, and a dedicated mobile version. Mobile compatible maintains the full desktop experience on mobile, hybrid uses responsive design, and a mobile version has separate mobile optimization. Considerations for mobile compatibility limitations include flash, hover states, embedding video, and device support.

1. Mobile Compatibility A front-end developer perspective

2. Fun facts There are currently 5.3 billion mobile subscribers world wide 85%of new handsets sold today have access to mobile web 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 More than 200 million active userscurrently access Facebook through their mobile devices via mobile web and mobile apps

3. Fun facts 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 ABI Research (Feb 2010) predicts Mobile Commerce will reach US$119 billion by 2015, about 8 percent of the total e-commerce global market

4. Three Degrees - Website Friendliness Mobile Compatible (minimal effort) Traditional desktop websites Twist Image default on all new projects! Hybrid Mobile Friendly Hybrid desktop websites with mobile optimized CSS Mobile Version Dedicated mobile websites

5. TI Minimum: Mobile Compatible 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 Key points: Experience should be preserved on mobile Non-compatible elements should be replaced with fall-backs

6. Mobile Compatible

7. Mobile Compatible

8. Hybrid Mobile Friendly 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. Key points: Same HTML code and sitemap structure across devices UX, design and integration considerations for each layout Layouts can include smart phone, tablet, netbook and desktop 8

9. Hybrid Mobile Friendly smartphone desktop http://stephencaver.com/

10. Hybrid Mobile Friendly smartphone desktop http://sasquatchfestival.com/

11. Hybrid Mobile Friendly smartphone desktop netbook tablet http://interim.it/

12. Mobile Version A mobile version is a separate website from the desktop site, with unique HTML, CSS and JavaScript Key points: Specifically optimized for smart phones Separate set of wireframes, functional specifications and design are required

13. Mobile Version

14. 6 Considerations

15. Mobile Compatibility Limitations: Flash Full Flash Websites Alternate full html version Landing page with relevant content Non-Interactive Flash Components Animated GIFs & Static Images Interactive Flash Components/Tools HTML5 version of the tool “Sorry you need flash” warning 15

16. Mobile Compatibility Limitations: Hover/Mouse-Over There is no hover/mouse-over behavior on a mobile device so special consideration needs to be made for: Navigation & drop-down menus Tooltip elements Links should have visually distinctive characteristics (colors, underlines) 16

17. Mobile Compatibility Limitations Embedding Video HTML5 vs. Custom Flash Video Players Fixed Position Elements Utility Components (DFC Websites) Fixed Headers/Footers JavaScript Animations (graceful degradation) Pop-ins & DIV Scrolling Elements 17

18. Device Support

19. Default Devices We Support Apple iOS v3+ iPhone, iPod Touch, iPad Android v2.2+ Smart phones & tablets Blackberry OS6+ Touch screen (Torch Slider 9800) Keyboard & trackpad (Bold 9700, Curve 3G, Style 9670) Windows Mobile 7 WebKit Based Browsers Full support for HTML5 & CSS3 19

20. Support With Additional Cost Blackberry Legacy v4.6, v4.7, v5.0 Android Legacy v1 devices Non-WebKit Mobile Browsers 3rd Party Browsers Opera Mobile, Firefox for Android 20

21. Development & QA Testing Apple iOS iPhone, iPod Touch, iPad devices in-house iOS Simulator on OSX (provided with SDK) Android On device & Software Simulators Blackberry OS6 On device Windows Mobile 7 On device 21

22. Interesting Links Design: mediaqueri.es cssiphone.com Best Practices: mobiThinking Best Practices General Resources: dotMobi mobileThinking Stats Corner 22

23. Thanks!Questions?