Responsive Experiments

Originally published on 12/11/2012

It seems like everybody working on websites these days is experimenting with various responsive web design approaches. There’s the Filament Group’s Compressive Images. There’s Luke W’s relentless exploration of mobile ui patterns, the pace of innovation. You have Brad Frost’s rapidly growing list of This Is Responsive Web Design Resources. The amount of work being done on Responsive Images alone is off the charts.

I’ve been experimenting as well. For instance, tables are another thorny problem when doing responsive. How do you translate those wide data tables into a narrow screen? Zurb’s Responsive Tables is one potential solution. On a project, a creative director I was working with had another idea, and I decided to give it a go.

The result is stacktable.js – a jQuery plugin for transforming big wide tables into skinny tall tables. It works by creating a duplicate table, with all the key/values arranged vertically. Using a media query, you toggle which table gets displayed. Check out the project page for a demo, and the code is on Github (of course!). This is more of an experiment at this point, so I’d love to get feedback.

Another experiment I have is an approach that I call Responsive Viewports. It isn’t something I’d recommend generally, but it can do in a pinch, when something is better than nothing. It works when you have a fixed width layout for screens above a certain breakpoint, and a fluid layout for screens below that breakpoint. Using the viewport meta tag, you can tell the browser to zoom to the appropriate size for your fixed width layout, and to scale to the device width for the fluid layout. You put some javascript in the document <head> to detect width and set whichever viewport is appropriate. Here’s the code:

// set viewport to zoom to 1200px wide on viewports &gt; 640px wide
var viewPortTag = document.createElement('meta');
viewPortTag.id = 'viewport';
viewPortTag.name = 'viewport';
if (screen.width &gt; 640) {
    viewPortTag.content = 'width=1200';
} else {
    viewPortTag.content = 'width=device-width';
}
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

The web is a challenging environment. The pace of change is relentless. Some might even say scary. I’d say it is exciting. The web demands innovation and that’s why I love my job.