Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real World Responsive Design Workshop

Real World Responsive Design Workshop

This one-day, hands-on workshop is for those that are ready to start building responsively or are having trouble integrating responsive techniques into their workflow. They're convinced of the benefits of a fluid, device agnostic web and believe in mobile first as a best practice, but need a helping hand in breaking free of old build habits.

This workshop will make the connection between best practice and actual workflow through a mixture of tutorials, examples, exercises, discussion and pair programming that will be crafted to make the connection between responsive best practices and real-world projects. Together we'll begin the day with a static site design and work through the day so you can take home HTML and CSS that translates the design into a device-agnostic responsive page that will load in whatever browser you desire. In the process we'll explore the intersection of best practice and project compromise in a way that will make it easier for us all to make better decisions as we continue to build the responsive web.

Mike Gibson

June 21, 2014
Tweet

More Decks by Mike Gibson

Other Decks in Design

Transcript

  1. TODAY’S AGENDA • What Is Responsive Design? • Making The

    Most of Measurements • Where To Begin • Mobile First? • Putting It All Together • Questions & Answers
  2. The control which designers know in the print medium, and

    often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’” John Allsopp, “A Dao of Web Design” “
  3. When you combine fluid and flexible layouts with media queries

    to create websites that work regardless of the screen they’re being viewed on.” Mike Gibson, “This Keynote Deck” “
  4. RESPONSIVE • Adds media queries • Can achieve different layouts

    based on environment FLUID • Uses flexible measurements • Retains the same layout regardless of environment
  5. p { color: orange; } ! @media screen and (min-width:

    500px) { p { color: black; } } THE CSS CASCADE This paragraph is black.
  6. @media screen and (min-width: 500px) { p { color: black;

    } } ! p { color: orange; } THE CSS CASCADE This paragraph is orange.
  7. COMPROMISES • No knowledge of your site’s content or purpose

    • More effort needed for customization BENEFITS • Quicker to implement • Well tested
  8. PIXELS • Relative only to themselves • Precise • Consistent

    across page elements • Easy: Photoshop it, set it, forget it ! USE CASE
 Fixed width ad column
  9. EM • Relative to the inherited font-size • Puts focus

    on proportion • Easy resizing • 1em ≠ 1em ! USE CASE
 Type Systems
  10. REM • Relative to the root font-size (<html>) • More

    predictable assignment • Less browser support (IE9+) • Calculated size obscured ! USE CASE
 Type Systems
  11. PERCENTAGES • Relative to the width of their parent •

    Fluid • Predictable • Work different for box model/fonts ! USE CASE
 Layout Scaffolding
  12. VIEWPORT UNITS (vh/vw) • Relative to width of viewport •

    More consistent than percentages • Consistent vertical measurements • Less browser support (IE9+) ! USE CASE
 Full screen components
  13. SKETCHES • Quick idea generation • Easy to do with

    a team • Get stakeholders involved • Low-fidelity keeps you from getting locked into decisions too early • Start drawing a roadmap
  14. MOBILE FIRST WHAT DOES IT MEAN? Mobile is exploding” Luke

    Wroblewski. http://www.lukew.com/ff/entry.asp?933 “
  15. MOBILE FIRST WHAT DOES IT MEAN? Mobile forces you to

    focus” Luke Wroblewski. http://www.lukew.com/ff/entry.asp?933 “
  16. MOBILE FIRST WHAT DOES IT MEAN? Mobile extends your capabilities”

    Luke Wroblewski. http://www.lukew.com/ff/entry.asp?933 “
  17. BUT… …we already have a fully fleshed out 
 large

    screen design. …we are building on a large screen. …our client doesn’t have a small
 screen device. …we need to support IE8.