It's a Mobile Mobile Mobile World

transcript

“IT’S A MOBILE,

MOBILE, MOBILE, MOBILE

WORLD”

CHRIS COCHRANpresents

WordCamp Baltimore September 8, 2012 \\ Maryland Science Center

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

And there are a lot of Devices.

iOSandroid

BlackBerry

WindowsSmart Phone

TabletFeature Phone

Mini Tablet Retina

iPhoneiPad

Galaxy

Fire? Opera Mini?

Kindle?Web OS

Opera Mobile

WHY CARE?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”

43% Would unlikely return.

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

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

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”

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

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

☻ WE WANT TO KEEP VISITORS HAPPY AND GiveA POSITIVE EXPERIENCE

☻CHRISTOPHER COCHRAN #wcbalt

2012@tweetsfromchris

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

FastGoSmaller or no images (lower http requests).

Load only what is needed.

display: none; is NOT your friend.

Be Precise CHRISTOPHER COCHRAN #wcbalt

2012@tweetsfromchris

Be Precise

WHO is the USER?

Designing for the USER is Designing for the BUSINESS.

What is IMPORTANT to the user?

START with the LEASTCommon Denominator.

ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT

Flexible Foundation

Fluid GridMedia QueriesFeature DetectionAdaptive Images & Adaptive Media

MATH (Sorry)

target / context = result

28px / 16px = 1.75em

Percentages

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

HEADER

CONTENT SIDEBAR

67.1875% 31.1875%

1.635%(645px) (300px)

(15px)

• @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

FeatureDETECTION

Modernizr

wp_is_mobile()

ADAPTIVE MEDIA

Icon Fonts

Font Awesome

Adaptive Images

TOOLS of the TRADE

MOBILE FIRST = CONTENT FIRST = USER FIRST

The Web Is Not A Fixed Medium