it's a mobile mobile mobile world

29
“IT’S A MOBILE, MOBILE, MOBILE, MOBILE WORLD” CHRIS COCHRAN presents WordCamp Baltimore September 8, 2012 \\ Maryland Science Center

Upload: christopher-cochran

Post on 27-Jan-2015

151 views

Category:

Design


2 download

DESCRIPTION

The world is going mobile, and it’s nothing without you. In most cases, our mobile devices are the first things we reach for when we need information. These same devices are what we should focus on first for delivering the same information that we offer for desktops.

TRANSCRIPT

Page 1: It's a Mobile Mobile Mobile World

“IT’S A MOBILE,

MOBILE, MOBILE, MOBILE

WORLD”

CHRIS COCHRANpresents

WordCamp Baltimore September 8, 2012 \\ Maryland Science Center

Page 5: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

71% of global mobile internet users expect websites to load as quickly as the desktop site

Nearly 60% expect a website to load in 3 seconds or less on their mobile.

Source: Equation Research on behalf of Compuware “What Users Want From Mobile”

Page 6: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

43% Would unlikely return.

Source: Equation Research on behalf of Compuware “What Users Want From Mobile”

Too Slow...57% Will not recommend the site.

Page 7: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

10% of Americans Are Mobile Only

For some, mobile is the ONLY connection to the web.

(This number can be much higher in other countries)

Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”

Page 8: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

Cell phone owners do most of their online browsing on their phone, rather than a computer or other device

17%

Source: Pew Research Center's Internet & American Life Project “Cell Internet Use 2012”

Page 9: It's a Mobile Mobile Mobile World

☻ WE WANT TO KEEP VISITORS HAPPY AND GiveA POSITIVE EXPERIENCE

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

Page 10: It's a Mobile Mobile Mobile World

☻CHRISTOPHER COCHRAN #wcbalt

2012@tweetsfromchris

80% + mobile users who had A fast Reliable experinceWill Retrun and return more often.

&

Page 14: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

Designing for the USER is Designing for the BUSINESS.

Page 16: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

START with the LEASTCommon Denominator.

ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT

Page 17: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

Flexible Foundation

Fluid GridMedia QueriesFeature DetectionAdaptive Images & Adaptive Media

Page 18: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

MATH (Sorry)

target / context = result

ems

28px / 16px = 1.75em

Percentages

section / site = result100(645px / 960px) = 67.1875

Page 19: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

960px

100%

HEADER

CONTENT SIDEBAR

67.1875% 31.1875%

1.635%(645px) (300px)

(15px)

Page 20: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

• @media rule

• @import rule

Media Queries

@import url("example.css") only screen and (min-width: 480px) and (max-width: 767px);

@media only screen and (min-width: 480px) and (max-width: 767px) { body { width: 436px; } }

Great tool for “the other browsers”: https://github.com/scottjehl/Respond

<link rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)" href="example.css" />

Page 28: It's a Mobile Mobile Mobile World

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

MOBILE FIRST = CONTENT FIRST = USER FIRST