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/