1. Going Mobile
How to create a strategy to optimize your website for today’s preferred platforms
Eric Hodgson
December 13,2013

2. Overview
• You had little control…now you have less.
• You had little opportunity…now you have
much, much more.
• The key is focus.

3. Agenda
• Build a mobile strategy
• Execute a mobile presence

4. Mobile strategy
• Your users are now on these devices
• You can serve people any time, anywhere

5. Why mobile?
New York Daily News: http://www.nydailynews.com/news/world/check-contrasting-pics-st-peter-square-article-1.1288700

6. http://www.statista.com/topics/779/mobile-internet/chart/1380/mobile-web-usage/

7. Google Analytics: www.jointheiclub.com

8. Always on…everywhere
Flickr (@brittanysoup): http://www.flickr.com/photos/brittanycampbellphotography/4397188291/

9. How is mobile different?
Flickr (@australianshepherds): http://www.flickr.com/photos/australianshepherds/

10. Screen size
http://blogs.davidson.edu/webredesign/page/4/

11. Native actions
• Swipe
• Thumb navigation
• Geolocation

12. Flickr (@vegaseddie): http://www.flickr.com/photos/vegaseddie/5700609302

13. Attention span
Flickr (@jonathanadami): http://www.flickr.com/photos/jonathanadami/7953963856

14. Elements of a mobile strategy
• Audiences
• Actions
• Technologies

15. Audience
Flickr (@jamescridland): http://www.flickr.com/photos/jamescridland/613445810

16. Action
Flickr (@jonathankosread): http://www.flickr.com/photos/jonathankosread/6398311699

17. Technologies
Forbes: http://www.forbes.com/sites/markrogowsky/2013/06/06/more-than-half-of-us-have-smartphones-giving-apple-andgoogle-much-to-smile-about/

18. Slate:
http://www.slate.com/blogs/future_tense/2013/04/26/samsung_smartphone_sales_rise_to_double_apple_s_market_share.html

19. Questions?
Flickr (@audiolucistore): http://www.flickr.com/photos/audiolucistore/7403731050

20. What are my options?
• Mobile site
• Application
• Responsive/Adaptive site

21. Mobile Sites
+ Very specific
mobile activity
- Two sites to
manage
+ Incorporation of
native actions
- Mobile activity
may be too limited
- Redirects aren’t
social friendly

22. Applications
+ More powerful
native actions
- Two sites to
manage
+ Longer attention
span
- Separate download

23. Responsive/Adaptive Design
+ One site/URL to
manage
+ Redirects are final
destinations
+ Incorporation of
native actions
- Slower site
performance

24. Responsive versus adaptive
Responsive:
Adaptive:
• Fluid width
• Heavier code
• Stair steps
• Fixed width
• Device driven

25. Code platforms

26. Progressive enhancement
Flickr (@granitemountaininsurance): http://www.flickr.com/photos/granitemountaininsurance/7406297138

27. Deep Blue: http://deepblue.com/blog/2013/01/responsive-web-design-and-progressive-enhancement-the-facts/

28. Stackable content
Flickr (@chocogato): http://www.flickr.com/photos/chocogato/11076834686

29. http://blogs.davidson.edu/webredesign/page/4/

30. Test, test, test
Flickr (@butz.2013): http://www.flickr.com/photos/61508583@N02/10873567586

31. Testing options
• StudioPress
http://www.studiopress.com/responsive
• MobileTest
http://mobiletest.me/
• W3C mobileOK Checker
http://validator.w3.org/mobile/

32. Stay on top of it
Flickr (@davidsingleton): http://www.flickr.com/photos/davidsingleton/3057542590

33. Contact me
Eric Hodgson
Director, Online Communication
Strategies
University of Iowa Foundation
ehodgso@gmail.com
@ehodgso
http://slideshare.com/ehodgso

34. Questions?
Flickr (@audiolucistore): http://www.flickr.com/photos/audiolucistore/7403731050