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.
<head> to detect width and set whichever viewport is appropriate. Here’s the code:
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.