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


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


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

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


Breakpoints & Media Queries

Live example

http://www.ftsdev.com/roberts/



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

http://www.ftsdev.com/roberts/gate/

http://www.ftsdev.com/roberts/gate/


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

<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...


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


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

http://www.ftsdev.com/roberts/r-js.html

http://www.ftsdev.com/roberts/r-js.html



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.


RESSIn 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





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/

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



http://www.lukew.com/ff/entry.asp?1514

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 PodcastWeb:

freshtilledsoil.com/thedirt

Twitter:

@thedirtshow@freshtilledsoil


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


Questions/CommentsE-mail: [email protected]: @csskarma

mailto:[email protected]

mailto:[email protected]

keys to responsive design

Business