BEYOND BEING  RESPONSIVEA MOBILE FIRST STRATEGY
Mobile first strategies build to theconstraints of mobile devices, and theneeds of mobile users first.
LUKE WROBLEWSKI "Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen ...
JEREMY KEITH"Mobile web design has alreadyestablished a number of excellent bestpractices whereas traditional “desktop”web...
JEREMY KEITH  "How can we design for our content  in such a way that the reader won’t  need or want to reach for Readabili...
DESIGN WEB SOLUTIONS GIVE USERS WHAT THEY WANT
MOBILE FIRST
MOBILE FIRSTDont fix the container, use %.
MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.
MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.JavaScript is optional or unavailable!
kB loaded ~ Alexa top 1m                           HTML                   other    45                    27            flas...
MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.JavaScript is optional or unavailable!Progres...
THE BAD NEWS
THE BAD NEWSRWD was the easy part!
THE BAD NEWSRWD was the easy part!Content/mobile first requires processchange.
THE BAD NEWSRWD was the easy part!Content/mobile first requires processchange.Many things appear counter-intuitive.
THE BAD NEWSRWD was the easy part!Content/mobile first requires processchange.Many things appear counter-intuitive.Fundamen...
BARRIERS TO ADOPTION"ITS A FLAWED APPROACH BECAUSE…"
NO. 1"Mobile users want different things todesktop users."
MYTH: CONTEXT = INTENT
MYTH: CONTEXT = INTENT All we know is that the screen is small.
MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales.
MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = …
MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = … Mo...
NO. 2"Mobile users are not my coreaudience, I want to focus on revenuegenerators."
MYTH: MOBILE IS NICHEhttp://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE• 378k   iPhones sold per day (562k iOS)http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE• 378k   iPhones sold per day (562k iOS)• 700k Android   devices activatedhttp://www.lukew.com/ff/ent...
MYTH: MOBILE IS NICHE• 378k   iPhones sold per day (562k iOS)• 700k Android   devices activated• 200k   Nokia smartphonesh...
MYTH: MOBILE IS NICHE• 378k   iPhones sold per day (562k iOS)• 700k Android   devices activated• 200k   Nokia smartphones•...
MYTH: MOBILE IS NICHE• 378k   iPhones sold per day (562k iOS)• 700k Android   devices activated• 200k   Nokia smartphones•...
MYTH: MOBILE IS NICHE                2009        2010         2011   PayPal      $141m   eBay        $600mhttp://www.lukew...
MYTH: MOBILE IS NICHE                2009        2010         2011   PayPal      $141m       $750m   eBay        $600m    ...
MYTH: MOBILE IS NICHE                2009        2010         2011   PayPal      $141m       $750m         $4b   eBay     ...
NO. 3"Developing mobile-friendly sites costsmore."
MYTH: RWD IS EXPENSIVE
MYTH: RWD IS EXPENSIVE • Ignoring   potential customers is more so.
MYTH: RWD IS EXPENSIVE • Ignoring   potential customers is more so. • Neednt    cost more than existing techniques.
MYTH: RWD IS EXPENSIVE • Ignoring    potential customers is more so. • Neednt     cost more than existing techniques. • It...
MYTH: RWD IS EXPENSIVE • Ignoring    potential customers is more so. • Neednt     cost more than existing techniques. • It...
NO. 4"Mobile-friendly sites dont haveenough room for my logo / happy-salad.png / break-dancing paper clip /wonder-widget d...
MYTH: [LOGOS] SELL STUFF
MYTH: [LOGOS] SELL STUFF  • Users   came for you content, not your logo.
MYTH: [LOGOS] SELL STUFF  • Users   came for you content, not your logo.  • Junk   drives users away.
MYTH: [LOGOS] SELL STUFF  • Users   came for you content, not your logo.  • Junk   drives users away.  • Delays   drive us...
MOBILE FIRSTDOING IT RIGHT!
MOBILE FIRST NEAR MISSES…
SUMMARY
SUMMARYWork backwards.
SUMMARYWork backwards.Focus on user needs.
SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!
SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.
SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.
SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.Make it f...
SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.Make it f...
THINK MOBILE FIRST   EVERYONE WINS!
THANKS FOR LISTENING
QUESTIONS?
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
Upcoming SlideShare
Loading in...5
×

Beyond being responsive, a mobile first strategy

23,421

Published on

A discussion about the benefits of a mobile-first responsive approach to web development, why it is as important for desktop environments as it is for mobile devices and why it is the future of web development.

Along the way we'll dispell some of the myths you have heard about responsive web development, leaving you no excuses to not start your next project thinking mobile-first.

Coming soon to a device near you.

This presentation was first shown at the international Joomla conference, J and Beyond 2012, by Seth Warburton of Internet Inspired.

1 Comment
9 Likes
Statistics
Notes
  • Still not working on #mobilefirst strategy Think again ??
    Our #dataanalytics shows #mobile rule the internet worldwide - 64% of market share vs #desktop only 30%. See yourself. http://tuq.in/+stats
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
23,421
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
119
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide
  • Seth Warburton - Internet inspired\n\nI hope to change the way you think about building your next web site / template / extension.\n\nWhat is Mobile first? \n
  • Reach the biggest audience\n\nDifference with mobile vs desktop users?\n
  • Examples are not hard to find.\n\nWhy do people design websites like this?\n
  • Why would this change on larger screens?\n\nI like to call him Luke W! Authored &apos;mobile first&apos;\n\nLuke has done all the stats, so I don&apos;t have to.\n
  • Excellent blog. Tackling many of the big issues of rwd.\n\nExamples of bloat? Where did we go wrong?\n\nTwitter link from a friend.\n
  • \n\n
  • \n\n
  • Read now - Read later - Send to kindle\n\nMaximum enjoyment. Changed the way I read online.\n\nQuick poll. Who uses these tools?\n
  • Driving your users away by creating design &apos;barriers&apos; is bad for business.I\n
  • \n\n
  • \n\n
  • \n\n
  • Web default is &apos;mobile&apos;. No widths, no media queries = mobile friendly\n
  • If you can do it with HTML and CSS, do so.\n
  • If you can only do it with JavaScript ask:\n\nDoes this truly benefit the user?\n
  • State of the web - may 1998 = 61kb\n\nThe world still has 1998 web\nDeveloping countries - Old technology - &apos;feature phones&apos;\n\nPeople pay for mobile data! We build sites as if everyone has fast, cheap broadband. They don&apos;t. \n
  • Progressive enhancement doesn&apos;t just apply to css3.\n\nAdd features for supported devices, don&apos;t strip them on unsupported \n
  • \n\n
  • \n\n
  • Web content is fluid by default.\n
  • Reverses the traditional build process. Mobile can&apos;t be an add-on.\n
  • Mobile layout to all devices? @media query for desktop?\n
  • Images remain an issue. Essential images the safe default = user first! \n
  • Some of the many myths you may hear...\n
  • Who can guess the next slide?\n
  • \n\n
  • Mobile users are rushed, distracted and have terrible connectivity\n\nMobile users only want your phone number and a map (they use their phones to find restaurants)\n
  • \n\n
  • Who here has their smartphone connected via wifi when at home?\n\nWho has used their smartphone sat in their livingroom? Laid in bed? Waiting for a train/plane?\n
  • Desktop assumption: indoors, seated, lots of bandwidth, big screen.\n\nProbably true: indoors, seated...\n\nMobile assumption: outdoors, walking, low bandwidth, small screen.\n\nProbably true: small screen. (iPad?).\n
  • Dont dumb it down for &apos;mobile&apos; users, they won&apos;t thank you.\n
  • Meet the users needs, whatever their screen size.\n
  • \n\n
  • There isn&apos;t many of them.\n\nThey don&apos;t buy things\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • 1.45m devices each day vs 371k babies\n\n42% tablet owners have purchased something (Luke W)\n\n29% of smartphone owners\n
  • \n\n
  • \n\n
  • Healthy gains in a stagnating world economy\n\nWhat will happen when the economy picks up?\n\n\n\n
  • \n\n
  • \n\n
  • \n\n
  • Not meeting user needs and expectations means costs.\n\nRemember mobile spending growth?\n
  • It requires some new skills and a change of mindset.\n
  • iPhone apps? Android?\n\nThey weren&apos;t here 5 yrs ago, they may not be in 5 yrs time. I think HTML and CSS will still be here. \n
  • Apps cost huge amounts to develop (no cross platform solutions)\n\nmiddleman costs\n\n&apos;mobile&apos; sites require constant maintenance (device detection) and provide only limited coverage. (smart tv, console)\n
  • \n\n
  • \n\n
  • Coca-cola logo 272x69\n
  • \n\n
  • Readability / Instapaper?\n\nHappy people stay longer / buy more / return / tell friends\n
  • E-commerce : avg impact of 1 second delay = 7% reduction in conversions\n
  • Desktop, mobile? Faster sites are always better sites.\n\nBetter rankings, more conversions.\n
  • \n\n
  • Content rich\n\nMobile friendly (buttons for key tasks)\n\nContent first (navigation second)\n
  • You don&apos;t need images or tons of content to make a statement with style.\n
  • Ampersand 129kb (36.5 k logo)\n\nIf you provide great UX for mobile, why would you change that for bigger screens?\n
  • A beautiful design, providing everything the user came for: content\n
  • Well intended.\n\nEasy to get caught on little details.\n
  • A well thought out design\n\nProminent mobile search\n\nNo mobile menu without js. Don&apos;t use .js to ensure things work!\n\nThe big players stumble here too. Guess what&apos;s next?\n
  • No menu!\n\nClue in the css3 logo. Progressive enhancement is not only for CSS!\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • Beyond being responsive, a mobile first strategy

    1. 1. BEYOND BEING RESPONSIVEA MOBILE FIRST STRATEGY
    2. 2. Mobile first strategies build to theconstraints of mobile devices, and theneeds of mobile users first.
    3. 3. LUKE WROBLEWSKI "Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business."http://www.lukew.com/ff/entry.asp?1117
    4. 4. JEREMY KEITH"Mobile web design has alreadyestablished a number of excellent bestpractices whereas traditional “desktop”web design has become the domain oflaziness and complacency. "http://adactio.com/journal/4523
    5. 5. JEREMY KEITH "How can we design for our content in such a way that the reader won’t need or want to reach for Readability or Instapaper?"http://adactio.com/journal/4523
    6. 6. DESIGN WEB SOLUTIONS GIVE USERS WHAT THEY WANT
    7. 7. MOBILE FIRST
    8. 8. MOBILE FIRSTDont fix the container, use %.
    9. 9. MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.
    10. 10. MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.JavaScript is optional or unavailable!
    11. 11. kB loaded ~ Alexa top 1m HTML other 45 27 flash 80 css 36 scripts 189 images 641April 2012 - average page size = 1018kBwww.httparchive.org/interesting.php
    12. 12. MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.JavaScript is optional or unavailable!Progressive enhancement?
    13. 13. THE BAD NEWS
    14. 14. THE BAD NEWSRWD was the easy part!
    15. 15. THE BAD NEWSRWD was the easy part!Content/mobile first requires processchange.
    16. 16. THE BAD NEWSRWD was the easy part!Content/mobile first requires processchange.Many things appear counter-intuitive.
    17. 17. THE BAD NEWSRWD was the easy part!Content/mobile first requires processchange.Many things appear counter-intuitive.Fundamental issues remain.
    18. 18. BARRIERS TO ADOPTION"ITS A FLAWED APPROACH BECAUSE…"
    19. 19. NO. 1"Mobile users want different things todesktop users."
    20. 20. MYTH: CONTEXT = INTENT
    21. 21. MYTH: CONTEXT = INTENT All we know is that the screen is small.
    22. 22. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales.
    23. 23. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = …
    24. 24. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = … Mobile users have time, money and choice.
    25. 25. NO. 2"Mobile users are not my coreaudience, I want to focus on revenuegenerators."
    26. 26. MYTH: MOBILE IS NICHEhttp://www.lukew.com/ff/entry.asp?1506
    27. 27. MYTH: MOBILE IS NICHE• 378k iPhones sold per day (562k iOS)http://www.lukew.com/ff/entry.asp?1506
    28. 28. MYTH: MOBILE IS NICHE• 378k iPhones sold per day (562k iOS)• 700k Android devices activatedhttp://www.lukew.com/ff/entry.asp?1506
    29. 29. MYTH: MOBILE IS NICHE• 378k iPhones sold per day (562k iOS)• 700k Android devices activated• 200k Nokia smartphoneshttp://www.lukew.com/ff/entry.asp?1506
    30. 30. MYTH: MOBILE IS NICHE• 378k iPhones sold per day (562k iOS)• 700k Android devices activated• 200k Nokia smartphones• 143k Blackberryhttp://www.lukew.com/ff/entry.asp?1506
    31. 31. MYTH: MOBILE IS NICHE• 378k iPhones sold per day (562k iOS)• 700k Android devices activated• 200k Nokia smartphones• 143k Blackberry• 371k babies bornhttp://www.lukew.com/ff/entry.asp?1506
    32. 32. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m eBay $600mhttp://www.lukew.com/ff/entry.asp?1506
    33. 33. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m eBay $600m $2bhttp://www.lukew.com/ff/entry.asp?1506
    34. 34. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m $4b eBay $600m $2b $5bhttp://www.lukew.com/ff/entry.asp?1506
    35. 35. NO. 3"Developing mobile-friendly sites costsmore."
    36. 36. MYTH: RWD IS EXPENSIVE
    37. 37. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so.
    38. 38. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Neednt cost more than existing techniques.
    39. 39. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Neednt cost more than existing techniques. • It is future-friendly, offering better ROI.
    40. 40. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Neednt cost more than existing techniques. • It is future-friendly, offering better ROI. • Try costing the alternatives.
    41. 41. NO. 4"Mobile-friendly sites dont haveenough room for my logo / happy-salad.png / break-dancing paper clip /wonder-widget dashboard!"
    42. 42. MYTH: [LOGOS] SELL STUFF
    43. 43. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo.
    44. 44. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo. • Junk drives users away.
    45. 45. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo. • Junk drives users away. • Delays drive users away.
    46. 46. MOBILE FIRSTDOING IT RIGHT!
    47. 47. MOBILE FIRST NEAR MISSES…
    48. 48. SUMMARY
    49. 49. SUMMARYWork backwards.
    50. 50. SUMMARYWork backwards.Focus on user needs.
    51. 51. SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!
    52. 52. SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.
    53. 53. SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.
    54. 54. SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.Make it fast!
    55. 55. SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.Make it fast! really fast!
    56. 56. THINK MOBILE FIRST EVERYONE WINS!
    57. 57. THANKS FOR LISTENING
    58. 58. QUESTIONS?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×