User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I'm in the process of redesigning my website to be responsive, and some of my account pages I show some detailed product information in a data table view.
What are some of the best methods to show a data table in mobile / tablet view?
I came across this link and I like the way he set this up, but I'm seeing if there are any other methods that are good which I'm not aware of.
http://dbushell.com/2012/01/05/responsive-tables-2/
http://dbushell.com/demos/tables/rt_05-01-12.html
Thank you!
Your question seems to be digging for implementation tips. I can't code your table, but I can speak to UX ... and isn't that why we're here?
Unless you're talking about editable spreadsheets (which your question doesn't currently specify), there isn't a big difference in tabular data on GUI vs touch interface. Obviously a narrow screen can cause you pain with wide tables, but that can happen on a crowded desktop or small laptop screen too. For anything more than a few narrow columns, you should support some kind of horizontal scrolling.
The samples you referenced are quite simplistic. Most tables benefit from both a horizontal and vertical header column. They both need to be available for proper evaluation of a given cell. In those cases, just flipping the table doesn't provide any benefit. Keep both the header row and column in view and scroll/swipe the body of the table.
Just don't forget the controls. If you choose to allow row sorting, a simple desktop solution is control indication on hover. For touch (or both), remember to make the control persistently visible. Subtle, but oft forgotten.
