The document summarizes the evolution of web design from the early 1990s to the present day. It discusses how technical factors like improved code, browsers, devices and access have enabled the rise of responsive design. The key stages discussed are the World Wide Web era from 1992-1996, the dot-com boom from 1997-2001, the era of web standards from 2002-2007, and the modern era from 2008 onward. It emphasizes how current design approaches like responsive design have emerged from the confluence of technical capabilities and shifts in how people access the web from any device.

1. Welcome to
the Age of
Responsive
Design
Denise R. Jacobs
Rich Web Experience 2011
30 November 2011

2. The Age of Twitter
I am:
@denisejacobs
Our fine event is:
# Rwx2011 @NoFluff
And I will wax philosophic on:
#arwd

3. A true renaissance woman
Author, Speaker & Trainer,
Pan-Creative
http://www.flickr.com/photos/aarronwalter/4629078087/

4. Web design comes of age

5. The Age of What?
The web is experiencing a kind of renaissance: a
blossoming of growth and possibilities.
This is due to a confluence of 4 technical factors:

6. Code
http://www.flickr.com/photos/s4xton/2425718415/

7. Browsers

8. Devices

9. Access
http://www.marksson.com/my-two-cents/ipad-the-perfect-holiday-companion/attachment/ipad-on-the-beach

11. How did we get here?
http://www.flickr.com/photos/barretthall/205175534/

12. Evolution of the web
http://commons.wikimedia.org/wiki/File:Geological_time_spiral.png

13. http://mikenu.deviantart.com/art/ASCII-Mona-Lisa-74823952?q=sort%3Atime+favby%3Amadlabsstudio&qo=3
http://www.flickr.com/photos/ivyfield/4486938457/

14. The World Wide What? Era
1992
to
1996

15. The general populace
http://www.flickr.com/photos/rossaroni/4134794550/

16. HTML: 1991

17. CSS: 1996

18. CSS: Usage of the time
http://www.flickr.com/photos/peregrinari/2050430721/

19. Browsers: pre-1993

20. Browsers: 1993

21. Browsers: 1992-1997
• 1994: Netscape Navigator
• 1995: Internet Explorer
• 1996: Opera

22. Design: very first website

23. Web Design: circa 1996
http://csszengarden.com/?cssfile=http://www.brucelawson.co.uk/zen/sample.css

24. Computers: circa 1996

25. 1992-96: Mobile Phones
http://www.flickr.com/photos/krystiano/4136881193/

26. Mobile Phones: 1992-1997

27. Environment: 1992-1996
http://www.flickr.com/photos/stewf/393637161/

28. Dot.com Bubble Boom
Insanity Era
1997
to
2001

29. HTML: 1997-2001
• Beginning1997: HTML 3.2
• End of 1997: HTML 4.0
• Late 1999: HTML 4.01
• 2000: XHTML 1.0

30. CSS: 1998
CSS 2 introduced
• Not yet full Recommendation status,
remains Candidate Recommendation to
present.

31. Browsers: IE v. NN
http://www.flickr.com/photos/ivyfield/4486938457/

32. Design: circa 1997

33. Design: circa 2000

34. Design: Flash websites, circa 2000

35. Computers: 1999
http://www.flickr.com/photos/pigpogm/1951963648/

36. Mobile Phones: 1997-2000

37. Access: circa 2000
http://www.flickr.com/photos/net9/122099189/

38. Era of Web Standards and the
Beginnings of Ubiquity
2002
to
2007

39. HTML: 2002-2007
• HTML 4.01 and XHTML hold steady as the
favorite versions
• XHTML 1.1 released (but noone seems to
care)

40. CSS: 2002-2007
• WaSP started in 1998, but started to take
off around 2002-3
• Browser support still patchy – need mad
troubleshooting skills
• 2005: Development of CSS3 begins

41. Browsers: 2002-2007
• 2001: our favorite browser, IE6 is released
• 2002: Netscape dies
• 2003: Safari grows with Mac market
• 2004: Firefox rises from the ashes

42. Design: circa 2003

43. Design: circa 2005

44. Mobile Phones: 2002-2007
• 2002: Bl/Crackberry
• 2003: Treo combines PDA with Smartphone
• 2004: Motorola Razr released

45. Modern Era
2008
&
2009

46. HTML & CSS: 2008-2009
• Web Standards widely promoted and
embraced
• 2008: Development of HTML5 begins

47. Browsers: 2008-2009

48. Design: 2008-2009
http://www.flickr.com/photos/ivyfield/4486938457/

49. Computers: 2002-2007

50. Mobile Phones: 2007

51. Environment & Access: 2008-9
http://www.flickr.com/photos/yourdon/3475417696/

52. Present
http://www.flickr.com/photos/stormbirdstudio/4025884624/

53. We’re lucky!
http://www.flickr.com/photos/stn1978/3459778423/

54. Improved Code: Easier Implementation
http://naomiatkinsondesign.com

55. Improved Browsers

56. Great devices
http://www.flickr.com/photos/indyplanets/5693073535/

57. Can access anywhere
http://www.flickr.com/photos/yourdon/3869874855/

58. So much figured out
http://www.flickr.com/photos/argonne/4435608143/

59. From this...
http://www.flickr.com/photos/ivyfield/4486938457/

60. Technical confluence

61. Foundations for this...
http://www.flickr.com/photos/ivyfield/4486938457/

62. Design confluence

63. Emotional Design
“Aesthetically pleasing objects appear to users
to be more effective by virtue of their sensual
appeal and an affinity the user feels for the
object based on a formation of an emotional
connection to it. “
- Wikipedia
(with liberal edits)

64. Experience Design
“…Designing products, processes, services, events,
and environments with a focus placed on the
quality of the user experience….Experience design
is driven by consideration of the moments of
engagement between people and [objects], and the
ideas, emotions, and memories that these moments
create.”
- Wikipedia
(with liberal edits)

65. “Social Design”
Design of sites (and applications) that
encourage connection and interaction of users
and build community.

66. Responsive Web Design
Web design that anticipates and responds to
the users’ needs, delivering a quality
experience and content to a user appropriate
to their device and display size.

67. The Age of Responsive Design

68. Becoming Responsive
http://www.flickr.com/photos/gc_photography/4662878037/

69. Responsive Devices?
http://www.flickr.com/photos/ivyfield/4486938457/

70. Responsive Devices!

71. “Responsive web design isn’t something
that can be tacked on to the end of
an existing workflow. It requires a
different mindset, one that considers
the medium from the outset.”
- Jeremy Keith
“Responsive enhancement”
http://adactio.com/journal/1700/

72. Brain shift
http://www.flickr.com/photos/tza/3214197147/

73. Mobile first

74. “When you practice Mobile First,
you’re making a commitment to the
content. Everything that’s displayed
on the page deserves to be there.
Mobile First really means Content
First.”
- Ethan Marcotte,
“The Responsive Designer’s Workflow”

75. 3 Components of Responsive Design
1) Flexible grid
2) Flexible images
3) Media Queries
http://www.flickr.com/photos/boklm/486646798/

76. “Instead of thinking in terms of pixel
perfection, we should be thinking of
proportion perfection.”
- Jeremy Keith
“Responsive enhancement”
http://adactio.com/journal/1700/

77. Flexible grid
http://simplegrid.info

78. Flexible & Fluid
Size everything in ems or percentages
• Flexible: Ems for everything
• Fluid: Percentages for width, ems for height

79. Flexible Images: Foreground
img {max-width: 100%;}
http://www.flickr.com/photos/ivyfield/4486938457/

80. Flexible Images: Background
Use background-position to selectively
crop your backgrounds
http://www.flickr.com/photos/ivyfield/4486938457/

81. @media queries
@media queries allow the web developer to serve
different styles based on the device and it’s
orientation
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

82. The Goal
http://www.flickr.com/photos/bhenak/2664682330/

83. Avoid this
desktop stylesheet + media queries
= mobile site

84. =“Switchy” layout
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

85. Instead this
mobile stylesheet + media queries
= desktop site

86. = Truly responsive
http://ri.gov

87. What to do with this new perspective?

88. Challenge yourself
http://www.flickr.com/photos/danielsilliman/4489863368/

89. Don’t do what you’re used to doing
http://www.flickr.com/photos/jamiecampbell/446301597/

90. Leverage the current confluences

91. To produce
http://mailchimp.com

92. Or
http://twitter.com

93. Or
http://morphix.si

94. Or even
http://html5readiness.com

95. Or
http://www.anderssonwise.com/

96. Which is actually
http://www.anderssonwise.com/

97. Future
http://www.flickr.com/photos/steffe/351623859/

98. Widen perspective
http://instagr.am/p/EvW6C/

99. Moving forward
We need to build sites that can be accessed
by anyone, anywhere, and on any device.
1) http://www.flickr.com/photos/dcmetroblogger/4731961032/, 2) http://www.flickr.com/photos/dcmetroblogger/3861295403/,
3) http://www.flickr.com/photos/rosipaw/5308977361/, 4) http://www.flickr.com/photos/kiwanja/3169449999/

100. If you start thinking differently
http://www.flickr.com/photos/winni3/3363376446/

101. “Today, anything that’s fixed and
unresponsive isn’t web design, it’s
something else. If you don’t embrace the
inherent fluidity of the web, you’re not a
web designer, you’re something else.
Web design is responsive design, Responsive
Web Design is web design, done right.”
- Andy Clarke
“I don’t care about responsive design”
http://www.malarkey.co.uk/blog/about/i_dont_care_about_responsive_web_design/

102. Responsive = Responsible
http://www.flickr.com/photos/mazgrp/2050810720/

103. Why we’re here
http://www.flickr.com/photos/br1dotcom/4034902679/

104. And
http://www.flickr.com/photos/cristeenq/2360468936/

105. For
(crowd)
http://www.flickr.com/photos/laubarnes/5449810357/

106. Technical and Design
confluences

107. http://www.flickr.com/photos/dougbelshaw/4168593521/

108. “Design to where the Web will be, and
not where it is.”
Faruk Ates,
“Technology And The Web”

109. “Be the web designer and create the
interfaces that you want to see in the
world, for all of the world.”
Denise Jacobs
“The Age of Responsive Design”

110. The present and future
http://www.flickr.com/photos/cdoublew/2663137942/

111. The Age of Responsive Design
http://www.flickr.com/photos/slicktrix/2738150928/

112. Resources
http://www.flickr.com/photos/ed_gaillard/4453249094/

113. Links
http://www.delicious.com/denisejacobs/
responsivewebdesign
http://www.delicious.com/denisejacobs/
aeed

114. Books
http://commons.wikimedia.org/wiki/File:Library_of_Congress_Great_Hall_-_Jan_2006.jpg

115. The book on Responsive Web Design
Responsive Web
Design
by Ethan Marcotte

116. CSS3 and Media Queries
Hardboiled Web
Design
by Andy Clarke

117. Responsive Design and solid CSS
Handcrafted
CSS
by Dan Cederholm
with Ethan
Marcotte

118. Flexible Layouts
Flexible Web
Design
by Zoe Mickley
Gillenwater

119. CSS Troubleshooting
The CSS
Detective
Guide
by Denise Jacobs

120. Holistic Web Design
Interact with Web
Standards: A
Holistic Approach
to Web Design

121. How to find me
DeniseJacobs.com
denise@denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs
Photo by Aaron Walter