It’s a small(er) world after allStrategies for mobile content delivery

InterAction, November 2012

Kevin MundayXeno Media, Inc.

InterAction It’s a small(er) world after all 2

What we’ll cover

• Brief state of mobile web

• Optimizing for mobile

• Approaches

• Decision points

• Cases

• Other resources

InterAction It’s a small(er) world after all 3

The state of mobile web

InterAction It’s a small(er) world after all 4

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

InterAction It’s a small(er) world after all 5

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

InterAction It’s a small(er) world after all 6

Optimizing for mobile: What does that mean?

• Optimizing for connection

• Optimizing for technology

• Optimizing for use cases

InterAction It’s a small(er) world after all 7

Optimizing for mobile: Connection

• WiFi is not a given

• 3G/4G probable?

• Light weight for fast loads

• Minimize images

InterAction It’s a small(er) world after all 8

Optimizing for mobile: Technology

• Smaller screen

• Horizontal vs vertical orientation

• Clumsy fingers

InterAction It’s a small(er) world after all 9

Optimizing for mobile: Use cases

• Urgent (or urgent enough)

• Timely

• Proximity based

• Fewer clicks, less time

InterAction It’s a small(er) world after all 10

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

InterAction It’s a small(er) world after all 11

Approaches

• Separate mobile version

• Responsive design

InterAction It’s a small(er) world after all 12

Approach: Mobile version

• Often m.whatever.com or mobile.whatever.com

• Detects device and serves appropriate version(s)

InterAction It’s a small(er) world after all 13

Approach: Responsive design

• One site

• Flexible grids

• Flexible images

• Media queries

InterAction It’s a small(er) world after all 14

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

InterAction It’s a small(er) world after all 15

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

InterAction It’s a small(er) world after all 16

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

InterAction It’s a small(er) world after all 17

Decision points

Should I…

1. Do nothing?2. Develop a mobile version?3. Develop a responsive site?

InterAction It’s a small(er) world after all 18

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

InterAction It’s a small(er) world after all 19

Consider developing a mobile version only if…

1. Your device-specific use cases are completely different2. You have applications where responsive design just will not

work3. You are invested in a platform with good, established mobile

tools, and little basis for responsive design

But heed Google’s warnings about urls…

InterAction It’s a small(er) world after all 20

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

InterAction It’s a small(er) world after all 21

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

InterAction It’s a small(er) world after all 22

Other resources

Ethan Marcotte:• Blog http://www.alistapart.com/articles/responsive-web-design/• A Book Apart

http://www.abookapart.com/products/responsive-web-design

Omega Project for Drupal• http://drupal.org/project/omega