A simplified introduction to the concept of Responsive Design.

1. Responsive Design
Joel Boonstra
joel@agathongroup.com
@jboonstra

3. How We Design(ed)

4. Oh Yeah, Mobile!

6. http://wtfmobileweb.com/post/54912647443/

7. What Do We Do?

10. What’s the problem?

15. http://wtfmobileweb.com/post/55600401786/

16. http://wtfmobileweb.com/post/54793886495/

18. What Do We Do Instead?

19. Responsive Design

25. How Does It Work?

26. Responsive Websites Have...

27. Responsive Websites Have...
• Flexible Content

28. Responsive Websites Have...
• Flexible Content
• Dynamic Design

29. Flexible Content

46. img {
max-width: 100%;
}

49. Dynamic Design

52. /* styles for all screen widths go here */
@media screen and (max-width: 700px) {
/* browsers 700px and smaller get these
styles */
}

63. New Mobile Devices Per Day
http://www.lukew.com/ff/entry.asp?1728

64. New Mobile Devices Per Day
1,450,000
2011
2012
http://www.lukew.com/ff/entry.asp?1728

65. New Mobile Devices Per Day
3,600,000
1,450,000
2011
2012
http://www.lukew.com/ff/entry.asp?1728

66. Worldwide Mobile
http://www.lukew.com/ff/entry.asp?1644

67. Worldwide Mobile
•
Over 1 billion smartphones worldwide.
http://www.lukew.com/ff/entry.asp?1644

68. Worldwide Mobile
•
•
Over 1 billion smartphones worldwide.
16 years to reach 1 billion.
http://www.lukew.com/ff/entry.asp?1644

69. Worldwide Mobile
•
•
•
Over 1 billion smartphones worldwide.
16 years to reach 1 billion.
Estimated 3 years to reach 2 billion.
http://www.lukew.com/ff/entry.asp?1644

70. Worldwide Mobile
•
•
•
•
Over 1 billion smartphones worldwide.
16 years to reach 1 billion.
Estimated 3 years to reach 2 billion.
46% of the population has at least one
active mobile device.
http://www.lukew.com/ff/entry.asp?1644

73. /* styles for all screen widths go here */
@media screen and (max-width: 700px) {
/* browsers 700px and smaller get these
styles */
}

74. /* styles for all screen widths go here */
@media screen and (min-width: 1005px) {
/* browsers 1005px and wider get these
styles */
}

75. /* styles for all screen widths go here */
@media screen and (min-width: 1005px) {
/* browsers 1005px and wider get these
styles */
}

76. /* styles for all screen widths go here */
@media screen and (min-width: 1005px) {
/* browsers 1005px and wider get these
styles */
}
@media screen and (min-width: 1200px) {
/* browsers 1200px and wider get these
styles */
}

84. Technical Considerations

85. Technical Considerations
•
Bandwidth

86. Technical Considerations
•
•
Bandwidth
Context

87. Technical Considerations
•
•
•
Bandwidth
Context
Images - https://github.com/scottjehl/
picturefill

88. Technical Considerations
•
•
•
Bandwidth
•
Maintenance
Context
Images - https://github.com/scottjehl/
picturefill

89. The Future

90. Further Reading

91. Further Reading
•
http://mediaqueri.es/

92. Further Reading
•
•
http://mediaqueri.es/
http://alistapart.com/

93. Further Reading
•
•
•
http://mediaqueri.es/
http://alistapart.com/
http://www.lukew.com/ff/

94. Further Reading
•
•
•
•
http://mediaqueri.es/
http://alistapart.com/
http://www.lukew.com/ff/
http://aneventapart.com/

95. Questions

96. Thanks!
Joel Boonstra
joel@agathongroup.com
@jboonstra