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

jQuery & Responsive Web Design

Dave Rupert
November 15, 2011

jQuery & Responsive Web Design

Slides for the jQuery Summit #jqsummit online conference.

Dave Rupert

November 15, 2011
Tweet

More Decks by Dave Rupert

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  8. 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 full-size slide

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

    View full-size slide

  10. target ÷ context = result

    View full-size slide

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

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  15. @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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. How FitText Works


    <br/>$("#my_headline").fitText();<br/>

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  29. With FitVids

    View full-size slide

  30. How FitVids Works


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

    View full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. How they Work



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

    View full-size slide

  38. Structure your HTML













    View full-size slide

  39. BOOM. Get money.

    View full-size slide

  40. > Wrap it up.
    Just about to.

    View full-size slide

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

    View full-size slide

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

    View full-size slide