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.
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:
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
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.
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/
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/
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/
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/
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/