Responsive Web Design
& the state of the Web
porcupine.gr @yiannis_k
Slide 2
Slide 2 text
“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
Slide 3
Slide 3 text
“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
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Why?
Slide 16
Slide 16 text
Because this world is changing. Rapidly.
http://www.flickr.com/photos/nasamarshall/5404263213/
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/
Slide 27
Slide 27 text
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/
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
What are you gonna do about it? *
Slide 30
Slide 30 text
What are you gonna do about it? *
* Romeo & Juliet - Dire Straits
Slide 31
Slide 31 text
Create the best experience for your
audience no matter the device
Slide 32
Slide 32 text
WTF. RWD, FTW!
Slide 33
Slide 33 text
WTF. RWD, FTW!
What the Frak. Responsive Web Design, For The Win!
Slide 34
Slide 34 text
Hicksdesign
Slide 35
Slide 35 text
Andersson-Wise Architects
Slide 36
Slide 36 text
Forefathers Group
Slide 37
Slide 37 text
Food Sense
Slide 38
Slide 38 text
Food Sense
Slide 39
Slide 39 text
Food Sense
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
HTML
Slide 42
Slide 42 text
HTML
Quick ’n’ dirty
Slide 43
Slide 43 text
HTML
Quick ’n’ dirty
Slide 44
Slide 44 text
HTML
Slide 45
Slide 45 text
HTML
Let’s tide things up
Slide 46
Slide 46 text
HTML
Let’s tide things up
Slide 47
Slide 47 text
CSS
/*320px =iPhone portrait */
@media only screen and (max-width: 320px){
...
}
/*480px =iPhone landscape */
@media only screen and (min-width: 320px) and (max-width: 480px) {
...
}
/*768px =iPad portrait */
@media only screen and (min-width: 768px) {
...
}
/*1024px =iPad landscape */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
...
}
/*1280px =Medium screens */
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
}
The designer and the
front end developer
must be one person:
you
Slide 71
Slide 71 text
“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
Slide 72
Slide 72 text
“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
“You never know better
than your users what
content they want.”
- Bruce Lawson
Slide 73
Slide 73 text
“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
“You never know better
than your users what
content they want.”
- Bruce Lawson
Separate mobile websites?
Slide 74
Slide 74 text
Kiran Prasad
Director of Engineering Mobile at LinkedIn
“Responsive design might
work for uncomplicated,
one-off websites, he said,
but for applications or
networks, responsive
design is actually bad.”
Slide 75
Slide 75 text
Kiran Prasad
Director of Engineering Mobile at LinkedIn
“Responsive design might
work for uncomplicated,
one-off websites, he said,
but for applications or
networks, responsive
design is actually bad.”
Slide 76
Slide 76 text
Kiran Prasad
Director of Engineering Mobile at LinkedIn
“Responsive design might
work for uncomplicated,
one-off websites, he said,
but for applications or
networks, responsive
design is actually bad.”
When is-no-good?
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
Slide 82
Slide 82 text
http://www.flickr.com/photos/lenscrack/5165225746/
Slide 83
Slide 83 text
One place to focus and
update
http://www.flickr.com/photos/lenscrack/5165225746/
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No separate websites,
no duplicate content
Slide 86
Slide 86 text
http://www.flickr.com/photos/jfisher/3769846083/
Slide 87
Slide 87 text
Still fresh.
Things are a changin*
Could be a Bob Dylan’s song
http://www.flickr.com/photos/jfisher/3769846083/
Testing
Screenqueri.es
Responsive.is
Gallery
Media Queries
Slide 94
Slide 94 text
Grids & Boilerplates
Golden Grid System
Responsive Grid System
320 and Up
JavaScript & Multimedia
Adapt.js
Responsive Images
Adaptive Images
Fitvid.js
FitText
Slide 95
Slide 95 text
What’s next
Responsive Images and Web Standards at the Turning Point
Content Choreography
HTML5 adaptive images: end of round one
Articles
Tips and best practices to develop responsive websites
Preserving vertical rhythm with CSS and jQuery
Responsive CSS that scales
Build a responsive site in a week: designing responsively (part 1)
Build a responsive site in a week: typography and grids (part 2)