Keys to Responsive Design

Presented by
Keys to Responsive Design

Responsive Web Design
I wrote this book.
Amazon
Barnes & Noble
Safari Books
...most places, really.
informIT.com
WRIGHT2740

What we’ll be going over
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)

01Best PracticesThey’re WAY more exciting than they sound!

Progressive Enhancement

The BIG secret!

Being good at
responsive design has
little to do with CSS

Rules of Responsive Design
• Don’t call it “mobile”
• Treat it as 1 site
• Don’t target devices
• Don’t remove content for small screens
• Think in terms of features (touch vs. no touch)
• Always remember bandwidth
• Consider the strategy from the start
• Recognize when it isn’t the answer.

02Media Queries & breakpointsHoly sh*t, stop using iPhone dimensions...
• Best Practices
• Design Patterns

The Media Query
@media screen and ( max-width: 800px ) {
/* CSS for this breakpoint */
}
media type media feature
normal CSS

The Media “Type”
• all
• screen
• print
• braille
• handheld
• projections
• tv
• aural (speech and sound synthesis)

The Media “Feature”
• min/max-width
• min/max-height
• orientation
• aspect-ratio (browser window)
• device-aspect-ratio (4/3,16/9)
• color-index
• resolution & min-resolution (dpi * dpcm)
• device pixel ratio

Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled (-moz-)

Aspect ratio
Height/Width
Orientation
Resolution (dpi)
Touch enabled

Setting Breakpoints

Responsive Design
doesn’t care that the
iPhone is 320 pixels
wide...
...and neither should you

Making it work on everywhere

Viewport tag content
width=device-width // deﬁne the viewport size
initial-scale=1.0 // starting zoom level
maximum-scale=1.0 // control zooming (0-10)
user-scalable=0 // prevent zooming / input:focus scrolling

Recommended Tag
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

Breakpoints & Media Queries
Live example

Browser Support
caniuse.com

03Design patternsOther people do things this way...
• Best Practices
• Design Patterns

Navigation
• The “Do nothing” approach
• Stacked navigation method
• Footer anchor
• Select menu
• Toggle
• Left navigation ﬂyout
• The “Hide and Cry”
Credit: Brad Frost

Navigation
The “Do Nothing” Approach

Navigation
The “Stacked Navigation” method

Navigation
Footer Anchor
Image Credit: Brad Frost

Navigation
Select Menu
Image Credit: Brad Frost

Navigation
Toggle

Navigation
Left Nav Flyout

Navigation
The “Hide and Cry”

Navigation
Live example

04Responsive ImagesLoading a image for a small screen? Eh.
• Best Practices
• Design Patterns

Responsive Images
• max-width: 100%
• srcset
• Pictureﬁll
• Bandwidth testing

Lazy man’s (or woman’s) images
img {
max-width: 100%;
}

srcset
<img src=”low-res.jpg” srcset=”high-res.jpg 2x”>
<img src=”low-res.jpg”
srcset=”narrow.jpg 640w 1x,
high-res-narrow.jpg 640w 2x,
large.jpg 1x,
high-res-large.jpg 2x”>
just to make sure it’s a little confusing...

Pictureﬁll
<div data-picture data-alt=”A Fat Brown Dog”>
<div data-src=”small.jpg” data-media=”(max-width:600px)”></div>
<div data-src=”hd.jpg” data-media=”(min-device-pixel-ratio: 2.0)”></div>
<noscript>
<img src=”fat-dog.jpg” alt=”A Fat Brown Dog”>
</noscript>
</div>

Bandwidth Testing
navigator.mozConnection.bandwidth
if(Manage.connection === “good”) {
// you have ample bandwidth
}
https://github.com/timwright12/js-asset-management

05Responsive JavaScriptGulp...
• Best Practices
• Design Patterns

Responsive JavaScript
body:before {
content: “widescreen”;
position: absolute;
top: -9999px;
left: -9999px;
}
@media screen and (max-width:600px) {
content: “smallscreen”;
}

// set the initial screen size
var size = window.getComputedStyle(document.body,':before').getPropertyValue('content');
// check the breakpoint on resize
window.addEventListener(“resize”, function(){
size = window.getComputedStyle(document.body,':before').getPropertyValue('content');
if (size.indexOf(“smallscreen”) != -1) {
// do small screen JS
} else {
// do large screen JS
}
}, false);

Basic example

Over the top example

06Responsive Design & the ServerLean on me... when you’re not strooooong... and I’ll be your friend...
• Best Practices
• Design Patterns

RESS
?
Yes, do
something
mobile
No.

RESS
In the browser On the server
• Screen size
• Orientation
• Design changes (CSS)
• Is mobile?
• Structural changes (HTML)

RESS
?
Insert call button
& use native
datepicker
Async load jQuery UI &
date picker base CSS
YES!
NO!

RESS
What is the window size? Is touch available?
• Answered with media
queries
• No - Do nothing
• Yes - Async load touch
interactions (swiping)

What we went over
• Progressive Enhancement
• Best Practices
• Design Patterns

Books
by Ethan Marcotte

Articles
• Responsive Web Design
http://www.alistapart.com/articles/responsive-web-design/
• Guidelines for Responsive Design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• Design Process in a Responsive Age
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
• Adaptive vs. Responsive Design
http://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/
• Responsive Design is more than breakpoints
http://inspectelement.com/articles/responsive-web-design-is-so-more-than-just-a-few-
breakpoints/

Tools & Plugins
• Picturefill
https://github.com/scottjehl/picturefill
• FitVids
http://fitvidsjs.com/
• RespondJS
https://github.com/scottjehl/Respond
• Testing a Responsive Site
http://mattkersley.com/responsive/
• Multi-device layout patterns
http://www.lukew.com/ff/entry.asp?1514

Folks on Twitter
• Responsive Design, @rwd
• Mat Marquis, @wilto
• Chris Coyier, @chriscoyier
• Brad Frost, @brad_frost
• Luke Wroblewski, @lukew

A Podcast
Web:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow
@freshtilledsoil

Slides
ftsdesign.com/labs/rwd-08-26-2013/slides.pdf

Questions/Comments
E-mail: tim.wright@freshtilledsoil.com
Twitter: @csskarma

Keys to Responsive Design

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Keys to Responsive Design

Similar a Keys to Responsive Design (20)

Más de Intelligent_ly

Más de Intelligent_ly (20)

Último

Último (20)

Keys to Responsive Design