Responsive Design 101

Responsive Design 101

A brief lesson for our software engineers on Responsive Web Design.

The first half covers why responsive design is so important including the business case, the technical problems it solves, and why it's mutually exclusive from native apps.

The second half covers the implementation techniques. I discuss CSS media queries and optimizing image payloads.

Ba32a133f29e9ee8f806a81b2b0ffd94?s=128

Brian McConnell

July 09, 2013
Tweet

Transcript

  1. 7.

    brian@brianmcconnell.me Device Proliferation Google analytics - May 2013 Total Screen

    Resolutions Mobile Screen Resolutions Browsers Operating Systems 425 205 27 17
  2. 11.

    brian@brianmcconnell.me The Web Is A Gateway Drug Most people download

    4 apps per month Most people access 25 sites per day More Americans (36.4%) use their mobile browser than access applications (34.4%) http://www.lukew.com/ff/entry.asp?1135 http://www.lukew.com/ff/entry.asp?1413
  3. 12.

    brian@brianmcconnell.me “Mobile” Isn’t Mobile 60% of smartphone use is at

    home 79% of tablet use is at home http://googlemobileads.blogspot.co.uk/ 2012/08/navigating-new-multi-screen- world.html
  4. 14.

    brian@brianmcconnell.me Responsive Is Good Business Time Inc. Responsive Redesign Pages

    per visit, across mobile, tablet and desktop are up considerably. Mobile is up 23% compared to what it had been. Homepage uniques are up 15%, and time spent is up 7.5%. The mobile bounce rate decreased by 26%. O’Neill Clothing Responsive Redesign 65.7% conversion rate increase on iPhone/iPod 101.2% revenue growth on iPhone/iPod 407.3% conversion rate increase on Android devices 591.4% revenue growth on Android devices http://www.lukew.com/ff/entry.asp?1691
  5. 15.

    brian@brianmcconnell.me It’s Good Business http://www.lukew.com/ff/entry.asp?1691 Time Inc. Responsive Redesign Pages

    per visit, across mobile, tablet and desktop are up considerably. Mobile is up 23% compared to what it had been. Homepage uniques are up 15%, and time spent is up 7.5%. The mobile bounce rate decreased by 26%. O’Neill Clothing Responsive Redesign 65.7% conversion rate increase on iPhone/iPod 101.2% revenue growth on iPhone/iPod 407.3% conversion rate increase on Android devices 591.4% revenue growth on Android devices
  6. 18.

    brian@brianmcconnell.me Media Queries @media  screen  and  (max-­‐device-­‐width:  767px)  {} Media

    queries contain two components: 1. A media type (screen) 2. The actual query enclosed within parentheses containing a feature to inspect (max-device-width), followed by the target value (480px).
  7. 19.

    brian@brianmcconnell.me Show Me The Code Please #left-column { width: 644px;

    float: left; } #right-column { width: 316px; float: left; } @media  screen  and  (max-­‐device-­‐width:  767px)  { #left-column, #right-column { float: none; clear: both; width: 100%; } }
  8. 20.

    brian@brianmcconnell.me Show Me The Code Please #left-column { width: 644px;

    float: left; } #right-column { width: 316px; float: left; } @media  screen  and  (max-­‐device-­‐width:  767px)  { #left-column, #right-column { float: none; clear: both; width: 100%; } } Small devices only see this
  9. 24.

    brian@brianmcconnell.me Large desktops: Regular Desktops (IE8): Tablets to regular desktops:

    Twitter Bootstrap >= 1200px 980px - 1199px 768px-979px <= 767px
  10. 27.

    brian@brianmcconnell.me <div class="container"> <div class="row" > <div class="span8"> <div class="row"

    > <div class="span8">...</div> <div class="span4">...</div> </div> </div> <div class="span4">...</div> </div> </div> Twitter Bootstrap
  11. 28.

    brian@brianmcconnell.me <style> .row { margin-left: -20px; } [class*="span"] { float:

    left; margin-left: 20px; } .span12 { width: 940px;} .span11 { width: 860px;} ... .span2 { width: 140px;} .span1 { width: 60px;} </style> Twitter Bootstrap
  12. 32.

    brian@brianmcconnell.me <style> @media (max-width: 767px){ .row { margin-left: 0px; }

    [class*="span"] { float: none; width: 100%; margin-left: 0px; } } </style> Twitter Bootstrap
  13. 38.

    brian@brianmcconnell.me Responsive Images <img src="small.jpg" data-src-large="large.jpg" /> <script> if(mobile){ $(‘img[data-src-large]’).each(

    function() { var url = $(this).data(‘data-src-large’); $(this).attr(‘src’, url); }); } </script>