it's a mobile mobile mobile world
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
“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