Slide 1
Slide 1 text
RESPONSIVE
Matt Menzer @menzer
DESIGN
WEB
Slide 2
Slide 2 text
ABOUT ME
Sr. Web Developer
at Deloitte Digital
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
optimize ALL the devices?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
http://www. ickr.com/photos/adactio/5818096043
Slide 8
Slide 8 text
This is our way forward. Rather than tailoring
disconnected designs to each of an ever-
increasing number of web devices, we can treat
them as facets of the same experience... In short,
we need to practice responsive web design.
ETHAN MARCOTTE
Slide 9
Slide 9 text
3. Media Queries
2. Fluid Media
1. Fluid Grids
Slide 10
Slide 10 text
FLUID GRID
width: 960px;
Slide 11
Slide 11 text
FLUID GRID
width: 960px;
width: 96em;
Slide 12
Slide 12 text
FLUID GRID
width: 960px;
width: 96em;
width: 100%;
Slide 13
Slide 13 text
TARGET / CONTEXT = RESULT
Don’t round off the decimals
Slide 14
Slide 14 text
FLUID MEDIA
.image img {
max-width: 100%;
}
Slide 15
Slide 15 text
FLUID MEDIA
Embedded
Slide 16
Slide 16 text
.embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.embed object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
WORKS FOR ALL INTRINSIC RATIO!
Slide 17
Slide 17 text
MEDIA QUERIES
@media only screen and (min-width:
768px) {
/* styles */
}
Slide 18
Slide 18 text
WHAT ABOUT IE?
http://github.com/scottjehl/respond
Respond.js
Slide 19
Slide 19 text
WHAT ABOUT IE?
Bypass Media Queries
Slide 20
Slide 20 text
MOBILE FIRST
.row {
overflow: hidden;
}
Mobile = Default = No media query
Slide 21
Slide 21 text
MOBILE FIRST
@media only screen and (min-width: 50em) {
.a-row {
overflow: hidden;
}
.a-1of2 {
width: 50%
}
.a-1of3 {
width: 33.3333%
}
}
Breakpoints != Devices
Slide 22
Slide 22 text
MOBILE FIRST
@media only screen and (min-width: 75em) {
.a-row {
overflow: visible;
}
.b-row {
overflow: hidden;
}
.b-1of4 {
width: 25%
}
}
Breakpoints != Devices
Slide 23
Slide 23 text
BUT WHAT ABOUT
THE IMAGES?
Slide 24
Slide 24 text
RESPONSIVE IMAGES
Hello, JavaScript!
1. Mobile default
2. Don’t download unnecessary extras
3. Robust query parameters
4. Individual asset control
Slide 25
Slide 25 text
RESPONSIVE IMAGES
Current options
1. Adaptive Images
2. Responsive Images
3.
4. Picture ll
Slide 26
Slide 26 text
RESPONSIVE IMAGES
Adaptive Images
http://adaptive-images.com
Slide 27
Slide 27 text
RESPONSIVE IMAGES
Responsive Images (Filament Group)
http://github.com/scottjehl/responsive-images
Slide 28
Slide 28 text
RESPONSIVE IMAGES
Slide 29
Slide 29 text
RESPONSIVE IMAGES
Picture ll
http://github.com/scottjehl/picturefill
Slide 30
Slide 30 text
RESPONSIVE IMAGES
element
http://www.alistapart.com/articles/
responsive-images-how-they-almost-
worked-and-what-we-need/
Slide 31
Slide 31 text
Slide 32
Slide 32 text
RESPONSIVE IMAGES
![]()
Slide 33
Slide 33 text
RESPONSIVE IMAGES
Not quite...
1. Mobile default
2. Don’t download unnecessary extras
3. Robust query parameters (meh?)
4. Individual asset control
Slide 34
Slide 34 text
RESPONSIVE IMAGES
User Choice
< your solution here >
Slide 35
Slide 35 text
Um. That sounds like a *lot* of work.
Slide 36
Slide 36 text
YES.
Slide 37
Slide 37 text
Google recommends webmasters follow the
industry best practice of using responsive web
design, namely serving the same HTML for all
devices and using only CSS media queries to
decide the rendering on each device.
GOOGLE https://developers.google.com/webmasters/
smartphone-sites/
Slide 38
Slide 38 text
We can design for an optimal viewing experience, but
embed standards-based technologies into our designs
to make them not only more exible,
but more adaptive to the
media that renders them.
ETHAN MARCOTTE
Slide 39
Slide 39 text
THANK YOU
@menzer