Successfully reported this slideshow.
Your SlideShare is downloading. ×

Responsive presentation

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 48 Ad
Advertisement

More Related Content

Similar to Responsive presentation (20)

Recently uploaded (20)

Advertisement

Responsive presentation

  1. 1. RESPONSIVE DESIGN by Tim Vermaercke, Gertjan Vermeir & Nico Verbruggen
  2. 2. Contents ● Introduction ● History of mobile browsing & design ● Why implement a responsive design? ● Implementation (how-to) ● Short demonstration
  3. 3. Introduction A brief explanation of responsive design
  4. 4. What is responsive design? ● creating a website design that supports: ○ multiple screen sizes using a grid-based system
  5. 5. What is responsive design? ● creating a website design that supports: ○ multiple screen sizes ○ multiple input methods mouse/trackpad, finger(s)
  6. 6. History of the mobile web How we got to this point
  7. 7. 2007 Year of the new smartphones
  8. 8. No real browsing, no mobile site (mostly used for email)
  9. 9. 2008-2010 Introduction of 3G and faster phones + networks
  10. 10. 3G > EDGE no 'fast' internet, but used for some browsing (!) some request for mobile websites
  11. 11. 2010 Introduction of the first tablets
  12. 12. 2011-2012 More and more tablets, more and more smartphones (more Android!)
  13. 13. Adaptive design (a dynamic site where adaptation occurs server-side)
  14. 14. Responsive design (a dynamic site where adaptation occurs client-side)
  15. 15. Today 4G, many tablets, many smartphones more mobile browsing
  16. 16. 4G: faster than WiFi (limited availability in Belgium)
  17. 17. Adobe Digital Marketing Analysis (March 2013, data from February '13) (http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
  18. 18. Adobe Digital Marketing Analysis (March 2013, data from February '13) (http://blogs.adobe.com/digitalmarketing/digital-index/tablets-trump-smartphones-in-global-website-traffic/)
  19. 19. Why we chose responsive design
  20. 20. Web developer ● World Wide Web applications ● Up to date ● New methods ● Technical ● Design
  21. 21. The rising demand
  22. 22. Why implement a responsive design?
  23. 23. Twice the work Lyrics Designs Coding
  24. 24. By 2020, mobile internet should take over desktop internet usage
  25. 25. Techniques
  26. 26. 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" />
  27. 27. Acceptable Media Types
  28. 28. iPhone 3G 320 by 480 pixels iPhone 5 640 by 1,136 pixels
  29. 29. <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)” />
  30. 30. <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-device-width: 320px)” /> Media type Media query
  31. 31. <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-device-width: 1136px) and (resolution: 326ppi)” /> Keyword to chain properties together
  32. 32. @media screen and (max-device-width: 1136px) { body { background: #000; color: #FFF; } }
  33. 33. @import url(‘style.css’) screen and (max- device-width: 1136px);
  34. 34. media queries = conditional
  35. 35. Questions?
  36. 36. Some extra time Here's some examples
  37. 37. a list apart
  38. 38. designed to move
  39. 39. and many more...
  40. 40. Thank you for your attention!

×