Download - Keys to Responsive Design
![Page 1: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/1.jpg)
Presented by
Keys to Responsive Design
![Page 2: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/2.jpg)
Presented by
I’m Tim.
![Page 3: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/3.jpg)
Responsive Web Design
I wrote this book.AmazonBarnes & NobleSafari Books ...most places, really.
informIT.comWRIGHT2740
![Page 4: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/4.jpg)
Responsive Web Design
What we’ll be going over• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 5: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/5.jpg)
Responsive Web Design
01Best PracticesThey’re WAY more exciting than they sound!
![Page 6: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/6.jpg)
Responsive Web Design
Progressive Enhancement
![Page 7: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/7.jpg)
Responsive Web Design
Progressive Enhancement
![Page 8: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/8.jpg)
Responsive Web Design
The BIG secret!
![Page 9: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/9.jpg)
Being good at responsive design has little to do with CSS
![Page 10: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/10.jpg)
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 (touch vs. no touch)• Always remember bandwidth• Consider the strategy from the start• Recognize when it isn’t the answer.
![Page 11: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/11.jpg)
Responsive Web Design
02Media Queries & breakpointsHoly sh*t, stop using iPhone dimensions...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 12: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/12.jpg)
Responsive Web Design
The Media Query
@media screen and ( max-width: 800px ) {
/* CSS for this breakpoint */
}
media type media feature
normal CSS
![Page 13: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/13.jpg)
Responsive Web Design
The Media “Type”• all• screen• print• braille• handheld• projections• tv• aural (speech and sound synthesis)
![Page 14: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/14.jpg)
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
![Page 15: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/15.jpg)
Responsive Web Design
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
![Page 16: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/16.jpg)
Responsive Web Design
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
![Page 17: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/17.jpg)
Responsive Web Design
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled
![Page 18: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/18.jpg)
Responsive Web Design
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
![Page 19: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/19.jpg)
Responsive Web Design
Aspect ratioHeight/WidthOrientationResolution (dpi)Touch enabled (-moz-)
![Page 20: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/20.jpg)
Responsive Web Design
Setting Breakpoints
![Page 21: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/21.jpg)
Responsive Design doesn’t care that the iPhone is 320 pixels wide......and neither should you
![Page 22: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/22.jpg)
Responsive Web Design
Making it work on everywhere
![Page 23: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/23.jpg)
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
![Page 24: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/24.jpg)
Responsive Web Design
Recommended Tag
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
![Page 25: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/25.jpg)
Responsive Web Design
Breakpoints & Media Queries
Live example
![Page 26: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/26.jpg)
Responsive Web Design
Browser Support
caniuse.com
![Page 27: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/27.jpg)
Responsive Web Design
03Design patternsOther people do things this way...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 28: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/28.jpg)
Responsive Web Design
Navigation• The “Do nothing” approach
• Stacked navigation method
• Footer anchor
• Select menu
• Toggle
• Left navigation flyout
• The “Hide and Cry”
Credit: Brad Frost
![Page 29: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/29.jpg)
Responsive Web Design
NavigationThe “Do Nothing” Approach
![Page 30: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/30.jpg)
Responsive Web Design
NavigationThe “Stacked Navigation” method
![Page 31: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/31.jpg)
Responsive Web Design
NavigationFooter Anchor
Image Credit: Brad Frost
![Page 32: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/32.jpg)
Responsive Web Design
NavigationSelect Menu
Image Credit: Brad Frost
![Page 33: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/33.jpg)
Responsive Web Design
NavigationToggle
![Page 34: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/34.jpg)
Responsive Web Design
NavigationLeft Nav Flyout
![Page 35: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/35.jpg)
Responsive Web Design
NavigationThe “Hide and Cry”
![Page 36: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/36.jpg)
Responsive Web Design
Navigation
Live example
![Page 37: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/37.jpg)
Responsive Web Design
04Responsive ImagesLoading a image for a small screen? Eh.
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 38: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/38.jpg)
Responsive Web Design
Responsive Images• max-width: 100%
• srcset
• Picturefill
• Bandwidth testing
![Page 39: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/39.jpg)
Responsive Web Design
Lazy man’s (or woman’s) images
img { max-width: 100%;}
![Page 40: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/40.jpg)
Responsive Web Design
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...
![Page 41: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/41.jpg)
Responsive Web Design
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>
![Page 42: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/42.jpg)
Responsive Web Design
Bandwidth Testing
navigator.mozConnection.bandwidth
if(Manage.connection === “good”) {
// you have ample bandwidth
}
https://github.com/timwright12/js-asset-management
![Page 43: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/43.jpg)
Responsive Web Design
05Responsive JavaScriptGulp...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 44: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/44.jpg)
Responsive Web Design
Responsive JavaScript
body:before { content: “widescreen”; position: absolute; top: -9999px; left: -9999px;}
@media screen and (max-width:600px) { content: “smallscreen”;}
![Page 45: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/45.jpg)
Responsive Web Design
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);
![Page 46: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/46.jpg)
Responsive Web Design
Responsive JavaScript
Basic example
![Page 47: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/47.jpg)
Responsive Web Design
Responsive JavaScript
Over the top example
![Page 48: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/48.jpg)
Responsive Web Design
06Responsive Design & the ServerLean on me... when you’re not strooooong... and I’ll be your friend...
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 49: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/49.jpg)
Responsive Web Design
RESS
?
Yes, do something
mobile
No.
![Page 50: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/50.jpg)
Responsive Web Design
RESSIn the browser On the server
• Screen size
• Orientation
• Design changes (CSS)
• Is mobile?
• Structural changes (HTML)
![Page 51: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/51.jpg)
![Page 52: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/52.jpg)
![Page 53: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/53.jpg)
Responsive Web Design
RESS
?
Insert call button & use native datepicker
Async load jQuery UI & date picker base CSS
YES!
NO!
![Page 54: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/54.jpg)
Responsive Web Design
RESS
What is the window size? Is touch available?
• Answered with media queries
• No - Do nothing
• Yes - Async load touch interactions (swiping)
![Page 55: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/55.jpg)
Responsive Web Design
What we went over• Progressive Enhancement
• Best Practices
• Setting Breakpoints
• Design Patterns
• Responsive Media
• Responsive JavaScript
• RESS (RWD with Server-side Components)
![Page 56: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/56.jpg)
Responsive Web Design
BooksResponsive Web Designby Ethan Marcotte
![Page 57: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/57.jpg)
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/
![Page 58: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/58.jpg)
Responsive Web Design
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
![Page 59: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/59.jpg)
Responsive Web Design
Folks on Twitter• Responsive Design, @rwd
• Mat Marquis, @wilto
• Chris Coyier, @chriscoyier
• Brad Frost, @brad_frost
• Luke Wroblewski, @lukew
![Page 60: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/60.jpg)
Responsive Web Design
A PodcastWeb:
freshtilledsoil.com/thedirt
Twitter:
@thedirtshow@freshtilledsoil
![Page 61: Keys to Responsive Design](https://reader033.vdocument.in/reader033/viewer/2022051322/54429c56b1af9f410a8b46ed/html5/thumbnails/61.jpg)
Responsive Web Design
Slidesftsdesign.com/labs/rwd-08-26-2013/slides.pdf