We have a client who is FINALLY convinced to convert their site / web-based application to responsive. Our biggest issue right now is how to handle their extensive data tables. The biggest offender is the results page (they provide results data for sporting events around the world). Columns include: Country, name, class, event, category, score / result, region, discipline (maybe more).

Our first idea was to just switch to content blocks on mobile and move the labels in front of or on top of their pertaining data.

Is there a better way? Go easy on me. I'm just a designer trying to solve a UX issue! :D . I don't speak code. Thanks!


Your first idea is completely legit. If your dev team can handle it, switching to a two-column table on mobile is ideal: left column for what used to be the column labels, and right column for the values. This is repeated per row.

The reason I'd recommend this over stacking labels and values is that it allows for easier scanning of values. However, other design considerations may nudge you the other direction. The screenshot below is snagged from a table-design (and build) guide I made a few years back, to give you an idea of how it looks in practice.

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.