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

Eric Hodgson December 13,2013

Overview

• You had little control…now you have less.

• You had little opportunity…now you have much, much more.

• The key is focus.

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

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

Why mobile?

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

Google Analytics: www.jointheiclub.com

Flickr (@brittanysoup): http://www.flickr.com/photos/brittanycampbellphotography/4397188291/

Always on…everywhere

Flickr (@australianshepherds): http://www.flickr.com/photos/australianshepherds/

How is mobile different?

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

Screen size

Native actions

• Swipe

• Thumb navigation

• Geolocation

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

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

Attention span

Elements of a mobile strategy

• Audiences

• Actions

• Technologies

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

Audience

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

Action

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

Technologies

Slate: http://www.slate.com/blogs/future_tense/2013/04/26/samsung_smartphone_sales_rise_to_double_apple_s_market_s

hare.html

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

Questions?

What are my options?

• Mobile site

• Application

• Responsive/Adaptive site

Mobile Sites

+Very specific mobile activity

+Incorporation of native actions

- Two sites to manage

- Mobile activity may be too limited

- Redirects aren’t social friendly

Applications

+More powerful native actions

+Longer attention span

- Two sites to manage

- Separate download

Responsive/Adaptive Design

+One site/URL to manage

+Redirects are final destinations

+Incorporation of native actions

- Slower site performance

Responsive versus adaptive

Responsive:

• Fluid width• Heavier code• Stair steps

Adaptive:

• Fixed width• Device driven

Code platforms

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

Progressive enhancement

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

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

Stackable content

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

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

Test, test, test

Testing options

• StudioPresshttp://www.studiopress.com/responsive

• MobileTesthttp://mobiletest.me/

• W3C mobileOK Checkerhttp://validator.w3.org/mobile/

Flickr (@davidsingleton): http://www.flickr.com/photos/davidsingleton/3057542590

Stay on top of it

Contact me

Eric HodgsonDirector, Online Communication StrategiesUniversity of Iowa Foundation

ehodgso@gmail.com@ehodgso

http://slideshare.com/ehodgso

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

Questions?