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. 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!!!
  2. RWD Basics FLEXIBLE GRID FLEXIBLE MEDIA @MEDIA QUERIES M ake

    it “squeezie” Images Video This is the fun, next lvl #$%&
  3. Flexible Grid 16% 16% 16% 16% 16% 4% 4% 4%

    4% 2% 2% 16% 16% 16% 16% 16% 4% 4% 4% 4% 2% 2%
  4. WARNING! THE NEXT SLIDE CONTAINS: MATH IF YOU FEEL NAUSEOUS,

    CLOSE EYES UNTIL THE FEELING SUBSIDES.
  5. i.e. Fluid 960 Grid .container_12 .grid_4 { width: 300px; }

    300px / 960px = 0.3125 x 100 31.25% target ÷ context
  6. @media queries @media screen and (min-width: 480px) { body {

    background: pink; color: red; } } Your imagination is the limit :) > That’s not very practical.
  7. @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.
  8. 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.
  9. > This is all CSS. What’s this have to do

    with jQuery? Good question!
  10. Iron out the wrinkles with just a few sprinkles of

    JavaScript > “SPRINKLES”!??! JavaScript is a serious language for serious people!
  11. I wish there was a way for headlines to fill

    up their parent container, then scale like an image. The Paravel Workflow™ Hrmmmm.....
  12. Behind the Scenes window.resize(function(){ $(this).css( 'font-size', parent.width() / (10 *

    compressor) ); }); }); * code is only slightly simplified. srsly.
  13. 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.....
  14. 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!
  15. 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>
  16. 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/
  17. 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
  18. 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>
  19. 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>
  20. FACT: The internet needs your help. Please contribute to open

    source projects and help solve small problems with JavaScript.