jQuery & Responsive Web Design: Short guide by Dave Rupert

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.

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

• Fluid Resizing of V

ideo Embeds

• Fluid Image Rotat

$18

RWD Basics

FLEXIBLE GRID FLEXIBLE MEDIA

This is the f

un,next lvl #$

%&

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

http://csswizardry.com/fluid-grids/

http://grids.heroku.com/

http://goldengridsystem.com/ by @jonikorpihttps://github.com/davatron5000/foldy960http://cssgrid.net/ “The 1140 Grid”

http://css-tricks.com/responsive-framework.css

Flexible Media

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

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

How FitText Works

Behind the Scenes

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

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!

The Problem

You can try

iframe {width: 100%;}

You can try

iframe { width: 100%; height: auto; }

With FitVids

How FitVids Works

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/

> Cool story, bro.

Just one more!

Easy! I’ll just use my trusty jquery.cycle plugin!

I’ve used this infinity-billion times.

Crap Doesn’t work.

> Now you’ll have to actually

program something.

2 Great Choices

5.1 kb

1.9 kb minified

6 options

Credit: Mark Tyrrell @marktyrrelluk

Last commit: August 14th, 2011

How they Work

<link rel="stylesheet" href="flexslider.css" type="text/css">

BOOM Get money.

> Wrap it up.

Just about to.

FACT:

The internet needs

your help

Please contribute to open source projects and help

solve small problems with JavaScript.

Questions, comments, concerns?

© Dave Rupert http://daverupert.com @davatron5000