Responsive Design

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!