Keys to Responsive Design
 

Keys to Responsive Design

on

  • 1,637 views

In this class, we'll analyze various scenarious in which a traditional 960 pixel view fails users, and how responsive design can help. We'll look at the best-practice principles behind implementing a ...

In this class, we'll analyze various scenarious in which a traditional 960 pixel view fails users, and how responsive design can help. We'll look at the best-practice principles behind implementing a responsive website or app and then walk through a fail-proof process for overhauling existing designs to make them truly responsive.

Statistics

Views

Total Views
1,637
Views on SlideShare
1,637
Embed Views
0

Actions

Likes
5
Downloads
41
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Keys to Responsive Design Keys to Responsive Design Presentation Transcript

  • Presented by Keys to Responsive Design
  • Presented by I’m Tim.
  • Responsive Web Design I wrote this book. Amazon Barnes & Noble Safari Books ...most places, really. informIT.com WRIGHT2740
  • 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)
  • Responsive Web Design 01Best PracticesThey’re WAY more exciting than they sound!
  • Responsive Web Design Progressive Enhancement
  • Responsive Web Design Progressive Enhancement
  • Responsive Web Design The BIG secret!
  • Being good at responsive design has little to do with CSS
  • 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.
  • 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)
  • Responsive Web Design The Media Query @media screen and ( max-width: 800px ) { /* CSS for this breakpoint */ } media type media feature normal CSS
  • 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 ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  • Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  • Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled
  • Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  • Responsive Web Design Aspect ratio Height/Width Orientation Resolution (dpi) Touch enabled (-moz-)
  • Responsive Web Design Setting Breakpoints
  • Responsive Design doesn’t care that the iPhone is 320 pixels wide... ...and neither should you
  • Responsive Web Design Making it work on everywhere
  • Responsive Web Design Viewport tag content width=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 Breakpoints & Media Queries Live example
  • Responsive Web Design Browser Support caniuse.com
  • 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)
  • 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
  • Responsive Web Design Navigation The “Do Nothing” Approach
  • Responsive Web Design Navigation The “Stacked Navigation” method
  • Responsive Web Design Navigation Footer Anchor Image Credit: Brad Frost
  • Responsive Web Design Navigation Select Menu Image Credit: Brad Frost
  • Responsive Web Design Navigation Toggle
  • Responsive Web Design Navigation Left Nav Flyout
  • Responsive Web Design Navigation The “Hide and Cry”
  • Responsive Web Design Navigation Live example
  • 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)
  • Responsive Web Design Responsive Images • max-width: 100% • srcset • Picturefill • Bandwidth testing
  • Responsive Web Design Lazy man’s (or woman’s) images img { max-width: 100%; }
  • 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...
  • 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>
  • Responsive Web Design Bandwidth Testing navigator.mozConnection.bandwidth if(Manage.connection === “good”) { // you have ample bandwidth } https://github.com/timwright12/js-asset-management
  • Responsive Web Design 05Responsive JavaScriptGulp... • Best Practices • Setting Breakpoints • Design Patterns • Responsive Media • Responsive JavaScript • RESS (RWD with Server-side Components)
  • Responsive Web Design Responsive JavaScript body:before { content: “widescreen”; position: absolute; top: -9999px; left: -9999px; } @media screen and (max-width:600px) { content: “smallscreen”; }
  • Responsive Web Design Responsive JavaScript // 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);
  • Responsive Web Design Responsive JavaScript Basic example
  • Responsive Web Design Responsive JavaScript Over the top example
  • 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)
  • Responsive Web Design RESS ? Yes, do something mobile No.
  • Responsive Web Design RESS In the browser On the server • Screen size • Orientation • Design changes (CSS) • Is mobile? • Structural changes (HTML)
  • Responsive Web Design RESS ? Insert call button & use native datepicker Async load jQuery UI & date picker base CSS YES! NO!
  • 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)
  • 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)
  • Responsive Web Design Books Responsive Web Design by Ethan Marcotte
  • Responsive Web Design 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/
  • Responsive Web Design 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
  • 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 A Podcast Web: freshtilledsoil.com/thedirt Twitter: @thedirtshow @freshtilledsoil
  • Responsive Web Design Slides ftsdesign.com/labs/rwd-08-26-2013/slides.pdf
  • Responsive Web Design Questions/Comments E-mail: tim.wright@freshtilledsoil.com Twitter: @csskarma