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.

Transcript

1. brian@brianmcconnell.me Responsive Web 101
2. brian@brianmcconnell.me Responsive Web 101 1. A flexible, grid-based layout 2. Fluid images and media 3. Media Queries
3. brian@brianmcconnell.me Responsive Web 101
4. brian@brianmcconnell.me Why Responsive?
5. brian@brianmcconnell.me
6. brian@brianmcconnell.me This is the web
7. brian@brianmcconnell.me Device Proliferation Google analytics - May 2013 Total Screen Resolutions Mobile Screen Resolutions Browsers Operating Systems 425 205 27 17
8. brian@brianmcconnell.me Top Operating Systems Google analytics - May 2013
9. brian@brianmcconnell.me Um... we’ll just make an iOS app. kthxbye.
10. brian@brianmcconnell.me It’s Not Just Phones
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
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
13. brian@brianmcconnell.me “Mobile” Isn’t Mobile
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
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
16. brian@brianmcconnell.me How It Works
17. brian@brianmcconnell.me Breakpoints >= 768px <= 767px
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).
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%; } }
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
21. brian@brianmcconnell.me Cinchcast Has The Responsive
22. brian@brianmcconnell.me Can You Defeat My Cinchcast Style?
23. brian@brianmcconnell.me Twitter Bootstrap
24. brian@brianmcconnell.me Large desktops: Regular Desktops (IE8): Tablets to regular desktops: Twitter Bootstrap >= 1200px 980px - 1199px 768px-979px <= 767px
25. brian@brianmcconnell.me Twitter Bootstrap
26. brian@brianmcconnell.me Twitter Bootstrap
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
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
29. brian@brianmcconnell.me Twitter Bootstrap
30. brian@brianmcconnell.me Twitter Bootstrap
31. brian@brianmcconnell.me Twitter Bootstrap
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
33. brian@brianmcconnell.me
34. brian@brianmcconnell.me Oh snap! Mobile is easy...
35. brian@brianmcconnell.me Good Mobile UX Responsive Images Gesture Support JS Performance
36. brian@brianmcconnell.me Responsive Images
37. brian@brianmcconnell.me Responsive Images <img src="small.jpg" id="dog" /> <style> @media (min-width: 768px){ #dog { content: url(‘woof.jpg’); } } </style>
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>
39. brian@brianmcconnell.me Gesture Support New affordances for touch devices to replace hovers, double clicks and menus.
40. brian@brianmcconnell.me JS Performance Your phone is a computer, but it’s still a phone.
41. brian@brianmcconnell.me Thank You! brian@brianmcconnell.me