Javascript in Responsive Web Design by Dave Rupert

Dave’s Slides (HTML)

Dave makes some awesome stuff that you’ve no doubt used before like Lettering.js, FitVid.js, FitText.js

Dave co-hosts shoptalk, a very very cool podcast with Chris Coyier. Dave actually has a degree in japanology (majored in anime lol).

What is Responsive Design?

Responsive Design is basically made up from 3 main ingredients.

1. Flexible Grids

(formula target / context = result) – job done
300 / 10000 = 0.3
0.3 x 100 = 30%
What about when it gets to confusing numbers? Get a calculator
280 / 960 = .291666667
.291666667 x 100 = 29.1666667%

Some people say that browsers don’t do any rounding past the second decimal. Who cares, just let the computer do the math. Put everything in there and let the browser decide. With the new high pixel densities lets give them as much info as possible.

2. Media Queries

background pink driven development. LOL.

 @media screen and (min-width: 540px) {
 #content {width: 70%; float:left;}
 #sidebar {width: 30%; float:left;}
 }

The most common question DAve has is “which breakpoints do I use”. A lot of people say you should create a breakpoint for the ipad, iphone, HTC desire etc etc, WRONG. Add breakpoints to a design when it looks weird. Are the line lenths too long, images too squish? Add a breakpoint.

3. Flexible Media

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

This is a great place to start. Go back and fix things like IE7 and stuff, but it should do for most things.

JAVASCRIPT IN RWD.

Why use JS when CSS gets us what we need?

Well it does….. but……

“Iron out the wrinkles, with just a few sprinkles, of javascript”

The big issue is that most people don’t know js that well, people look at it like it’s black magic.

Well it kind of is, but you still need to learn it.

HTML CSS JS are the three front end building blocks. You need to understand them and how they can work together. This is the baseline for anyone working on the front end.

Check out Front End Developers – http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/

FITTEXT.JS

The plugin is super small

$(this).css('font-size',
$(this).parent().width() /
(10 * compressor)
);
Using window.addEventListener ('resize', function (){
 /*
 I'm super exhausting for memory so use me sparingly unless you actually know what you're doing
 */
 });

The future of FITTEXT.JS will be VW, VH, VMIN.

h1 {font-size: 10vw; /*10% of the viewport*/}

This is something which will be amazing for Responsive Design, DAve will try and make fittext a polyfill for this if it ever happens….. YAY DAVE!

FITVID.JS

It basically does aspect ratio in content resizing for video. So popular even people like Tumblr are using it. Go Uncle Dave.

How does it work? It injects some CSS into the page that gives a height of 0, position relative and a width of 100%. On the iframes/ojects/embeds etc you set position absolute and set the top/left/right/bottom to 0.

You then sprinkle some JS on it. Awesomely.

 var apsectRation = $(this).height() / $(this).width();
 $(this)j.wrpa('fluid-width-video-wrapper')
 .css('padding-top', aspectRatio * 100+"%");

It essentially injects padding into the elements to allow the videos to be responsive.

UI WIDGETS

Carosels, Navigation, Doo-dads, all that stuff.

Dave started working on the big stuff, headlines and videos, but as he keeps working on projects more and more small stuff pops up that needs to be fixed.

Dave tried using jQuery.cycle() for a carosel in a site but it didn’t work because it fixed the width and height. EEEEKKK.

We need to take our current tricks and make them work in RWD.

Slideshows & Carousels

Navigation

  • TinyNav.js – jquery plugin that just takes ul and ol elements to a dropdown select box. Pureists will say “select isn’t navigation”, but it works.
  • FlexNav – jason weaver.name – pretty cool.
  • OffCavas – another jason weaver implementation that allows the sliding panels for navigation similar to the path and facebook phone apps.
  • RWD-Nav-Patterns – FilamentGroup: 3 different navigation styles and techniques that can be used.

Responsive Images

“I’ll just use javascript”

– Every person Ever

Browsers are now super aggressive at performance and prefetch every image it can. This means that responsive iamges will all be downloaded which makes non-wifi connections download stuff they just don’t need to.

Responsive Images Community has introduced the <picture> element.

<picture alt="Dancing Cat">
 <source >
 </picture>

Then someone suggested <img srcset>. It’s super verbose but…. WTF??!?!!?

<img alt="cat dancing"
 src="image.jpg"
 srcset="imageHD.jpg 2X,
 imagePhone.jpg 100w,
 imagePhoneHD.jpg 2X 100w">

Wouldn’t it be good if they could work together?

Florians Compromise is what they thought could achieve this….

But can I use this today?

More tips and tricks.

Check out Southstreet from the Filament group on GitHub. This has some great stuff covering off things like Basic vs Enhanced sites, Ajax to load in content, moving things around the DOM, detect if a media query is active (with match media).

Dave wants us to think about things like….

  • Responsive Charts n’ Graphs
  • Responive Interactive maps
  • Responsive Calendars
  • We need to talk about real problems, not fake ones.
  • Write more solutions and how to blog posts.
  • Share, talk, share, talk.

javascript resources
Sitepoint: Jquery Novice to Ninja
Rebecca Murphy – check her site.
Code Academy

QUESTIONS

The SRCSET polyfill requires a double download, so at that point you’re better off just serving a single high definition image.

Build all your navigation with accessibility in mind.

More talk, less frameworks

check out ponies.js

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

One Response to “Javascript in Responsive Web Design by Dave Rupert”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>