It's a Mobile Mobile Mobile World

1,982 views

Published on

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.

Published in: Design, Technology, Business
  • Hi, my name is Morine, I am new here, I like your profile and i will be happy if you contact me through my email (morinebaby1988@yahoo.com) so that i will tell you about myself and also share more pictures with you, Take Care.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

It's a Mobile Mobile Mobile World

  1. 1. CHRIS COCHRAN presents “IT’S A MOBILE, MOBILE, MOBILE, MOBILE WORLD” WordCamp BaltimoreSeptember 8, 2012 Maryland Science Center
  2. 2. And there are a lot of Devices.CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  3. 3. ? Web OS ? Nexus iOS BlackBerry iPhone Kindle ? iPad android Windows Galaxy Feature Phone Smart Phone Droid Tablet Mini Tablet Retina Fire ? Opera Mini ? Opera Mobile ?CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  4. 4. WHY CARECHRISTOPHER COCHRAN@tweetsfromchris ? #wcbalt 2012
  5. 5. 71% of global mobile internet usersexpect websites to load as quickly asthe 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 #wcbalt @tweetsfromchris 2012
  6. 6. 57% Will not recommend the site. Too Slow... 43% Would unlikely return. Source: Equation Research on behalf of Compuware “What Users Want From Mobile” CHRISTOPHER COCHRAN #wcbalt @tweetsfromchris 2012
  7. 7. For some, mobile is the ONLY connection to the web. 10% of Americans Are Mobile Only (This number can be much higher in other countries) Source: Pew Research Centers Internet & American Life Project “Cell Internet Use 2012”CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  8. 8. Cell phone owners do most of their online 17% browsing on their phone, rather than a computer or other device Source: Pew Research Centers Internet & American Life Project “Cell Internet Use 2012”CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  9. 9. WE WANT TO KEEP VISITORS☻ HAPPY AND GiveA POSITIVE EXPERIENCECHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  10. 10. ☻ & 80% + mobile users who had A fast Reliable experince Will Retrun and return more often.CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  11. 11. Go Fast Smaller or no images (lower http requests). Load only what is needed. display: none; is NOT your friend.CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  12. 12. Be PreciseCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  13. 13. WHO is the USER?CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  14. 14. Designing for the USER is Designing for the BUSINESS.CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  15. 15. What is IMPORTANT to the user?CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  16. 16. START with the LEAST Common Denominator. ACCESSIBLE , LEAN, CLEAN, LIGHTWEIGHTCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  17. 17. Flexible FoundationFluid GridMedia QueriesFeature DetectionAdaptive Images & Adaptive MediaCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  18. 18. MATH (Sorry) ems target / context = result 28px / 16px = 1.75em Percentages section / site = result 100(645px / 960px) = 67.1875CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  19. 19. 960px HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% (645px) 1.635% (300px) (15px)CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  20. 20. Media Queries <link rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)" href="example.css" /> @media only screen and (min-width: 480px) and (max-width: 767px) { • @media rule body { width: 436px; } } @import url("example.css") only screen • @import rule and (min-width: 480px) and (max-width: 767px); Great tool for “the other browsers”: https://github.com/scottjehl/RespondCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  21. 21. Feature DETECTION ModernizrCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  22. 22. wp_is_mobile()CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  23. 23. ADAPTIVE MEDIACHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  24. 24. CHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  25. 25. Icon Fonts Font AwesomeCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  26. 26. Adaptive ImagesCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  27. 27. TOOLS of the TRADECHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  28. 28. MOBILE FIRST = CONTENT FIRST = USER FIRSTCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012
  29. 29. The Web Is Not A Fixed MediumCHRISTOPHER COCHRAN #wcbalt@tweetsfromchris 2012

×