Download - 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

http://2012.baltimore.wordcamp.org/

http://2012.baltimore.wordcamp.org/

CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris

And there are a lot of Devices.

https://twitter.com/search/?src=hash&q=%23wcbalt




iOSandroid

BlackBerry

WindowsSmart Phone

TabletFeature Phone

Mini Tablet Retina

iPhoneiPad

Droid

Galaxy

Nexus

?

?

Fire? Opera Mini?

?

Kindle?Web OS

Opera Mobile




http://2012.boston.wordcamp.org/session/going-mobile-from-960-to-320/




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

17%

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

ems

28px / 16px = 1.75em

Percentages

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





960px

100%

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

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





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




Download - It's a Mobile Mobile Mobile World

Top Related