Slide 1
Slide 1 text
@andyhume
Multipack Presents •
12th November 2011
DESIGN
RESPONSIVE
Slide 2
Slide 2 text
@andyhume
Multipack Presents •
12th November 2011
DESIGN
RESPONSIVE
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
From now on, instead of talking about
making a site accessible, I'm going to
talk about keeping it accessible.
“
Jeremy Keith
Slide 5
Slide 5 text
TRY NOT TO BREAK IT?
THE WEB WORKS
Slide 6
Slide 6 text
RESPONSIVENESS?
WHAT BROKE
.container {
width: 960px;
}
Slide 7
Slide 7 text
SEMANTIC HTML
STEPS[0]
Slide 8
Slide 8 text
OOCSS
STEPS[1]
Loosely couple content styling from layout styling
Slide 9
Slide 9 text
CORE.CSS
STEPS[4]
.product .title {
font-size: 1em;
}
@media screen and (min-width: 60em) {
.product .title {
font-size: 1.4em;
}
}
Keep modules together
Slide 10
Slide 10 text
SELECTOR QUERIES?
STEPS[4]
Adapt content based on container width
https://github.com/ahume/selector-queries
Content here
Slide 11
Slide 11 text
SELECTOR QUERIES?
STEPS[4]
.product img {
max-width: 100%;
}
.product.wide img { // greater than 400px
float: left;
margin-right: 1em;
max-width: auto;
}
Adapt content based on container width
https://github.com/ahume/selector-queries
Slide 12
Slide 12 text
NAVIGATION
STEPS[2]
Slide 13
Slide 13 text
NAVIGATION
STEPS[2]
Slide 14
Slide 14 text
ADDING LAYOUT
STEPS[3]
Loosely couple content styling from layout styling
Slide 15
Slide 15 text
IE <9
STEPS[5]
Send full ‘desktop’ layout
Slide 16
Slide 16 text
IE <9
STEPS[5]
Send full ‘desktop’ layout - but not to mobile
Slide 17
Slide 17 text
IE <9
STEPS[5]
Send full ‘desktop’ layout - or not
Slide 18
Slide 18 text
IE <9
STEPS[5]
Polyfill media queries
https://github.com/scottjehl/Respond
Slide 19
Slide 19 text
VIEWPORT
STEPS[6]
Set layout viewport width to the device width
Slide 20
Slide 20 text
VIEWPORT
STEPS[6]
W3C Syntax: coming soon
http://dev.w3.org/csswg/css-device-adapt/
@viewport {
width: device-width;
zoom: 1.0;
}
Slide 21
Slide 21 text
IMAGES
STEPS[7]
Shrinking
img {
max-width: 100%;
}
Slide 22
Slide 22 text
RESPONSIVE IMAGES
STEPS[7]
Small image by default
Don’t download both
Slide 23
Slide 23 text
RESPONSIVE IMAGES
STEPS[7]
Client-side solutions
https://github.com/filamentgroup/Responsive-Images
https://github.com/ahume/Responsive-Images
https://github.com/allmarkedup/responsive-images-alt
Slide 24
Slide 24 text
RESPONSIVE IMAGES
STEPS[7]
Here and now? src.sencha.io
Slide 25
Slide 25 text
RESPONSIVE IMAGES
STEPS[7]
Here and now? Image replacement
.logo {
background-image: url(logo-large.png);
}
.logo img {
position: absolute; left: -9999px;
}
Slide 26
Slide 26 text
SVG
STEPS[8]
Same approaches to support as responsive images
Slide 27
Slide 27 text
ENHANCING CONTENT
STEPS[9]
What’s core content?
Slide 28
Slide 28 text
ENHANCING CONTENT
STEPS[9]
Slide 29
Slide 29 text
ENHANCING CONTENT
STEPS[9]
Slide 30
Slide 30 text
ENHANCING CONTENT
STEPS[9]
if ($(document).width() > 640) {
! $.get('path/to/html', function(data) {
! ! $('[role="complementary"]').append(data);
! });
}
What’s core content?
Slide 31
Slide 31 text
WHAT ELSE?
Bandwidth
Touch
Individual user behaviour
Slide 32
Slide 32 text
THE END
@andyhume
Multipack Presents •
12th November 2011