Responsive Tables (and a calendar demo)
*Update* see more responsive tables progress (5th Jan).
A real short post for future reference! I’m experimenting with a responsive calendar design and build. See my very rough responsive calendar demo.
I’ve found through trial, error, and much pondering that the idea of a responsive calendar is actually not that complex. My demo needs more considered breakpoints and design tweaks but it proves the concept. I’m thinking about developing it into a fully fledged HTML & CSS baseline for others to build upon.
I’m also looking into more traditional tabular data as that seems to be trickier to tame in responsive web design. After a lot of Googling and a few tweets with Harry Roberts and James Young (two fellas who know their stuff) it’s become apparent that no one has really cracked responsive tables yet.
Chris Coyier at CSS Tricks presented a good idea in August 2011. His solution requires hard-coded content inside CSS, not good at all for many reasons. Chris Garret has evolved the idea very recently using
data-* attributes in HTML and the
content: attr(data-*) technique in CSS. A great improvement but still limiting. In the end, I’m not convinced the final small-screen view of this technique is really the best solution. The ability to compare related data sets is reduced greatly. That said, I’m at a loss as to where this can be improved.
My calendar demo also hard-coded the labels “Monday” to “Sunday” within the CSS file. That’s only slightly more acceptable until you consider localisation for language support. It’s just asking for trouble later on. With more care I believe the calendar format can be nailed. I’ll keep you posted!
One thing that quickly becomes obvious is that there is no single solution. The ideas above may be perfectly adequate for some cases and completely useless for others.
It could be said that tabular data is boring; avoid at all costs! Fair point I’d say — thinking outside the box! Or table in this instance. But then sometimes you can’t escape semantics. Why not alternate content? Hide the table and present something else, like pie chart as Scott Jehl suggested in response to Chris Coyier’s experiment. A possibility, but if you’re going with a table in the first place it’s probably the only suitable format for that quantity of data.
I’m beginning to think that trying to perfectly resize a table within the visible viewport is not the best idea after all. Responsive web design does not make scrolling illegal! Could the solution lie in the realm of — gasp — horizontal scrolling?
More research and experimentation required, I’ll let you know my findings! Apologies if this post is a bit scatty. It’s gone midnight and if I don’t publish now I doubt I’ll find time until 2013!