keys to responsive design

Presented by

Keys to Responsive Design

Presented by

I’m Tim.

Responsive Web Design

I wrote this book.AmazonBarnes & NobleSafari Books ...most places, really.

informIT.comWRIGHT2740

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 ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)

Aspect ratioHeight/WidthOrientationResolution (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 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

Recommended Tag

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 flyout

• The “Hide and Cry”

Credit: Brad Frost

NavigationThe “Do Nothing” Approach

NavigationThe “Stacked Navigation” method

NavigationFooter Anchor

Image Credit: Brad Frost

NavigationSelect Menu

Image Credit: Brad Frost

NavigationToggle

NavigationLeft Nav Flyout

NavigationThe “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

• Picturefill

• Bandwidth testing

Lazy man’s (or woman’s) images

img { max-width: 100%;}

srcset

just to make sure it’s a little confusing...

Picturefill<div data-picture data-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”;}

Responsive JavaScript// set the initial screen sizevar size = window.getComputedStyle(document.body,':before').getPropertyValue('content');

// check the breakpoint on resizewindow.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

Yes, do something

mobile

RESSIn the browser On the server

• Screen size

• Orientation

• Design changes (CSS)

• Is mobile?

• Structural changes (HTML)

Insert call button & use native datepicker

Async load jQuery UI & date picker base CSS

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

BooksResponsive Web Designby Ethan Marcotte

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/

Tools & Plugins• Picturefill

https://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

Folks on Twitter• Responsive Design, @rwd

• Mat Marquis, @wilto

• Chris Coyier, @chriscoyier

• Brad Frost, @brad_frost

• Luke Wroblewski, @lukew

A PodcastWeb:

freshtilledsoil.com/thedirt

Twitter:

@thedirtshow@freshtilledsoil

Slidesftsdesign.com/labs/rwd-08-26-2013/slides.pdf

Questions/CommentsE-mail: tim.wright@freshtilledsoil.comTwitter: @csskarma

keys to responsive design

Business

being responsive to responsive web design

content authoring for responsive design - madcap...

responsive website design | responsive design

responsive responsive design

responsive design

the keys to innovation- future friendly and responsive web...

soltech - responsive design and responsive content

responsive design - responsive ux strategy

responsive design fundamentals [read-only] - … design...

techniques for flexible responsive visualization design ·...

responsive elearning design and...

responsive designchochev.eu › html › 6....

keys to responsive design

responsive design - magento · responsive design . 16-fold...