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

Build Responsively: Columbus: Day 2

Build Responsively: Columbus: Day 2

Slides from day 2 of Build Responsively in Columbus, Ohio.

Ben Callahan

July 10, 2012
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  2. Top Nav Bottom Nav Slide Down Nav Select Box Nav

    Menu Icon Nav Multi-Level EMERGING PATTERNS navigation http://riothq.com http://contentsmagazine.com http://2012.dconstruct.org http://fortysevenmedia.com http://twitter.github.com/bootstrap http://msj.edu/
  3. Show the first column Turn the rows into blocks Just

    hide some of it Selective Display EMERGING PATTERNS tables http://www.zurb.com/playground/responsive-tables http://css-tricks.com/examples/ResponsiveTables/responsive.php http://elvery.net/demo/responsive-tables http://filamentgroup.com/examples/rwd-table-patterns
  4. http://tiny.cc/vr24gw EMERGING PATTERNS images ~K istofer Lanyon “...performance is important,

    but access is more important. Mobile later is better than mobile never.”
  5. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  6. RESPONSIVE RETROFITTING LARGE RESOLUTION FIRST /* FILE: main.css */ /*

    all your original styles */ @media (max-width: 650px) { /* styles for 650px and lower */ }
  7. RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED <html class=”no-js no-mediaquery”> <head>

    <script src=”/js/modernizr.js”></script> <script> if ( Modernizr.mq('(min-width: 0px)') ) { $( "html" ).removeClass( "no-mediaquery" ); $( "html" ).addClass( "mediaquery" ); } </script> <link rel="stylesheet" href="/css/base.css"> </head>
  8. /* if JS disabled OR media queries aren't supported */

    .no-mediaquery { @import "original"; } .mediaquery { @media (max-width: 660px) { @import "small"; } @media (min-width: 661px) and (max-width: 979px) { @import "small"; @import "medium"; } @media (min-width: 980px) { @import "original"; } }
  9. /* translated to CSS as... */ .no-mediaquery li { /*

    original li styles */ } @media (max-width: 660px) { .mediaquery li { /* small li styles */ } } @media (min-width: 661px) and (max-width: 979px) { .mediaquery li { /* small li styles */ } .mediaquery li { /* medium li styles */ } } @media (min-width: 980px) { .mediaquery li { /* original li styles */ } }
  10. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  11. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  12. RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED <link rel="stylesheet" href="stylesheets/base.css"> <!--[if

    (lte IE 8)&(!IEMobile)]> <link rel="stylesheet" href="stylesheets/ie.css"> <![endif]-->
  13. “The truly responsive design web designer wasn’t born until after

    the launch of the iPhone. We haven’t seen his or her work yet.” ANDY CLARKE http://the-pastry-box-project.net/andy-clarke/2012-april-8/
  14. • MOBILE FIRST PROCESS • PERFORMANCE AS A FEATURE •

    THE SERVER IS OUR FRIEND • MODULAR CONTENT SYSTEMS MOVE BEYOND
  15. P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens