jQuery & Responsive Web Design

Slides for the jQuery Summit #jqsummit online conference.

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
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.
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.
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!
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!
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.
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