It's a Mobile Mobile Mobile World

1,975 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
1 Comment
1 Like
Statistics
Notes
  • 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
No Downloads
Views
Total views
1,975
On SlideShare
0
From Embeds
0
Number of Embeds
87
Actions
Shares
0
Downloads
54
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×