Responsive Design 101

455 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
455
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive Design 101

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

×