Going Mobile
How to create a strategy to optimize your website for today’s preferred platforms

Eric Hodgson
December 13,2...
Overview
• You had little control…now you have less.
• You had little opportunity…now you have
much, much more.
• The key ...
Agenda
• Build a mobile strategy
• Execute a mobile presence
Mobile strategy
• Your users are now on these devices
• You can serve people any time, anywhere
Why mobile?

New York Daily News: http://www.nydailynews.com/news/world/check-contrasting-pics-st-peter-square-article-1.1...
http://www.statista.com/topics/779/mobile-internet/chart/1380/mobile-web-usage/
Google Analytics: www.jointheiclub.com
Always on…everywhere

Flickr (@brittanysoup): http://www.flickr.com/photos/brittanycampbellphotography/4397188291/
How is mobile different?

Flickr (@australianshepherds): http://www.flickr.com/photos/australianshepherds/
Screen size
http://blogs.davidson.edu/webredesign/page/4/
Native actions
• Swipe
• Thumb navigation
• Geolocation
Flickr (@vegaseddie): http://www.flickr.com/photos/vegaseddie/5700609302
Attention span

Flickr (@jonathanadami): http://www.flickr.com/photos/jonathanadami/7953963856
Elements of a mobile strategy
• Audiences
• Actions
• Technologies
Audience

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

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

Forbes: http://www.forbes.com/sites/markrogowsky/2013/06/06/more-than-half-of-us-have-smartphones-giving-app...
Slate:
http://www.slate.com/blogs/future_tense/2013/04/26/samsung_smartphone_sales_rise_to_double_apple_s_market_share.htm...
Questions?

Flickr (@audiolucistore): http://www.flickr.com/photos/audiolucistore/7403731050
What are my options?
• Mobile site
• Application
• Responsive/Adaptive site
Mobile Sites
+ Very specific
mobile activity

- Two sites to
manage

+ Incorporation of
native actions

- Mobile activity
...
Applications
+ More powerful
native actions

- Two sites to
manage

+ Longer attention
span

- Separate download
Responsive/Adaptive Design
+ One site/URL to
manage
+ Redirects are final
destinations
+ Incorporation of
native actions

...
Responsive versus adaptive
Responsive:

Adaptive:

• Fluid width
• Heavier code
• Stair steps

• Fixed width
• Device driv...
Code platforms
Progressive enhancement

Flickr (@granitemountaininsurance): http://www.flickr.com/photos/granitemountaininsurance/7406297...
Deep Blue: http://deepblue.com/blog/2013/01/responsive-web-design-and-progressive-enhancement-the-facts/
Stackable content

Flickr (@chocogato): http://www.flickr.com/photos/chocogato/11076834686
http://blogs.davidson.edu/webredesign/page/4/
Test, test, test

Flickr (@butz.2013): http://www.flickr.com/photos/61508583@N02/10873567586
Testing options
• StudioPress
http://www.studiopress.com/responsive

• MobileTest
http://mobiletest.me/

• W3C mobileOK Ch...
Stay on top of it

Flickr (@davidsingleton): http://www.flickr.com/photos/davidsingleton/3057542590
Contact me
Eric Hodgson
Director, Online Communication
Strategies
University of Iowa Foundation

ehodgso@gmail.com
@ehodgs...
Questions?

Flickr (@audiolucistore): http://www.flickr.com/photos/audiolucistore/7403731050
Upcoming SlideShare
Loading in...5
×

Innovative Educators: Going Mobile

274

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
274
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Innovative Educators: Going Mobile

  1. 1. Going Mobile How to create a strategy to optimize your website for today’s preferred platforms Eric Hodgson December 13,2013
  2. 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. 3. Agenda • Build a mobile strategy • Execute a mobile presence
  4. 4. Mobile strategy • Your users are now on these devices • You can serve people any time, anywhere
  5. 5. Why mobile? New York Daily News: http://www.nydailynews.com/news/world/check-contrasting-pics-st-peter-square-article-1.1288700
  6. 6. http://www.statista.com/topics/779/mobile-internet/chart/1380/mobile-web-usage/
  7. 7. Google Analytics: www.jointheiclub.com
  8. 8. Always on…everywhere Flickr (@brittanysoup): http://www.flickr.com/photos/brittanycampbellphotography/4397188291/
  9. 9. How is mobile different? Flickr (@australianshepherds): http://www.flickr.com/photos/australianshepherds/
  10. 10. Screen size http://blogs.davidson.edu/webredesign/page/4/
  11. 11. Native actions • Swipe • Thumb navigation • Geolocation
  12. 12. Flickr (@vegaseddie): http://www.flickr.com/photos/vegaseddie/5700609302
  13. 13. Attention span Flickr (@jonathanadami): http://www.flickr.com/photos/jonathanadami/7953963856
  14. 14. Elements of a mobile strategy • Audiences • Actions • Technologies
  15. 15. Audience Flickr (@jamescridland): http://www.flickr.com/photos/jamescridland/613445810
  16. 16. Action Flickr (@jonathankosread): http://www.flickr.com/photos/jonathankosread/6398311699
  17. 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. 18. Slate: http://www.slate.com/blogs/future_tense/2013/04/26/samsung_smartphone_sales_rise_to_double_apple_s_market_share.html
  19. 19. Questions? Flickr (@audiolucistore): http://www.flickr.com/photos/audiolucistore/7403731050
  20. 20. What are my options? • Mobile site • Application • Responsive/Adaptive site
  21. 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. 22. Applications + More powerful native actions - Two sites to manage + Longer attention span - Separate download
  23. 23. Responsive/Adaptive Design + One site/URL to manage + Redirects are final destinations + Incorporation of native actions - Slower site performance
  24. 24. Responsive versus adaptive Responsive: Adaptive: • Fluid width • Heavier code • Stair steps • Fixed width • Device driven
  25. 25. Code platforms
  26. 26. Progressive enhancement Flickr (@granitemountaininsurance): http://www.flickr.com/photos/granitemountaininsurance/7406297138
  27. 27. Deep Blue: http://deepblue.com/blog/2013/01/responsive-web-design-and-progressive-enhancement-the-facts/
  28. 28. Stackable content Flickr (@chocogato): http://www.flickr.com/photos/chocogato/11076834686
  29. 29. http://blogs.davidson.edu/webredesign/page/4/
  30. 30. Test, test, test Flickr (@butz.2013): http://www.flickr.com/photos/61508583@N02/10873567586
  31. 31. Testing options • StudioPress http://www.studiopress.com/responsive • MobileTest http://mobiletest.me/ • W3C mobileOK Checker http://validator.w3.org/mobile/
  32. 32. Stay on top of it Flickr (@davidsingleton): http://www.flickr.com/photos/davidsingleton/3057542590
  33. 33. Contact me Eric Hodgson Director, Online Communication Strategies University of Iowa Foundation ehodgso@gmail.com @ehodgso http://slideshare.com/ehodgso
  34. 34. Questions? Flickr (@audiolucistore): http://www.flickr.com/photos/audiolucistore/7403731050
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×