1. GOING
MOBILE:
960 to 320
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

2. Christopher
Cochran
web/tech/design/music/food
Senior Designer @webdevstudios
dabbler of anything
@tweetsfromchris webdevstudios.com
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

3. MOBILE IS Convenient
MOBILE IS Personal
MOBILE IS Natural
MOBILE IS Cool
For some, mobile is the ONLY
connection to the web.
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

4. MOBILE IS Convenient
MOBILE IS Personal
MOBILE IS Natural
MOBILE IS Cool
For some, mobile is the ONLY
connection to the web.
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

5. ?
WHAT
else is
MOBILE
CHRISTOPHER COCHRAN
WebDevStudios
Sunday, July 15, 12
#WCBOS
2012

6. ? ?
?
Nexus iOS BlackBerry iPhone ?
? iPad android Windows Galaxy
? Feature Phone Smart Phone
Droid Tablet Mini Tablet Retina
? ? ?
?
?
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

7. WHAT
MOBILE
should be
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

8. Fast
71% of global mobile internet users expect
websites to load as quickly, almost as quickly or
faster on their mobile phone compared to their
home computer.
Nearly 60% expect a website to load in 3 seconds
or less on their mobile phone.
Source: Equation Research on behalf of Compuware “What Users Want From Mobile”
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

9. NOT Fast =
57% Will not recommend the site.
43% Would unlikely return.
Source: Equation Research on behalf of Compuware “What Users Want From Mobile”
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

10. Precise
WHO is the USER?
What is IMPORTANT to the user?
(why & what are people coming to the site for)
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

11. Adaptive
PROGRESSIVE Feature Responsive
ENHANCEMENT DETECTION
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

12. ?
So
HOW
CHRISTOPHER COCHRAN
WebDevStudios
Sunday, July 15, 12
#WCBOS
2012

13. Go Fast
Smaller or no images (lower http requests).
Output only what is needed.
display: none; is NOT your friend.
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

14. Be Precise
st
CONTENT is 1
(Mobile is all about content.)
Designing for the USER is
designing for the BUSINESS.
DESKTOP = Creation
TABLET = Consumption
PHONE = Get & Go
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

15. PROGRESSIVE
ENHANCEMENT
START with the LEAST
Common Denominator.
MOBILE FIRST = CONTENT FIRST = USER FIRST
ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHT
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

16. Feature
DETECTION
Modernizr
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

17. Responsive
THE WEB IS NOT A
FIXED MEDIUM
Fluid Grid Media Queries
WebDevStudios
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

18. TOOLS
of the
TRADE
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12

19. GOING
MOBILE:
960 to 320
Christopher Cochran
@tweetsfromchris webdevstudios.com
CHRISTOPHER COCHRAN
WebDevStudios
#WCBOS
2012
Sunday, July 15, 12