jQuery & Responsive Web Design

Slides for the jQuery Summit #jqsummit online conference.

Transcript

1. jQuery
   & Responsive Web Design
   w/ Dave Rupert @davatron5000
   #jqsummit #rwd
   

   View Slide

2. I work at Paravel.
   http://paravelinc.com && @paravelinc
   

   View Slide

3. I host the
   ATX Web Show.
   http://atxwebshow.com && @atxwebshow
   

   View Slide

4. I make
   tiny jQuery
   plugins.
   < 100 lines of code each!
   

   View Slide

5. > Stop talking about yourself.
   Ok! Let’s get down
   to business!
   

   View Slide

6. Serious Business Meeting Agenda:
   • Responsive Web Design Basics
   • Fix Common RWD Problems w/ jQuery
   • Fluid Resizing of Text
   • Fluid Resizing of Video Embeds
   • Fluid Image Rotators
   • Questions & Answers
   Pizza Party!!! YAY!!!
   

   View Slide

7. ONLY!
   $18
   

   View Slide

8. View Slide

9. RWD Basics
   FLEXIBLE GRID
   FLEXIBLE MEDIA
   @MEDIA QUERIES
   M
   ake
   it
   “squeezie”
   Images
   Video
   This is the fun,
   next lvl #$%&
   

   View Slide

10. Flexible Grid
    16% 16% 16% 16%
    16%
    4% 4%
    4% 4% 2%
    2%
    16% 16% 16% 16%
    16%
    4% 4%
    4% 4% 2%
    2%
    

    View Slide

11. WARNING!
    THE NEXT SLIDE CONTAINS: MATH
    IF YOU FEEL NAUSEOUS, CLOSE EYES
    UNTIL THE FEELING SUBSIDES.
    

    View Slide

12. target ÷ context = result
    

    View Slide

13. i.e. Fluid 960 Grid
    .container_12 .grid_4 { width: 300px; }
    300px / 960px = 0.3125
    x 100
    31.25%
    target ÷ context
    

    View Slide

14. On the Griddle
    http://csswizardry.com/fluid-grids/
    http://grids.heroku.com/
    http://goldengridsystem.com/ by @jonikorpi
    https://github.com/davatron5000/foldy960
    http://cssgrid.net/ “The 1140 Grid”
    http://css-tricks.com/responsive-framework.css
    

    View Slide

15. Flexible Media
    img,
    video {
    max-width: 100%;
    }
    

    View Slide

16. @media queries
    @media screen and (min-width: 480px) {
    body {
    background: pink;
    color: red;
    }
    }
    Your imagination is the limit :)
    > That’s not very practical.
    

    View Slide

17. @media queries
    Where you’ll use
    - Change the layout as needed.
    -- i.e. Make content absorb more/less of the grid.
    - Change the style of elements.
    -- i.e. Make elements resemble a “mobile” app.
    - Change base font-size.
    

    View Slide

18. Responsive Web Design
    Tips to winning at
    - Embrace the flexible grid.
    - Preserve content hierarchy
    - Break up with pixel-perfection.
    - Don’t use pixels.
    - Use EM units for font-size.
    - Learn by doing.
    

    View Slide

19. > This is all CSS. What’s this
    have to do with jQuery?
    Good question!
    

    View Slide

20. CSS gets us 100% of
    the way there, but...
    > Does not compute.
    

    View Slide

21. Iron out the wrinkles
    with just a few
    sprinkles of JavaScript
    > “SPRINKLES”!??! JavaScript is a
    serious language for serious people!
    

    View Slide

22. Part Deux
    Using tiny jQueries to solve
    common problems in RWD
    

    View Slide

23. I wish there was a way for headlines to fill up their
    parent container, then scale like an image.
    The Paravel Workflow™
    Hrmmmm.....
    

    View Slide

24. ... 1 Hour Later ...
    I think I’ve got something! Check the dropbox.
    

    View Slide

25. View Slide

26. How FitText Works
    
    
    <br/>$("#my_headline").fitText();<br/>
    

    View Slide

27. Behind the Scenes
    window.resize(function(){
    $(this).css(
    'font-size', parent.width() / (10 * compressor) );
    });
    });
    * code is only slightly simplified. srsly.
    

    View Slide

28. View Slide

29. I’d pay well for a video service that made
    embedding fluid/responsive videos the right way
    easy. It’s way more difficult than you’d think.
    The Next Day...
    +1
    Hrmmmm.....
    

    View Slide

30. Don’t worry, bros! I got this...
    ... 1 Hour Later ...
    Let me know if you need help, I’ve got some ideas.
    Perfect! I was going to google your blog anyways to
    figure it out. You supply the brains and I’ll make a
    tiny jQuery plugin!
    

    View Slide

31. View Slide

32. The Problem
    

    View Slide

33. You can try..
    iframe {width: 100%;}
    

    View Slide

34. You can try..
    iframe { width: 100%; height: auto; }
    

    View Slide

35. With FitVids
    

    View Slide

36. How FitVids Works
    
    
    <br/>$(document).ready(function(){<br/>$("#thing-with-videos").fitVids();<br/>// Target your .container, .wrapper, .post, etc.<br/>});<br/>
    

    View Slide

37. Style Injection
    <br/>.fluid-width-video-wrapper {<br/>width: 100%;<br/>position: relative;<br/>padding: 0;<br/>}<br/>.fluid-width-video-wrapper iframe,<br/>.fluid-width-video-wrapper object,<br/>.fluid-width-video-wrapper embed {<br/>position: absolute;<br/>top: 0;<br/>left: 0;<br/>width: 100%;<br/>height: 100%;<br/>}<br/>
    

    View Slide

38. Intrinsic Ratio Method
    $allVideos.each(function(){
    var aspectRatio = $(this).height() / $(this).width();
    $(this).wrap('')
    .parent('.fluid-width-video-wrapper')
    .css('padding-top', (aspectRatio * 100)+"%");
    $(this).removeAttr('height').removeAttr('width');
    });
    * code is only slightly simplified. srsly.
    http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
    

    View Slide

39. > Cool story, bro.
    Just one more!
    

    View Slide

40. View Slide

41. View Slide

42. Easy! I’ll just
    use my trusty
    jquery.cycle plugin!
    I’ve used this infinity-billion times.
    

    View Slide

43. Crap. Doesn’t work.
    > Now you’ll have to actually
    program something.
    

    View Slide

44. View Slide

45. 2 Great Choices
    5.1 kb
    1.9 kb minified
    6 options
    Credit: Mark Tyrrell @marktyrrelluk
    Last commit: August 14th, 2011
    27.2 kb
    11.1 kb minified
    25 options
    Tons of features
    Credit: Tyler Smith @mbmufffin
    Last commit: October 22nd, 2011
    

    View Slide

46. How they Work
    
    
    
    <br/>$(window).load(function() {<br/>$('.flexslider').flexslider();<br/>});<br/>
    

    View Slide

47. Structure your HTML
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

48. BOOM. Get money.
    

    View Slide

49. > Wrap it up.
    Just about to.
    

    View Slide

50. FACT:
    The internet needs
    your help.
    Please contribute to open source projects and help
    solve small problems with JavaScript.
    

    View Slide

51. Thanks!
    Questions, comments, concerns?
    © Dave Rupert http://daverupert.com @davatron5000
    

    View Slide