1. It’s a small(er) world after all Strategies for mobile content delivery InterAction, November 2012 Kevin Munday Xeno Media, Inc.

2. InterActionIt’s a small(er) world after all2 What we’ll cover Brief state of mobile web Optimizing for mobile Approaches Decision points Cases Other resources

3. InterActionIt’s a small(er) world after all3 The state of mobile web

4. InterActionIt’s a small(er) world after all4 The state of mobile web: And, it’s growing 46% of Americans are smart phone owners That’s +11% Y/Y 67% of those 18-24 own smart phones 60% of those with a college degree own smart phone 72% of those 18-29 with a household income of $30K or more own a smart phone Pew Internet and American Life Project—March 2012

5. InterActionIt’s a small(er) world after all5 The state of mobile web: And, it’s growing By 2015, more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices. As smartphones begin to outsell simpler feature phones, and as media tablet sales explode, the number of mobile Internet users will grow by a compound annual growth rate (CAGR) of 16.6% between 2010 and 2015. International Data Group—Sept 2011

6. InterActionIt’s a small(er) world after all6 Optimizing for mobile: What does that mean? Optimizing for connection Optimizing for technology Optimizing for use cases

7. InterActionIt’s a small(er) world after all7 Optimizing for mobile: Connection WiFi is not a given 3G/4G probable? Light weight for fast loads Minimize images

8. InterActionIt’s a small(er) world after all8 Optimizing for mobile: Technology Smaller screen Horizontal vs vertical orientation Clumsy fingers

9. InterActionIt’s a small(er) world after all9 Optimizing for mobile: Use cases Urgent (or urgent enough) Timely Proximity based Fewer clicks, less time

10. InterActionIt’s a small(er) world after all10 Example: Chicago Tribune Connection  Light weight  Fast load Technology  Horizontal/Vertical  Larger controls for touch  Scroll, scroll, scroll  Alerts via SMS Use case  Weather first  Best, latest first

11. InterActionIt’s a small(er) world after all11 Approaches Separate mobile version Responsive design

12. InterActionIt’s a small(er) world after all12 Approach: Mobile version Often m.whatever.com or mobile.whatever.com Detects device and serves appropriate version(s)

13. InterActionIt’s a small(er) world after all13 Approach: Responsive design One site Flexible grids Flexible images Media queries

14. InterActionIt’s a small(er) world after all14 Pros/Cons: Mobile version Pros Some applications don’t adapt well to responsive design Well-establish platforms/modules/tools Cons Less future proof in general Costly programming changes Increasing scale in numbers/types of devices

15. InterActionIt’s a small(er) world after all15 Pros/Cons: Responsive design Pros Broadly adaptable by platform Broadly adaptable for actual usage (maybe I like to have lots of small browsers open…) Cons Newer Fewer designers with experience Fewer established platforms

16. InterActionIt’s a small(er) world after all16 The Google sayeth Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration. Recommendations for building smartphone-optimized websites— June 6, 2012

17. InterActionIt’s a small(er) world after all17 Decision points Should I… 1.Do nothing? 2.Develop a mobile version? 3.Develop a responsive site?

18. InterActionIt’s a small(er) world after all18 Do nothing if… 1.You don’t get significant mobile traffic now and or don’t see strategic growth 2.You are not currently on a platform that supports mobile or responsive design 3.Your content and most common use cases are not well suited to mobile But start developing your mobile strategy for your next redesign/redevelopment

19. InterActionIt’s a small(er) world after all19 Consider developing a mobile version only if… 1.Your device-specific use cases are completely different 2.You have applications where responsive design just will not work 3.You are invested in a platform with good, established mobile tools, and little basis for responsive design But heed Google’s warnings about urls…

20. InterActionIt’s a small(er) world after all20 Go responsive as long as… 1.Your current (or proposed future) platform has tools to do so 2.You have or can find reliable talent to make it happen

21. InterActionIt’s a small(er) world after all21 Good examples of responsive design The Boston Globe http://bostonglobe.com/ Notre Dame University http://www.nd.edu Smashing Magazine http://www.smashingmagazine.com symmetry http://www.symmetrymag.org

22. InterActionIt’s a small(er) world after all22 Other resources Ethan Marcotte: Blog http://www.alistapart.com/articles/responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/ A Book Apart http://www.abookapart.com/products/responsive- web-designhttp://www.abookapart.com/products/responsive- web-design Omega Project for Drupal http://drupal.org/project/omega