Responsive Web Design and Responsive Javascript

By Naor

Building sites using Responsive Web Design has been this year hottest trend… And we know when trends emerge, tools must be created to support those trends and monetize them.

If you don’t know what Responsive Web Design is, click here to read some more about it or this post will not mean this much to you. This post makes the assumption that anyone reading this post knows what Responsive Web Design is, and understands front end development technologies.

So how does a responsive web design work?

Responsive web designed websites rely on CSS Media Queries. You might think Media Queries is the new kid on the block, as the mobile web and tablets only got popular in the last year or so, but actually, it is fully supported from CSS2 (published in 1997) and HTML4 (published 1997). It works by applying a different style configuration to the same HTML element based on the screen width.

Lets see an example:

@media all and (max-width: 320px) { }

I will not go into detailed explanation about the @media tag and the all property, I will just say it is a CSS tag and “all” means it will apply on all media types. (For more information about media types go to W3 Media Types).

The next piece of code is the juice: (max-width: 320px), This tells the browser that if the width of the screen cannot be more than 320px (Most Smartphones), it should apply the CSS code the appears inside the brakets ({}).

So this is handy. What it does is give a web site designer or a developer the ability to define different renderings for the same HTML elements resulting in a seamless display across different screens.

What I described above is only the ability to DESIGN a Responsive Website. Things get a little more complicated when you want to run different javascript code relying on CSS Media Queries. There are a lot of reasons to run different javascript for different screens, and we will address that in a different post.

CSS Media Queries and Javascript.

Introducing matchMedia. matchMedia is the “right” approach to use Javascript and Media Queries. Why the quotes? Because matchMedia is NOT supported by all browsers. According to the Mozilla developer website, it’s only supported from Chrome 9, Firefox 6, IE 10, Safari 5.1 (there is no mention of Opera).

matchMedia gives a developer with the ability to query CSS rules (like we did before with CSS media queries) on the fly with code. Even more awesome, it gives you the ability to add an event listener to the window so that whenever the rule is applied (that is, whenever a corresponding media query would match), your code will be called! Let’s call it Responsive Javascript.

How does Responsive Javascript work?


if (window.matchMedia) { //Checking if the browser support matchMedia
var wmq = window.matchMedia("(max-width: 320px)"); //initiating a variable with the matchMedia object with our rule
wmq.addListener(WidthChanged); //add an event listener when we have a match for the CSS rule call WidthChanged function
}
function WidthChanged(wmq) {
if (wmq.matches) {
//window width is a maximum of 320px, do your thing
}
}


The above example will only work on the supported browsers described above.

The only recommendation for a framework which supports Responsive Javascript we can give today is Respond.js.
Respond.js is a CSS Media Queries solution for Internet Explorer 6-8 and more unsupported browsers, but it will only help you with defining different CSS configurations for different screens and not defining javascripts.

I found a nice blog post by Paul Hayes about how to use CSS transitions to link Media Queries and JavaScript. This is a nice solution if anyone was thinking about how to implement the matchMedia object in older browsers.

More to come…