Embed Size (px)
Citation preview
Responsive Web Design
& the state of the Web
porcupine.gr @yiannis_k
“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
“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
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
Why?
Because this world is changing. Rapidly.
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/thomashawk/76170826/
http://www.flickr.com/photos/thomashawk/76170826/
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/emeryjl/520109861/
http://www.flickr.com/photos/emeryjl/520109861/
http://www.flickr.com/photos/jonathanharford/5217423633/
http://www.flickr.com/photos/jonathanharford/5217423633/
(Not so) boring numbers
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/
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/
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
What are you gonna do about it? *
What are you gonna do about it? *
* Romeo & Juliet - Dire Straits
Create the best experience for your
audience no matter the device
WTF. RWD, FTW!
WTF. RWD, FTW!
What the Frak. Responsive Web Design, For The Win!
HTML
HTML
Quick ’n’ dirty
HTML
<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />
Quick ’n’ dirty
HTML
HTML
Let’s tide things up
HTML
<link rel="stylesheet" type="text/css" href="media.css" />
<link rel="stylesheet" type="text/css" href="global.css" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Let’s tide things up
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) {
}
Flexible Multimedia
Flexible Multimedia
img, object {max-width: 100%;
}
Flexible Multimedia
img, object {max-width: 100%;
}
FitVid.js
Flexible Grid
Browser Support
Browser Support
(Far from) Browser Support
7 8
(Far from) Browser Support
7 8
(Far from) Browser Support
Kill these agents
Approaches & Techniques
Responsive
vs.
Adaptive
vs.
Mobile
vs.
whatevah
Mobile first!
The art of
hiding
The designer and the
front end developer
must be one person:
you
“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
“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
“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?
Kiran PrasadDirector 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.”
Kiran PrasadDirector 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.”
Kiran PrasadDirector 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?
Evaluation
All you need
is your good old
CSS
http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
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
http://www.flickr.com/photos/lenscrack/5165225746/
One place to focus and
update
http://www.flickr.com/photos/lenscrack/5165225746/
No separate websites,
no duplicate content
http://www.flickr.com/photos/jfisher/3769846083/
Still fresh.
Things are a changin*
Could be a Bob Dylan’s song
http://www.flickr.com/photos/jfisher/3769846083/
http://www.flickr.com/photos/lwr/5044331262/
Think twice!
http://www.flickr.com/photos/lwr/5044331262/
Tools & Resources
Testing
TestingScreenqueri.es
Responsive.is
GalleryMedia Queries
Grids & BoilerplatesGolden Grid System
Responsive Grid System
320 and Up
JavaScript & MultimediaAdapt.js
Responsive Images
Adaptive Images
Fitvid.js
FitText
What’s nextResponsive Images and Web Standards at the Turning Point
Content Choreography
HTML5 adaptive images: end of round one
ArticlesTips 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)
Wait, there’s more!
Thank you!
Wait, there’s more!
