“IT’S A MOBILE, MOBILE, MOBILE, MOBILE WORLD” CHRIS COCHRAN presents WordCamp Baltimore September 8, 2012 \\ Maryland Science Center
Jan 27, 2015
“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.
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
iOSandroid
BlackBerry
WindowsSmart Phone
TabletFeature Phone
Mini Tablet Retina
iPhoneiPad
Droid
Galaxy
Nexus
?
?
Fire? Opera Mini?
?
Kindle?Web OS
Opera Mobile
WHY CARE?CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
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”
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.
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”
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”
☻ WE WANT TO KEEP VISITORS HAPPY AND GiveA POSITIVE EXPERIENCE
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
☻CHRISTOPHER COCHRAN #wcbalt
2012@tweetsfromchris
80% + mobile users who had A fast Reliable experinceWill Retrun and return more often.
&
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
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
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
WHO is the USER?
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
Designing for the USER is Designing for the BUSINESS.
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
What is IMPORTANT to the user?
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
START with the LEASTCommon Denominator.
ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
Flexible Foundation
Fluid GridMedia QueriesFeature DetectionAdaptive Images & Adaptive Media
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
MATH (Sorry)
target / context = result
ems
28px / 16px = 1.75em
Percentages
section / site = result100(645px / 960px) = 67.1875
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
960px
100%
HEADER
CONTENT SIDEBAR
67.1875% 31.1875%
1.635%(645px) (300px)
(15px)
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" />
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
FeatureDETECTION
Modernizr
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
wp_is_mobile()
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
ADAPTIVE MEDIA
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
Icon Fonts
Font Awesome
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
Adaptive Images
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
TOOLS of the TRADE
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
MOBILE FIRST = CONTENT FIRST = USER FIRST
CHRISTOPHER COCHRAN #wcbalt2012@tweetsfromchris
The Web Is Not A Fixed Medium