sizeit.js

Last week, I posted sizeit.js, a javascript utility for responsive web design, to github. It is a simple script that detects screen width and loads external css. Works kinda like media queries. Why not just use media queries? This article outlines some of the problems with them.

The reason I created sizeit was for building web apps. Many times it is necessary to show different content or functionality in an app based on the user’s screen size. At the end of his new book, Responsive Web Design, Ethan Marcotte suggests using javascript for just this purpose. He uses a simple slideshow as an example, recommending javascript size detection for determining which size images to load or whether to display a static image as alternate content.

If you’re building an app that, by its very nature, requires javascript, then why not also use it for size detection, and ditch media queries altogether? I’m not the first to use this approach. Nathan Smith, the developer behind 960 Grid and formalize, created adapt.js to do screen width detection and css loading.

One of the sizeit.js features I like is its size setting is available use in other javascript on the page, which is useful in the kinds of apps I work on and in scenarios like Marcotte presented in his book.

Up next, as a byproduct of recent projects, I’m creating a single page app sort-of-boilerplate that I’ll be posting to github that uses sizeit.js and some other techniques.

Comments are closed.