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. MIDWEST TOUR SPONSORED BY

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Want More?
    @brworkshop
    @hearsparkbox
    www.seesparkbox.com/foundry

    View full-size slide

  5. Join In the Twitters
    #brworkshop

    View full-size slide

  6. THANKS TO OUR MIDWEST TOUR SPONSORS

    View full-size slide

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

    View full-size slide

  8. EMERGING PATTERNS
    navigation

    View full-size slide

  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/

    View full-size slide

  10. EMERGING PATTERNS
    tables

    View full-size slide

  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

    View full-size slide

  12. EMERGING PATTERNS
    images

    View full-size slide

  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...

    View full-size slide

  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.”

    View full-size slide

  15. EMERGING PATTERNS
    other fun tuff
    http://bit.ly/LWLTEA

    View full-size slide

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

    View full-size slide

  17. Session Six
    RESPONSIVE RETROFITTING
    10:45-NOON
    http://bit.ly/Of6LoV

    View full-size slide

  18. RESPONSIVE TECHNIQUES IN
    NON-RESPONSIVE
    ORGANIZATIONS

    View full-size slide

  19. RESPONSIVE RETROFITTING
    SOMETHING IS BETTER THAN NOTHING

    View full-size slide

  20. RESPONSIVE RETROFITTING
    • LARGE RESOLUTION FIRST
    • SMALL RESOLUTION FIRST, CAPPED
    • FUN WITH RETROFITTING

    View full-size slide

  21. RESPONSIVE RETROFITTING
    LARGE RESOLUTION FIRST
    /* FILE: main.css */
    /* all your original styles */
    @media (max-width: 650px) {
    /* styles for 650px and lower */
    }

    View full-size slide

  22. RESPONSIVE RETROFITTING
    SMALL RESOLUTION FIRST, CAPPED
    LET’S LOOK AT SOME CODE

    View full-size slide

  23. RESPONSIVE RETROFITTING
    SMALL RESOLUTION FIRST, CAPPED



    <br/>if ( Modernizr.mq('(min-width: 0px)') ) {<br/>$( "html" ).removeClass( "no-mediaquery" );<br/>$( "html" ).addClass( "mediaquery" );<br/>}<br/>


    View full-size slide

  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";
    }
    }

    View full-size slide

  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 */ }
    }

    View full-size slide

  26. RESPONSIVE RETROFITTING
    TABLE EXAMPLE

    View full-size slide

  27. RESPONSIVE RETROFITTING
    TABLE EXAMPLE

    View full-size slide

  28. RESPONSIVE RETROFITTING
    TABLE EXAMPLE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Session Seven
    RESPONSIVE JAVASCRIPT
    1:15-3:00

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. RESPONSIVE JAVASCRIPT
    fittext.js

    View full-size slide

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

    View full-size slide

  37. RESPONSIVE JAVASCRIPT
    fittext.js

    View full-size slide

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

    View full-size slide

  39. RESPONSIVE JAVASCRIPT
    labtext.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. RESPONSIVE JAVASCRIPT
    matchmedia
    http://github.com/paulirish/matchMedia.js

    View full-size slide

  43. RESPONSIVE JAVASCRIPT
    tructuring your code

    View full-size slide

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

    View full-size slide

  45. Extra Stuff!

    View full-size slide

  46. RESPONSIVE RETROFITTING
    SMALL RESOLUTION FIRST, CAPPED


    View full-size slide

  47. Session Eight
    WHAT’S NEXT
    3:15-5:00

    View full-size slide

  48. THE RESPONSIVE DIP

    View full-size slide

  49. Unconscious
    Incompetence
    Conscious
    Incompetence
    Conscious
    Competence
    Unconscious
    Competence
    STAGES OF COMPETENCE

    View full-size slide

  50. THE RESPONSIVE DIP
    http://bit.ly/MasqBk

    View full-size slide

  51. THE RESPONSIVE MINDSET

    View full-size slide

  52. “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/

    View full-size slide

  53. MOVE BEYOND THE TECHNIQUES

    View full-size slide

  54. • MOBILE FIRST PROCESS
    • PERFORMANCE AS A FEATURE
    • THE SERVER IS OUR FRIEND
    • MODULAR CONTENT SYSTEMS
    MOVE BEYOND

    View full-size slide

  55. PUSH THROUGH

    View full-size slide

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

    View full-size slide