Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Responsive Design

Jim Barraud
November 17, 2011

Responsive Design

The Difference Between Small Screen and Mobile Optimization

Jim Barraud

November 17, 2011
Tweet

Other Decks in Design

Transcript

  1. It is the nature of the web to be flexible,

    and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. - John Allsopp A Dao of Web Design : April 7, 2000 http://www.alistapart.com/articles/dao/ “ usable enjoyable JB ^
  2. Mobile Strategy takes into account actions you would do while

    being "mobile" • What's competitor prices of this thing I'm currently looking at? • What's the score of the Giants game? • Is mom's flight on time? (I wonder while security kicks me out of the pickup lane) Quickly looking up information in relation to a current situation Mobile vs. Responsive
  3. Mobile Strategy takes into account actions you would do while

    being "mobile" • Finding a nearby restaurant • Finding the nearest XYZ store Location based actions Mobile vs. Responsive
  4. Mobile vs. Responsive Responsive design is not concerned with the

    mobile nature of the device, but the experience of using your site within the context of the device, mobile or not. • Devices don't have to be "mobile" • You're designing based on the context of the screen
  5. Mobile vs. Responsive Responsive Devices Any device with web access

    and a browser (which of course includes mobile devices) Appliances Game Systems Computers
  6. Mobile vs. Responsive Responsive Devices Any device with web access

    and a browser (which of course includes mobile devices) ? Unknown
  7. • Your HTML should be clean and marked up semantically.

    • Consider the flow of your elements. Do not rely on absolutely positioning an element that resides in the bottom of your code to the top of your page. Your success of implementing a responsive site will rely on the following factors. (which make for good websites in general) Prerequisites Mobile vs. Responsive
  8. Responsive Design • Mobile browsers tell websites to render at

    a different width then what the actual width of the device is. • Mobile Safari displays websites at a size of 980px wide, when it’s actual width, in portrait orientation, is 320px. This allows for the scaling that takes place. • Using the viewport tag allows us to change this and make 1px = 1px so the smaller screen alternatives of our sites render properly. The Viewport
  9. Responsive Design Fluid Grid Code Example <head> <title>My Site</title> <meta

    name=”viewport” content=”initial-scale=1.0, width=device-width” /> </head>
  10. Responsive Design Fluid Grid • A fluid layout does not

    mean a table based layout. • Instead of based on pixels, your layouts are percentage based. • Allows for your site to adapt to screen sizes in between the ones you’re targeting The old fixed layout vs. liquid layout debate Flexible Images Media Queries
  11. Responsive Design • Begin with a pixel based layout. These

    pixels will the basis for your percentage calculations. • Divide the target pixel value by the pixel value of the parent. • Don’t forget margins and padding. • Add a comment of your original calculation. (this will save you) How do I find the percentage value for my elements? Fluid Grid Flexible Images Media Queries
  12. Responsive Design Fluid Grid Code Example .container{ max-width: 900px; }

    .sidebar{ float: left; width: 250px; } 250 / 900 = 0.27777777777778
  13. Responsive Design Fluid Grid Code Example .container{ max-width: 900px; }

    .sidebar{ float: left; width: 27.777777777778%; /* 250/900 */ } Save your sanity
  14. Responsive Design Fluid Grid Code Example : Margins .container{ width:

    900px; } .sidebar{ float: left; width: 210px; margin: 10px 20px; }
  15. Responsive Design Fluid Grid Code Example : Margins .container{ max-width:

    900px; } .sidebar{ float: left; width: 23.333333333333%; /* 210/900 */ margin: 10px 2.222222222222%; /* 20/900 */ }
  16. Responsive Design • Images are not given a defined height

    and width in the HTML • Images are sized based on the width of it’s parent container • Images are defined with a width of 100% in the CSS • This also applies to video, embed and object tags Fluid Grid Flexible Images Media Queries
  17. Responsive Design Flexible Image Code Example .sidebar{ float: left; width:

    27.777777777778%; /* 250/900 */ } .sidebar img{ width: 100%; }
  18. Responsive Design • Background images can be sized using the

    background-size property. (Yay!) • background-size is only supported by the Firefox 4.0+, Safari 4.1+, Opera 10.0+ and IE 9+ (Boo.) • JS workarounds exist for older browsers. • Consider creative cropping via the overflow property Fluid Grid Flexible Images Media Queries What about background images?
  19. Responsive Design • Media queries allow you to create break

    points based on various browser criteria. • We’re able to test for content width, device width, device orientation, aspect ratios and MORE! • With responsive design, we’re mostly interested in width based properties (and a dash of orientation) Fluid Grid Flexible Images Media Queries
  20. Responsive Design Media Queries Code Example .sidebar{ float: left; width:

    27.777777777778%; /* 250/900 */ } @media screen and (max-width: 480px){ .sidebar{ float: none; width: 100%; } }
  21. Responsive Design Some Points To Note • Responsive isn’t just

    about small screens. Consider how to take advantage of widescreen real estate as well. • Pay attention to how font sizes and leading react to your alternate layouts and when viewed in various devices. Adjustments will probably need to be made. • Fingers are bigger than mouse pointers.
  22. Responsive Design Selling Responsive Design • Showing examples of other

    awesome sites will only get you so far. • Looking for mobile? Responsive may be all they need. • HTML Wireframes & Prototypes. It’s hard to convey what responsive means to solving your clients problem via static images. Responsive design takes more time and planning, so how do you sell it to your clients?
  23. Responsive Design Suggested Resources • Fluid Grids • Fluid Images

    • Responsive Design • Media Queries Responsive Web Design by Ethan Marcotte