A presentation given by me, Gertjan Vermeir and Tim Vermaercke at 22 April 2013 for Arteveldehogeschool.

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!