Responsive Design

Responsive Design

A very basic presentation we gave about responsive design, its history and its future.

6596d17df9ab2265a3a86d23c4c942d2?s=128

Nico Verbruggen

April 22, 2013
Tweet

Transcript

  1. RESPONSIVE DESIGN by Tim Vermaercke, Gertjan Vermeir & Nico Verbruggen

  2. Contents • Introduction • History of mobile browsing & design

    • Why implement a responsive design? • Implementation (how-to) • Short demonstration
  3. Introduction A brief explanation of responsive design

  4. What is responsive design? • creating a website design that

    supports: ◦ multiple screen sizes using a grid-based system
  5. None
  6. What is responsive design? • creating a website design that

    supports: ◦ multiple screen sizes ◦ multiple input methods mouse/trackpad, finger(s)
  7. None
  8. History of the mobile web How we got to this

    point
  9. 2007 Year of the new smartphones

  10. None
  11. None
  12. No real browsing, no mobile site (mostly used for email)

  13. 2008-2010 Introduction of 3G and faster phones + networks

  14. None
  15. 3G > EDGE no 'fast' internet, but used for some

    browsing (!) some request for mobile websites
  16. 2010 Introduction of the first tablets

  17. None
  18. 2011-2012 More and more tablets, more and more smartphones (more

    Android!)
  19. Adaptive design (a dynamic site where adaptation occurs server-side)

  20. Responsive design (a dynamic site where adaptation occurs client-side)

  21. Today 4G, many tablets, many smartphones more mobile browsing

  22. 4G: faster than WiFi (limited availability in Belgium)

  23. Adobe Digital Marketing Analysis (March 2013, data from February '13)

    (http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
  24. Adobe Digital Marketing Analysis (March 2013, data from February '13)

    (http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
  25. Why we chose responsive design

  26. Web developer • World Wide Web applications • Up to

    date • New methods • Technical • Design
  27. The rising demand

  28. Why implement a responsive design?

  29. Twice the work Lyrics Designs Coding

  30. By 2020, mobile internet should take over desktop internet usage

  31. None
  32. Techniques

  33. Device awareness since CSS 2.1 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"

    /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  34. Acceptable Media Types

  35. None
  36. iPhone 3G 320 by 480 pixels iPhone 5 640 by

    1,136 pixels
  37. <link rel="stylesheet" type="text/css" href="style.css" media="handheld" /> <link rel="stylesheet" type="text/css" href="style.css"

    media="handheld and (max- device-width: 320px)” />
  38. <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-device-width: 320px)” /> Media

    type Media query
  39. <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-device-width: 1136px) and (resolution:

    326ppi)” /> Keyword to chain properties together
  40. @media screen and (max-device-width: 1136px) { body { background: #000;

    color: #FFF; } }
  41. @import url(‘style.css’) screen and (max- device-width: 1136px);

  42. media queries = conditional

  43. Questions?

  44. Some extra time Here's some examples

  45. a list apart

  46. designed to move

  47. and many more...

  48. Thank you for your attention!