Responsive Design

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

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
6. What is responsive design? • creating a website design that supports: ◦ multiple screen sizes ◦ multiple input methods mouse/trackpad, finger(s)
8. History of the mobile web How we got to this point
9. 2007 Year of the new smartphones
12. No real browsing, no mobile site (mostly used for email)
13. 2008-2010 Introduction of 3G and faster phones + networks
15. 3G > EDGE no 'fast' internet, but used for some browsing (!) some request for mobile websites
16. 2010 Introduction of the first tablets
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
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
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!