jQuery & Responsive Web Design: Short guide by Dave Rupert

jQuery
& Responsive Web Design
w/ Dave Rupert @davatron5000
#jqsummit #rwd
I work at Paravel.
&& @paravelinc
I host the
ATX Web Show.
&& @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
RWD Basics
FLEXIBLE GRID
FLEXIBLE MEDIA
@MEDIA QUERIES
Make it “squeezie”
Images
Video
This is the fun,
next lvl #$%&
Flexible Grid
16%
16% 16% 16%16%
4%
4%4% 4% 2%2%
16% 16% 16% 16%16%
4% 4%4% 4% 2%2%
WARNING!
THE NEXT SLIDE CONTAINS: MATH
IF YOU FEEL NAUSEOUS, CLOSE EYES
UNTIL THE FEELING SUBSIDES.
target ÷ context = result
i.e. Fluid 960 Grid
.container_12 .grid_4 { width: 300px; }
300px / 960px = 0.3125
x 100
31.25%
target ÷ context

On the Griddle
/> /> by @jonikorpi
/> “The 1140 Grid”
/>Flexible Media
img,
video {
max-width: 100%;
}
@media queries
@media screen and (min-width: 480px) {
body {
background: pink;
color: red;
}
}
Your imagination is the limit :)
> That’s not very practical.
@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.
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.
> 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 the wrinkles
with just a few
sprinkles of JavaScript
> “SPRINKLES”!??! JavaScript is a
serious language for serious people!
Part Deux
Using tiny jQueries to solve
common problems in RWD
I wish there was a way for headlines to fill up their
parent container, then scale like an image.
The Paravel Workflow™
Hrmmmm
1 Hour Later
I think I’ve got something! Check the dropbox.