Build Responsively: Columbus: Day 2

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

Transcript

1. MIDWEST TOUR SPONSORED BY
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Join In the Twitters
   #brworkshop
   

   View Slide

6. THANKS TO OUR MIDWEST TOUR SPONSORS
   

   View Slide

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

   View Slide

8. EMERGING PATTERNS
   navigation
   

   View 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 Slide

10. EMERGING PATTERNS
    tables
    

    View 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 Slide

12. EMERGING PATTERNS
    images
    

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. RESPONSIVE TECHNIQUES IN
    NON-RESPONSIVE
    ORGANIZATIONS
    

    View Slide

19. RESPONSIVE RETROFITTING
    SOMETHING IS BETTER THAN NOTHING
    

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 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 Slide

26. RESPONSIVE RETROFITTING
    TABLE EXAMPLE
    

    View Slide

27. RESPONSIVE RETROFITTING
    TABLE EXAMPLE
    

    View Slide

28. RESPONSIVE RETROFITTING
    TABLE EXAMPLE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. RESPONSIVE JAVASCRIPT
    fittext.js
    

    View Slide

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

    View Slide

37. RESPONSIVE JAVASCRIPT
    fittext.js
    

    View Slide

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

    View Slide

39. RESPONSIVE JAVASCRIPT
    labtext.js
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. RESPONSIVE JAVASCRIPT
    tructuring your code
    

    View Slide

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

    View Slide

45. B eak
    

    View Slide

46. Extra Stuff!
    

    View Slide

47. RESPONSIVE RETROFITTING
    SMALL RESOLUTION FIRST, CAPPED
    
    
    

    View Slide

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

    View Slide

49. THE RESPONSIVE DIP
    

    View Slide

50. View Slide

51. THE DIP
    

    View Slide

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

    View Slide

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

    View Slide

54. THE RESPONSIVE MINDSET
    

    View Slide

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/
    

    View Slide

56. MOVE BEYOND THE TECHNIQUES
    

    View Slide

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

    View Slide

58. PUSH THROUGH
    

    View Slide

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

    View Slide