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.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

July 10, 2012
Tweet

Transcript

  1. MIDWEST TOUR SPONSORED BY

  2. Download the Repo http://bit.ly/LWLTEA

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

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  4. Want More? @brworkshop @hearsparkbox www.seesparkbox.com/foundry

  5. Join In the Twitters #brworkshop

  6. THANKS TO OUR MIDWEST TOUR SPONSORS

  7. Session Five EMERGING PATTERNS 9:30-10:45

  8. EMERGING PATTERNS navigation

  9. 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/
  10. EMERGING PATTERNS tables

  11. 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
  12. EMERGING PATTERNS images

  13. Picturefill Sencha.io Adaptive Images EMERGING PATTERNS images http://scottjehl.github.com/picturefill http://docs.sencha.io http://adaptive-images.com

    and tons more...
  14. 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.”
  15. EMERGING PATTERNS other fun tuff http://bit.ly/LWLTEA

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

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  17. Session Six RESPONSIVE RETROFITTING 10:45-NOON http://bit.ly/Of6LoV

  18. RESPONSIVE TECHNIQUES IN NON-RESPONSIVE ORGANIZATIONS

  19. RESPONSIVE RETROFITTING SOMETHING IS BETTER THAN NOTHING

  20. RESPONSIVE RETROFITTING • LARGE RESOLUTION FIRST • SMALL RESOLUTION FIRST,

    CAPPED • FUN WITH RETROFITTING
  21. RESPONSIVE RETROFITTING LARGE RESOLUTION FIRST /* FILE: main.css */ /*

    all your original styles */ @media (max-width: 650px) { /* styles for 650px and lower */ }
  22. RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED LET’S LOOK AT SOME

    CODE
  23. 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>
  24. /* 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"; } }
  25. /* 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 */ } }
  26. RESPONSIVE RETROFITTING TABLE EXAMPLE

  27. RESPONSIVE RETROFITTING TABLE EXAMPLE

  28. RESPONSIVE RETROFITTING TABLE EXAMPLE

  29. RESPONSIVE RETROFITTING AN EXPERIMENT http://bit.ly/Of6LoV

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

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  31. Session Seven RESPONSIVE JAVASCRIPT 1:15-3:00

  32. RESPONSIVE JAVASCRIPT position: fixed http://caniuse.com/#search=fixed

  33. RESPONSIVE JAVASCRIPT position: fixed http://scottjehl.github.com/fixed-fixed

  34. http://github.com/scottjehl/Device-Bugs/issues/1 RESPONSIVE JAVASCRIPT position: fixed

  35. RESPONSIVE JAVASCRIPT fittext.js

  36. http://fittextjs.com RESPONSIVE JAVASCRIPT fittext.js http://bit.ly/LWLTEA /13-JS-1

  37. RESPONSIVE JAVASCRIPT fittext.js

  38. http://www.frequency-decoder.com/demo/slabText RESPONSIVE JAVASCRIPT labtext.js http://bit.ly/LWLTEA /15-JS-2

  39. RESPONSIVE JAVASCRIPT labtext.js

  40. RESPONSIVE JAVASCRIPT espond.js http://scottjehl.github.com/respond

  41. RESPONSIVE JAVASCRIPT eCSSential http://github.com/scottjehl/eCSSential A better way to load CSS

    files? http://github.com/filamentgroup/quickconcat
  42. RESPONSIVE JAVASCRIPT matchmedia http://github.com/paulirish/matchMedia.js

  43. RESPONSIVE JAVASCRIPT tructuring your code

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

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens
  45. B eak

  46. Extra Stuff!

  47. 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]-->
  48. Session Eight WHAT’S NEXT 3:15-5:00

  49. THE RESPONSIVE DIP

  50. None
  51. THE DIP

  52. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF

    COMPETENCE
  53. THE RESPONSIVE DIP http://bit.ly/MasqBk

  54. THE RESPONSIVE MINDSET

  55. “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/
  56. MOVE BEYOND THE TECHNIQUES

  57. • MOBILE FIRST PROCESS • PERFORMANCE AS A FEATURE •

    THE SERVER IS OUR FRIEND • MODULAR CONTENT SYSTEMS MOVE BEYOND
  58. PUSH THROUGH

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

    WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens