• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Beyond being responsive, a mobile first strategy
 

Beyond being responsive, a mobile first strategy

on

  • 4,185 views

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 ...

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.

Statistics

Views

Total Views
4,185
Views on SlideShare
3,461
Embed Views
724

Actions

Likes
8
Downloads
80
Comments
1

11 Embeds 724

http://cocoate.com 600
http://jandbeyond.org 42
http://elearning.tadelformacion.com 32
http://alle.dev 20
http://elearning.fatinafar.com 14
http://jp4.mo2do.net 6
http://jp4studio.mo2do.net 4
http://opensourcetalking.com 3
https://www.linkedin.com 1
http://translate.googleusercontent.com 1
https://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 'mobile first'\n\nLuke has done all the stats, so I don'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 'barriers' is bad for business.I\n
  • \n\n
  • \n\n
  • \n\n
  • Web default is 'mobile'. 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 - 'feature phones'\n\nPeople pay for mobile data! We build sites as if everyone has fast, cheap broadband. They don't. \n
  • Progressive enhancement doesn't just apply to css3.\n\nAdd features for supported devices, don't strip them on unsupported \n
  • \n\n
  • \n\n
  • Web content is fluid by default.\n
  • Reverses the traditional build process. Mobile can'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 'mobile' users, they won't thank you.\n
  • Meet the users needs, whatever their screen size.\n
  • \n\n
  • There isn't many of them.\n\nThey don'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'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'mobile' 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'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't use .js to ensure things work!\n\nThe big players stumble here too. Guess what'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 Beyond being responsive, a mobile first strategy Presentation Transcript

  • 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 is the most important set of features for your customers and your business."http://www.lukew.com/ff/entry.asp?1117
  • 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
  • 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
  • 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 flash 80 css 36 scripts 189 images 641April 2012 - average page size = 1018kBwww.httparchive.org/interesting.php
  • MOBILE FIRSTDont fix the container, use %.HTML and CSS have universal support.JavaScript is optional or unavailable!Progressive enhancement?
  • 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.Fundamental issues remain.
  • 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 = … Mobile users have time, money and choice.
  • 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/entry.asp?1506
  • 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
  • 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
  • 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
  • MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m eBay $600mhttp://www.lukew.com/ff/entry.asp?1506
  • MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m eBay $600m $2bhttp://www.lukew.com/ff/entry.asp?1506
  • MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m $4b eBay $600m $2b $5bhttp://www.lukew.com/ff/entry.asp?1506
  • 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 is future-friendly, offering better ROI.
  • 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.
  • NO. 4"Mobile-friendly sites dont haveenough room for my logo / happy-salad.png / break-dancing paper clip /wonder-widget dashboard!"
  • 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 users away.
  • 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 fast!
  • SUMMARYWork backwards.Focus on user needs.Stay focused on user needs!Do not exclude users.Do not exclude devices.Make it fast! really fast!
  • THINK MOBILE FIRST EVERYONE WINS!
  • THANKS FOR LISTENING
  • QUESTIONS?