Slide 1
Slide 1 text
Responsive Web Design
Aaron Weyenberg
@aweyenberg
(And embracing the unknown)
Wednesday, November 9, 11
Slide 2
Slide 2 text
Wednesday, November 9, 11
Slide 3
Slide 3 text
Wednesday, November 9, 11
Slide 4
Slide 4 text
Wednesday, November 9, 11
Slide 5
Slide 5 text
Wednesday, November 9, 11
Slide 6
Slide 6 text
Wednesday, November 9, 11
Slide 7
Slide 7 text
Now if you’re viewing the site on a
telephone, you will never in a trillion
years experience the site. You’ll think
you have experienced it. But you’ll be
cheated.
It’s such a sadness that you think
you’ve viewed a site on your...
fffucking telephone. Get real.
Wednesday, November 9, 11
Slide 8
Slide 8 text
Photo: Robert Scoble
How great is this, really?
Wednesday, November 9, 11
Slide 9
Slide 9 text
2000’s
Image: Movie Title Stills Collection
Wednesday, November 9, 11
Slide 10
Slide 10 text
Image: Movie Title Stills Collection
Wednesday, November 9, 11
Slide 11
Slide 11 text
2007
The Great Disruption
iPhone
2008
Android
2010
WP 7 iPad
Wednesday, November 9, 11
Slide 12
Slide 12 text
Motorola Xoom
Samsung Galaxy Tab
The Great Disruption
Sony Tablet S
2011
2010
Wednesday, November 9, 11
Slide 13
Slide 13 text
2011 (Cont...)
The Great Disruption
HP TouchPad (RIP)
Blackberry Playbook Toshiba Thrive
Wednesday, November 9, 11
Slide 14
Slide 14 text
2011 (Cont...)
The Great Disruption
Amazon Kindle Fire ? ?
2012
Wednesday, November 9, 11
Slide 15
Slide 15 text
Wednesday, November 9, 11
Slide 16
Slide 16 text
Photo: blmiers2
Mobile
Tablets
Netbooks
Laptops
Desktops
Wednesday, November 9, 11
Slide 17
Slide 17 text
Wednesday, November 9, 11
Slide 18
Slide 18 text
We should ... design for this flexibility.
But first, we must ‘accept the ebb and
flow of things’.”
“
Wednesday, November 9, 11
Slide 19
Slide 19 text
Using percentages to specify page
layout in CSS automatically creates
adaptive pages.”
“
Wednesday, November 9, 11
Slide 20
Slide 20 text
@media print {
...
}
CSS2: Media Types
External link
Embedded
Wednesday, November 9, 11
Slide 21
Slide 21 text
@media only screen and (min-width:500px) {
...
}
CSS3: Media Conditions
External link
Embedded
Wednesday, November 9, 11
Slide 22
Slide 22 text
Wednesday, November 9, 11
Slide 23
Slide 23 text
m.radwebsite.com
Wednesday, November 9, 11
Slide 24
Slide 24 text
1 URL, n destinations
Wednesday, November 9, 11
Slide 25
Slide 25 text
...there is only The Web, which we view in different ways. There
is also no Desktop Web. Or Tablet Web. Thank you.”
Stephen Hay via Twitter
“There is no mobile web...
Wednesday, November 9, 11
Slide 26
Slide 26 text
Launched Sept 12, 2011
bostonglobe.com
Wednesday, November 9, 11
Slide 27
Slide 27 text
From now on...
Wednesday, November 9, 11
Slide 28
Slide 28 text
The RWD Stack
Adaptive layouts & grids
Flexible images & content
CSS3 Media Queries
Wednesday, November 9, 11
Slide 29
Slide 29 text
Adaptive layouts
.column1 {
float: left;
width: 75%;
}
.column2 {
float: left;
width: 25%;
}
Wednesday, November 9, 11
Slide 30
Slide 30 text
Adaptable layouts
.column1 {
float: left;
width: 75%;
}
.column2 {
float: left;
width: 25%;
}
Wednesday, November 9, 11
Slide 31
Slide 31 text
Adaptable layouts
.column1 {
float: none;
width: auto;
}
.column2 {
float: none;
width: auto;
}
Wednesday, November 9, 11
Slide 32
Slide 32 text
Flexible images & content
img { max-width: 100%; }
Wednesday, November 9, 11
Slide 33
Slide 33 text
Flexible images & content
img { max-width: 100%; }
Wednesday, November 9, 11
Slide 34
Slide 34 text
CSS3 Media Queries
Wednesday, November 9, 11
Slide 35
Slide 35 text
CSS3 Media Queries
Desktop down
Wednesday, November 9, 11
Slide 36
Slide 36 text
CSS3 Media Queries
Mobile up
Wednesday, November 9, 11
Slide 37
Slide 37 text
Desktop down MQ’s
@media only screen and (max-width: 992px) {
// up to 992px
}
// Resets
// Global styles
// Styles for all widths
@media only screen and (max-width: 1382px) {
// up to 1382px
}
Wednesday, November 9, 11
Slide 38
Slide 38 text
@media only screen and (max-width: 600px) {
// up to 600px
}
@media only screen and (max-width: 768px) {
// up to 768px
}
@media only screen and (max-width: 480px) {
// up to 480px
}
Wednesday, November 9, 11
Slide 39
Slide 39 text
Mobile up MQ’s
@media only screen and (min-width: 600px) {
// 600px and up
}
// Resets
// Global styles
// All styles for widths < 480px
@media only screen and (min-width: 480px) {
// 480px and up
}
No query IS your first query
Wednesday, November 9, 11
Slide 40
Slide 40 text
@media only screen and (min-width: 992px) {
// 992px and up
}
@media only screen and (min-width: 768px) {
// 768px and up
}
@media only screen and (min-width: 1382px) {
// 1382px and up
}
Wednesday, November 9, 11
Slide 41
Slide 41 text
Ranged MQ’s
@media only screen and (min-width: 480px)
and (max-width: 600px) {
// between 480px to 600px
}
for discrete styles
0 480px 600px 1382px
Wednesday, November 9, 11
Slide 42
Slide 42 text
Wednesday, November 9, 11
Slide 43
Slide 43 text
RWD’s Challenges
Images
Slide 44
Slide 44 text
RWD’s Challenges
Images Tables Ads Process
Wednesday, November 9, 11
Slide 45
Slide 45 text
RWD’s Challenges
Images Tables Ads Process
Wednesday, November 9, 11
Slide 46
Slide 46 text
RWD’s Challenges
Images Tables Ads Process
Wednesday, November 9, 11
Slide 47
Slide 47 text
RWD’s Challenges
Images Tables Ads Process
Wednesday, November 9, 11
Slide 48
Slide 48 text
RWD’s Challenges
Images Tables Ads Process
Wednesday, November 9, 11
Slide 49
Slide 49 text
Responsive Images
This is hard
Wednesday, November 9, 11
Slide 50
Slide 50 text
6HUYHUVLGHUHVSRQVLYH
LPDJHV
KWWSVJLWKXE
FRPFDUVRQPFGRQDOG6HUYHU6LGH5HVSRQVLYH,PDJH([DPSOHUHDGPH
QD
Slide 51
Slide 51 text
1. Get screen size with Javascript
2. Loop through tags
3. Write in appropriate 
Wednesday, November 9, 11
Slide 52
Slide 52 text
Slide 53
Slide 53 text
Responsive Tables
(Chris Coyier)
Wednesday, November 9, 11
Slide 54
Slide 54 text
Wednesday, November 9, 11
Slide 55
Slide 55 text
...
18
Center
24
33
...
Data attributes match
column headers
Wednesday, November 9, 11
Slide 56
Slide 56 text
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
left: -9999px;
}
Stack all table elements
Hide the table headers
Wednesday, November 9, 11
Slide 57
Slide 57 text
td {
position: relative;
padding-left: 50%;
}
td:before {
position: absolute; width: 50%;
content: attr(data-label);
}
Make space for data-labels
Position and insert data-labels
Wednesday, November 9, 11
Slide 58
Slide 58 text
0-760px
> 760px
Wednesday, November 9, 11
Slide 59
Slide 59 text
Ads and Responsive Design
Don’t mix (yet)
Wednesday, November 9, 11
Slide 60
Slide 60 text
Wednesday, November 9, 11
Slide 61
Slide 61 text
Wednesday, November 9, 11
Slide 62
Slide 62 text
Wednesday, November 9, 11
Slide 63
Slide 63 text
display: none;
$().appendTo()
Wednesday, November 9, 11
Slide 64
Slide 64 text
Wednesday, November 9, 11
Slide 65
Slide 65 text
Wednesday, November 9, 11
Slide 66
Slide 66 text
display: none;
Wednesday, November 9, 11
Slide 67
Slide 67 text
Is there a future for
responsive ads?
Yep. If we create one.
(...like an independently
responsive ad API.)
Wednesday, November 9, 11
Slide 68
Slide 68 text
The Responsive Workflow
Nimble and iterative
Wednesday, November 9, 11
Slide 69
Slide 69 text
What we’ve been doing
Wednesday, November 9, 11
Slide 70
Slide 70 text
What we’ll need to do
Forget pixel precision
Move to the browser early
Rapid prototyping!
Developers + Designers
Wednesday, November 9, 11
Slide 71
Slide 71 text
We’re our own best resource
Photo: lightmanx5
Wednesday, November 9, 11
Slide 72
Slide 72 text
Three things...
Wednesday, November 9, 11
Slide 73
Slide 73 text
Structured content
Wednesday, November 9, 11
Slide 74
Slide 74 text
Mobile first
Structured content
Wednesday, November 9, 11
Slide 75
Slide 75 text
Mobile first
Progressive
Enhancement
Structured content
Wednesday, November 9, 11
Slide 76
Slide 76 text
Mobile first
Progressive
Enhancement
Structured content
RWD
Wednesday, November 9, 11
Slide 77
Slide 77 text
Photo: Fausto Fernos
Wednesday, November 9, 11
Slide 78
Slide 78 text
Photo: NASA, ESA, M. Livo and the Hubble 20th Anniversary Team (STScl)
Wednesday, November 9, 11
Slide 79
Slide 79 text
Taking the RWD path means
Being at peace with the
unknown
Wednesday, November 9, 11
Slide 80
Slide 80 text
Thanks!
Aaron Weyenberg
@aweyenberg
Wednesday, November 9, 11