jQuery & Responsive Web Design

0988796fb50136535a69cea314396cfa?s=47 Dave Rupert
November 15, 2011

jQuery & Responsive Web Design

Slides for the jQuery Summit #jqsummit online conference.

0988796fb50136535a69cea314396cfa?s=128

Dave Rupert

November 15, 2011
Tweet

Transcript

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

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

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

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

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

    business!
  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!!!
  7. ONLY! $18

  8. None
  9. RWD Basics FLEXIBLE GRID FLEXIBLE MEDIA @MEDIA QUERIES M ake

    it “squeezie” Images Video This is the fun, next lvl #$%&
  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%
  11. WARNING! THE NEXT SLIDE CONTAINS: MATH IF YOU FEEL NAUSEOUS,

    CLOSE EYES UNTIL THE FEELING SUBSIDES.
  12. target ÷ context = result

  13. i.e. Fluid 960 Grid .container_12 .grid_4 { width: 300px; }

    300px / 960px = 0.3125 x 100 31.25% target ÷ context
  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
  15. Flexible Media img, video { max-width: 100%; }

  16. @media queries @media screen and (min-width: 480px) { body {

    background: pink; color: red; } } Your imagination is the limit :) > That’s not very practical.
  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 <LI> elements resemble a “mobile” app. - Change base font-size.
  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.
  19. > This is all CSS. What’s this have to do

    with jQuery? Good question!
  20. CSS gets us 100% of the way there, but... >

    Does not compute.
  21. Iron out the wrinkles with just a few sprinkles of

    JavaScript > “SPRINKLES”!??! JavaScript is a serious language for serious people!
  22. Part Deux Using tiny jQueries to solve common problems in

    RWD
  23. I wish there was a way for headlines to fill

    up their parent container, then scale like an image. The Paravel Workflow™ Hrmmmm.....
  24. ... 1 Hour Later ... I think I’ve got something!

    Check the dropbox.
  25. None
  26. How FitText Works <script src="jquery.js"></script> <script src="jquery.fittext.js"></script> <script> $("#my_headline").fitText(); </script>

  27. Behind the Scenes window.resize(function(){ $(this).css( 'font-size', parent.width() / (10 *

    compressor) ); }); }); * code is only slightly simplified. srsly.
  28. None
  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.....
  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!
  31. None
  32. The Problem

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

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

  35. With FitVids

  36. How FitVids Works <script src="jquery.min.js"></script> <script src="jquery.fitvids.js"></script> <script> $(document).ready(function(){ $("#thing-with-videos").fitVids();

    // Target your .container, .wrapper, .post, etc. }); </script>
  37. Style Injection <style> .fluid-width-video-wrapper { width: 100%; position: relative; padding:

    0; } .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>
  38. Intrinsic Ratio Method $allVideos.each(function(){ var aspectRatio = $(this).height() / $(this).width();

    $(this).wrap('<div class="fluid-width-video-wrapper" />') .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/
  39. > Cool story, bro. Just one more!

  40. None
  41. None
  42. Easy! I’ll just use my trusty jquery.cycle plugin! I’ve used

    this infinity-billion times.
  43. Crap. Doesn’t work. > Now you’ll have to actually program

    something.
  44. None
  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
  46. How they Work <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="jquery.min.js"></script> <script

    src="jquery.flexslider.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script>
  47. Structure your HTML <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg"

    /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> </ul> </div>
  48. BOOM. Get money.

  49. > Wrap it up. Just about to.

  50. FACT: The internet needs your help. Please contribute to open

    source projects and help solve small problems with JavaScript.
  51. Thanks! Questions, comments, concerns? © Dave Rupert http://daverupert.com @davatron5000