jquery & Responsive Web Design w/ Dave #jqsummit #rwd

Transcription

1 jquery & Responsive Web Design w/ Dave #jqsummit #rwd

2 I work at Paravel.

3 I host the ATX Web Show.

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

9 RWD Basics Make it squeezie FLEXIBLE GRID FLEXIBLE MEDIA Images QUERIES This is the fun, next lvl #$%&

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

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 = target context x %

14 On the Griddle The 1140 Grid

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

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

17 Where you ll queries - 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 Tips to winning at Responsive Web Design - 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 The Paravel Workflow I wish there was a way for headlines to fill up their parent container, then scale like an image. Hrmmmm...

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

25

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

29 The Next Day... 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. +1 Hrmmmm...

30 ... 1 Hour Later... Don t worry, bros! I got this... 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

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.

39 > Cool story, bro. Just one more!

40

41

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

45 2 Great Choices 5.1 kb 1.9 kb minified 6 options 27.2 kb 11.1 kb minified 25 options Tons of features Credit: Mark Last commit: August 14th, 2011 Credit: Tyler 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