Slide 1
Slide 1 text
jQuery
& Responsive Web Design
w/ Dave Rupert @davatron5000
#jqsummit #rwd
Slide 2
Slide 2 text
I work at Paravel.
http://paravelinc.com && @paravelinc
Slide 3
Slide 3 text
I host the
ATX Web Show.
http://atxwebshow.com && @atxwebshow
Slide 4
Slide 4 text
I make
tiny jQuery
plugins.
< 100 lines of code each!
Slide 5
Slide 5 text
> Stop talking about yourself.
Ok! Let’s get down
to business!
Slide 6
Slide 6 text
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!!!
Slide 7
Slide 7 text
ONLY!
$18
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
RWD Basics
FLEXIBLE GRID
FLEXIBLE MEDIA
@MEDIA QUERIES
M
ake
it
“squeezie”
Images
Video
This is the fun,
next lvl #$%&
Slide 10
Slide 10 text
Flexible Grid
16% 16% 16% 16%
16%
4% 4%
4% 4% 2%
2%
16% 16% 16% 16%
16%
4% 4%
4% 4% 2%
2%
Slide 11
Slide 11 text
WARNING!
THE NEXT SLIDE CONTAINS: MATH
IF YOU FEEL NAUSEOUS, CLOSE EYES
UNTIL THE FEELING SUBSIDES.
Slide 12
Slide 12 text
target ÷ context = result
Slide 13
Slide 13 text
i.e. Fluid 960 Grid
.container_12 .grid_4 { width: 300px; }
300px / 960px = 0.3125
x 100
31.25%
target ÷ context
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Flexible Media
img,
video {
max-width: 100%;
}
Slide 16
Slide 16 text
@media queries
@media screen and (min-width: 480px) {
body {
background: pink;
color: red;
}
}
Your imagination is the limit :)
> That’s not very practical.
Slide 17
Slide 17 text
@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 elements resemble a “mobile” app.
- Change base font-size.
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
> This is all CSS. What’s this
have to do with jQuery?
Good question!
Slide 20
Slide 20 text
CSS gets us 100% of
the way there, but...
> Does not compute.
Slide 21
Slide 21 text
Iron out the wrinkles
with just a few
sprinkles of JavaScript
> “SPRINKLES”!??! JavaScript is a
serious language for serious people!
Slide 22
Slide 22 text
Part Deux
Using tiny jQueries to solve
common problems in RWD
Slide 23
Slide 23 text
I wish there was a way for headlines to fill up their
parent container, then scale like an image.
The Paravel Workflow™
Hrmmmm.....
Slide 24
Slide 24 text
... 1 Hour Later ...
I think I’ve got something! Check the dropbox.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
How FitText Works
$("#my_headline").fitText();
Slide 27
Slide 27 text
Behind the Scenes
window.resize(function(){
$(this).css(
'font-size', parent.width() / (10 * compressor) );
});
});
* code is only slightly simplified. srsly.
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
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.....
Slide 30
Slide 30 text
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!
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
The Problem
Slide 33
Slide 33 text
You can try..
iframe {width: 100%;}
Slide 34
Slide 34 text
You can try..
iframe { width: 100%; height: auto; }
Slide 35
Slide 35 text
With FitVids
Slide 36
Slide 36 text
How FitVids Works
$(document).ready(function(){
$("#thing-with-videos").fitVids();
// Target your .container, .wrapper, .post, etc.
});
Slide 37
Slide 37 text
Style Injection
.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%;
}
Slide 38
Slide 38 text
Intrinsic Ratio Method
$allVideos.each(function(){
var aspectRatio = $(this).height() / $(this).width();
$(this).wrap('')
.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/
Slide 39
Slide 39 text
> Cool story, bro.
Just one more!
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Easy! I’ll just
use my trusty
jquery.cycle plugin!
I’ve used this infinity-billion times.
Slide 43
Slide 43 text
Crap. Doesn’t work.
> Now you’ll have to actually
program something.
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
How they Work
$(window).load(function() {
$('.flexslider').flexslider();
});
Slide 47
Slide 47 text
Structure your HTML
Slide 48
Slide 48 text
BOOM. Get money.
Slide 49
Slide 49 text
> Wrap it up.
Just about to.
Slide 50
Slide 50 text
FACT:
The internet needs
your help.
Please contribute to open source projects and help
solve small problems with JavaScript.
Slide 51
Slide 51 text
Thanks!
Questions, comments, concerns?
© Dave Rupert http://daverupert.com @davatron5000