We help startups start up.
x
I’ve a technique for rendering table layouts for small screen sizes that I use with variations depending on specific cases. It ensures that table layouts get downsized into a presentation that communicates the relationship between data and data type effectively, while also being usable interactive. And it doesn’t require javascript to adapt behaviors based on device size. However it relies on styling a hierarchy of divs in CSS and doesn’t utilize actual semantic table markup, which of course bothers me as it’s clearly not best-practice. But I haven’t seen a better way than the one I basically settled on, to ensure the best user experience for the largest number of users with the least amount of custom code, until now.
Today I came upon a tool for responsive data tables by Filament Group that has me psyched. It implements roughly the same UI design strategy I’ve come to consider to be the best possible user experience—stacking data into row-correlated block containers, and revealing data labels that are hidden in the td’s during normal desktop display. But they also integrate other highly usable UI patterns that are excellent UX solutions for table display on mobile. They’ve thoroughly worked through the stumbling blocks I ran into in getting IE9 to render table markup with block display, and their choices for layout/UI beyond the “stacked blocks” concept appear to be great solutions.
I haven’t gotten to put their code into a project yet, and I’m still thinking about the Javascript dependency of some of the functionality. But I look forward to seeing just how flexibly user experience can be manipulated using this collection of plugins. Have a look for yourself and feel free to comment if you’ve come across a better solution than this for responsive tables!
About the Author:
Scott came to lead User Experience for Cloud Construct with a long background as a freelance consultant in UX design and development, and from stints with a number of Boston digital agencies. Scott has helped bring many award-winning sites and applications to life, and created successful web experiences across organizations from mid-sized non-profits to publishing giants, various startups, hospitals and more.
