Presented by

Keys to Responsive Design

Presented by

I’m Tim.

Responsive Web Design

Files

ftsdesign.com/labs/rwd/assets.zip

RWD = Responsive Web Design

Responsive Web Design

What we’ll be going over• Progressive Enhancement

• Flexible Layouts

• Media Queries

• Responsive Navigation

• Responsive Images & Video (Time permitting)

Responsive Web Design

01The BasicsGetting on the same page & responsive design basics

Responsive Web Design

Progressive Enhancement

Responsive Web Design

Progressive Enhancement

Responsive Web Design

Why & When of RWD• +1 for Progressive Enhancement

• Single codebase

• Scales to multi-sites

• Less staff

• Less server overhead

• Better SEO

Responsive Web Design

Why & When of RWD• What is “mobile” about this site?

• Do NOT do it just because it’s cool

Responsive Web Design

Responsive Sites

Responsive Web Design

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

• Seriously, don’t call it “mobile”

• Consider the strategy from the start

Responsive Web Design

Flexible Layouts

%

Responsive Web Design

Creating a Flexible Layout

Exercise

Responsive Web Design

The Media Query

Responsive Web Design

The Media Query

@media screen and ( max-width: 800px ) {

/* CSS for this breakpoint */

}

media type media feature

applied styles

Responsive Web Design

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

Responsive Web Design

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

Responsive Web Design

Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)

Responsive Web Design

Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)

Responsive Web Design

Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled

Responsive Web Design

Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)

Responsive Web Design

Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)

Responsive Web Design

Responsive Sites

Responsive Web Design

Setting Breakpoints

Responsive Web Design

Adding a Media Query

Exercise

Responsive Web Design

Making it work on everywhere

Responsive Web Design

Viewport tag contentwidth=device-width // define 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

Responsive Web Design

Recommended Tag

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

Responsive Web Design

Adding the Viewport Tag

Exercise

Responsive Web Design

Navigation• The “Do nothing” approach

• Stacked navigation method

• Footer anchor

• Select menu

• Toggle

• Left nav flyout (we’ll go through this later)

• The “Hide and Cry”

Responsive Web Design

NavigationThe “Do Nothing” Approach

Image Credit: Brad Frost

Responsive Web Design

NavigationThe “Stacked Navigation” method

Image Credit: Brad Frost

Responsive Web Design

NavigationFooter Anchor

Image Credit: Brad Frost

Responsive Web Design

NavigationSelect Menu

Image Credit: Brad Frost

Responsive Web Design

NavigationToggle

Image Credit: Brad Frost

Responsive Web Design

NavigationLeft Nav Flyout

Image Credit: Brad Frost

Responsive Web Design

NavigationThe “Hide and Cry”

Image Credit: Brad Frost

Responsive Web Design

Navigation

Exercise

Responsive Web Design

Browser Support

caniuse.com

Responsive Web Design

03Dealing with mediaImages and Video

Responsive Web Design

Media (Images & Video)

Image Credit: TeamTreehouse.com

Responsive Web Design

Responsive Images• Max-width method

• Picturefill method

• Dealing with Retina displays

• Using SVG and Icon fonts

Responsive Web Design

Install Picturefill

Exercise

Responsive Web Design

Responsive Video

• FitVid, jQuery plugin

• Creating intrinsic ratios in CSS

Responsive Web Design

FitVid

https://vimeo.com/28523422

Responsive Web Design

Intrinsic Ratios

.video { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; margin-bottom: 20px;}

.video iframe,

.video object,

.video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Responsive Web Design

Responsive Video

Exercise

Responsive Web Design

Responsive Sites

Responsive Web Design

04ResourcesContinuing your education

Responsive Web Design

BooksResponsive Web Designby Ethan Marcotte

Responsive Web Design

Articles• Responsive Web Design

http://www.alistapart.com/articles/responsive-web-design/

• Guidelines for Responsive Designhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

• Design Process in a Responsive Agehttp://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/

• Adaptive vs. Responsive Designhttp://uxdesign.smashingmagazine.com/2012/11/08/ux-design-qa-with-christian-holst/

• Responsive Design is more than breakpointshttp://inspectelement.com/articles/responsive-web-design-is-so-more-than-just-a-few-breakpoints/

Responsive Web Design

Tools & Plugins

• Picturefillhttps://github.com/scottjehl/picturefill

• FitVidshttp://fitvidsjs.com/

• RespondJShttps://github.com/scottjehl/Respond

• Testing a Responsive Sitehttp://mattkersley.com/responsive/

• Multi-device layout patternshttp://www.lukew.com/ff/entry.asp?1514

Responsive Web Design

Folks on Twitter• Responsive Design, @rwd

• Mat Marquis, @wilto

• Chris Coyier, @chriscoyier

• Brad Frost, @brad_frost

• Luke Wroblewski, @lukew

Responsive Web Design

What we went over• What?

• When?

• Why?

• How?

Responsive Web Design

Slidesftsdesign.com/labs/rwd/slides.pdf

Responsive Web Design

05Questions & Comments?...and maybe answers

Responsive Web Design

Contact InformationE-mail: tim.wright@freshtilledsoil.comTwitter: @csskarmaFresh Tilled Labs: freshtilledsoil.com/habitat/labs