2. “Responsive Web design is the approach that
suggests that design and development should
respond to the user’s behavior and
environment based on screen size, platform
and orientation. “
- Kayla Knight on Smashing Magazine
3. “The practice consists of a mix of flexible grids
and layouts, images and an intelligent use of
CSS media queries.“
- Kayla Knight on Smashing Magazine
4. As the user switches from their laptop to
iPad, the website should automatically
switch to accommodate for resolution, image
size and scripting abilities. In other words, the
website should have the technology to
automatically respond to the user’s
preferences.
- Kayla Knight on Smashing Magazine
26. August 2011
72.2 million Americans
accessed social
networking sites or
blogs on their mobile
device
(+37% since 2010)
Luke Wroblewski
http://www.flickr.com/photos/pamhule/5709324762/
27. May 2012
79% of US smartphone
and tablet owners have
used their mobile
devices for shopping-
related activities.
Luke Wroblewski
http://www.flickr.com/photos/polvero/3422530445/
28. May 2011
iPad users spend 30% of their time on the
device in front of television.
Smartphone users spend 20% of their time on
the device in front of the television.
Luke Wroblewski
70. The designer and the
front end developer
must be one person:
you
71. “Good mobile user
experience requires a
different design than
what’s needed to
satisfy desktop users.
Two designs, two
sites, and cross-linking
to make it all work.”
- Jacob Nielsen
72. “Good mobile user
experience requires a
different design than
what’s needed to
satisfy desktop users.
Two designs, two
sites, and cross-linking
to make it all work.” “You never know better
than your users what
- Jacob Nielsen content they want.”
- Bruce Lawson
73. “Good mobile user Separate mobile websites?
experience requires a
different design than
what’s needed to
satisfy desktop users.
Two designs, two
sites, and cross-linking
to make it all work.” “You never know better
than your users what
- Jacob Nielsen content they want.”
- Bruce Lawson
74. “Responsive design might
work for uncomplicated,
one-off websites, he said,
but for applications or
networks, responsive
design is actually bad.”
Kiran Prasad
Director of Engineering Mobile at LinkedIn
75. “Responsive design might
work for uncomplicated,
one-off websites, he said,
but for applications or
networks, responsive
design is actually bad.”
Kiran Prasad
Director of Engineering Mobile at LinkedIn
76. “Responsive design might When is-no-good?
work for uncomplicated,
one-off websites, he said,
but for applications or
networks, responsive
design is actually bad.”
Kiran Prasad
Director of Engineering Mobile at LinkedIn
81. One step closer to Utopia*
* When the project is fairly simple and when
compared with a separate mobile website
http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
94. Grids & Boilerplates
Golden Grid System
Responsive Grid System
320 and Up
JavaScript & Multimedia
Adapt.js
Adaptive Images
Responsive Images
Fitvid.js
FitText
95. Articles
Tips and best practices to develop responsive websites
Responsive CSS that scales
Preserving vertical rhythm with CSS and jQuery
Build a responsive site in a week: designing responsively (part 1)
Build a responsive site in a week: typography and grids (part 2)
What’s next
Responsive Images and Web Standards at the Turning Point
HTML5 adaptive images: end of round one
Content Choreography
