How to make tables fit on small screens (spoiler: you probably can’t and maybe you shouldn’t)
Rethinking responsive design by focusing on user needs and adaptive components for a better user experience.
How to display tables on small screens has been a hot topic for a while. A quick Google search will yield numerous resources, tutorials, and videos on designing responsive tables, each offering varying opinions and suggestions. So, here’s my take.
As a product designer for a SaaS company, I frequently handle large quantities of complex data. A well-thought-out table can make the difference between a great user experience and a frustrating one.
What does a well-thought-out table mean?
A well-thought-out table organizes and groups data into rows and columns that are easily scannable. It displays information relevant to the user, incorporates thoughtful interactions for accessibility, and has a user-friendly UI. And by UI, I don’t just mean making it look “pretty” — that’s a given. It’s about making strategic design decisions regarding font size, padding, margins, and borders to make complex tables easier to digest.