Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media querie Tips to winning at responsive 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.
jQuery & Responsive Web Design w/ Dave Rupert @davatron5000 #jqsummit #rwd I work at Paravel. http://paravelinc.com && @paravelinc I host the ATX Web Show. http://atxwebshow.com && @atxwebshow I make tiny jQuery plugins. < 100 lines of code each! > Stop talking about yourself. Ok! Let’s get down to business! 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!!! ONLY! $18 [...]... i.e Make elements resemble a “mobile” app - Change base font-size 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 > This is all CSS What’s this have to do with jQuery? Good question! CSS gets us 100% of the way there, but > Does not compute Iron out... How FitText Works $("#my_headline").fitText(); Behind the Scenes window.resize(function(){ $(this).css( 'font-size', parent.width() / (10 * compressor) ); }); }); * code is only slightly simplified srsly The Next Day I’d pay well for a video service that made embedding fluid /responsive videos the right way... 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! The Problem You can try iframe {width: 100%;} You can try iframe { width: 100%; height: auto; } With FitVids How FitVids Works $(document).ready(function(){ $("#thing-with-videos").fitVids(); //... container_12 grid_4 { width: 300px; } 300px / 960px = 0.3125 x 100 target ÷ context 31.25% On the Griddle http://cssgrid.net/ “The 1140 Grid” http://goldengridsystem.com/ by @jonikorpi https://github.com/davatron5000/foldy960 http://css-tricks.com /responsive- framework.css http://csswizardry.com/fluid-grids/ http://grids.heroku.com/ Flexible Media img, video { max-width: 100%; } @media queries @media screen . jQuery & Responsive Web Design w/ Dave Rupert @davatron5000 #jqsummit #rwd I work at Paravel. http://paravelinc.com && @paravelinc I host the ATX Web Show. http://atxwebshow.com. @atxwebshow I make tiny jQuery plugins. < 100 lines of code each! > Stop talking about yourself. Ok! Let’s get down to business! Serious Business Meeting Agenda: • Responsive Web Design. elements. i.e. Make <LI> elements resemble a “mobile” app. - Change base font-size. Responsive Web Design Tips to winning at - Embrace the flexible grid. - Preserve content hierarchy - Break