Responsive and Mobile Design

1,347 views

Published on

Now that more than 55% of American adults own a smartphone, designing for the mobile web isn't just important—it's a requirement. Through this session, we'll discuss best practices for designing mobile websites using responsive design, a technique for developing cross-platform to account for the ever-growing range of device sizes and resolutions. The session will also cover design constraints of different devices, how to use CSS3 media queries, and front-end development frameworks like Twitter Bootstrap.

Published in: Design

Responsive and Mobile Design

  1. 1. Responsive Design Mobile design and development techniques
  2. 2. What we’re covering A brief agenda... • What is responsive design • How to design for mobile effectively • Implementing responsive design techniques on the web • Frameworks to make your life easier
  3. 3. @mike_tedeschi http://mtedeschi.com
  4. 4. Why support mobile? (really? you’re not convinced?)
  5. 5. 1.75B Smartphone Users Worldwide http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014
  6. 6. 1.75B Smartphone Users Worldwide http://www.emarketer.com/Article/Smartphone-Users-Worldwide-Will-Total-175-Billion-2014 (that’s 300 million more than last year)
  7. 7. 55% of Americans have smartphones http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  8. 8. 60% use their phone to go online http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  9. 9. http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/ 200 million unhappy visitors
  10. 10. 200 million unhappy visitors customers http://www.pewinternet.org/2013/09/19/cell-phone-activities-2013/
  11. 11. What is responsive design?
  12. 12. What is responsive design? More than just a buzzword The web design approach for building sites that adapt and are optimized for a range of screen resolutions, sizes, and formats.
  13. 13. They “respond” to the conditions in which the site is viewed.
  14. 14. 1200px 996px 480px768px
  15. 15. Desktops and Laptops Tablets Phones
  16. 16. Common breakpoints For most screen sizes • 320 px – Mobile portrait • 480 px – Mobile landscape • 600 px – Small tablet • 768 px – Tablet portrait • 1024 px – Tablet landscape/Netbook • 1280 px & greater – Desktop
  17. 17. Responsive A d a p t i v e ­versus
  18. 18. Responsive (percentages) Adaptive (pixels)
  19. 19. Responsive (percentages) Adaptive (pixels) 30px
  20. 20. Responsive (percentages) Adaptive (pixels) 12.28% 30px
  21. 21. We usually meet in the middle
  22. 22. Adaptive (fixed-width grid) Responsive (%-based grid)
  23. 23. So, what actually changes?
  24. 24. Adaptive (fixed-width grid)
  25. 25. Navigation Categories
  26. 26. Categories Search Ads = gone
  27. 27. Categories Images fit
  28. 28. Mobile web design best practices
  29. 29. Best practices & considerations Think about how people use their phones • Consider hand placement • Avoid edges and corners if possible • Place content in the middle and give room to scroll • Make targets an appropriate, easy-to-tap size • Don’t place anything important under a target/button
  30. 30. Fingers and hand placement
  31. 31. Ideal hit zone
  32. 32. Ideal hit zone The short stretch
  33. 33. Ideal hit zone The long stretch The short stretch
  34. 34. Avoid the edges
  35. 35. http://4ourth.com/
  36. 36. Inaccurate http://4ourth.com/
  37. 37. Accurate!Inaccurate http://4ourth.com/
  38. 38. Be smart with buttons/targets
  39. 39. Contact point +
  40. 40. + Obscured area Contact point
  41. 41. Where is the worst place for a button?
  42. 42. Good luck.
  43. 43. How to implement it on the web (yes, that means writing code)
  44. 44. CSS Media Queries
  45. 45. .content { width: 1024px; margin: 0 auto; background: red; } Start with some basic CSS.
  46. 46. What a lovely red box!
  47. 47. That doesn’t seem quite right...
  48. 48. .content { width: 1024px; margin: 0 auto; background: red; } @media screen and (max-width: 1023px) { .content { width: 100%; margin: 0 20px; } } Let’s add in some media queries.
  49. 49. Much better!
  50. 50. So... break that down.
  51. 51. @media screen and (max-width: 1023px) { ... } rule media parameters
  52. 52. @media screen and (max-width: 1023px) { ... } print handheld projection tv aural braille embossed tty all
  53. 53. @media screen and (max-width: 1023px) { ... } min-width max-device-width min-device-width device-aspect-ratio orientation min-resolution color
  54. 54. .content { width: 50%; margin: 0 auto; background: red; } @media screen and (min-width: 320px) and (max-width: 480px) { .content { width: 100%; } } Between a range of screen sizes.
  55. 55. .content { width: 50%; margin: 0 auto; background: red; } @media screen and (min-width: 320px) and (max-width: 480px) { .content { width: 100%; } } Between a range of screen sizes.
  56. 56. .content { width: 100%; margin: 0 auto; background: red; } @media screen and (orientation: portrait) { .content { width: 50%; } } Orientation of the device or window.
  57. 57. .content { width: 100%; margin: 0 auto; background: red; } @media screen and (orientation: portrait) { .content { width: 50%; } } Orientation of the device or window.
  58. 58. .my-image { width: 100px; background: url(my-image.jpg); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .my-image { background-image: url(my-image@2x.jpg); background-size: 100%; } } On retina or high-resolution displays.
  59. 59. Frameworks and libraries
  60. 60. Frameworks & libraries Better than starting from scratch • Twitter Bootstrap • Zurb Foundation • Responsive Grid System • Many, many others...
  61. 61. Twitter Bootstrap 3.0 getbootstrap.com
  62. 62. Zurb Foundation 5.0 foundation.zurb.com
  63. 63. Responsive Grid System responsivegridsystem.com
  64. 64. Go make awesome mobile sites!
  65. 65. @mike_tedeschi http://mtedeschi.com

×