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.

Litsa Babalis
UX Collective

An illustration of a woman interacting with table data on a large screen and a mobile device
Illustration from UI8 edited by me

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.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

No responses yet

What are your thoughts?