How to design complex (and responsive!) tables and not lose your mind

Do you have The Fear when you discover your next project is to design a complex and responsive data table? 😨

You’re not alone, I’ve seen some great designers quake in their boots at the thought of solving this problem. But there’s no need to fear! Recently I stepped up to this design challenge, and now I’m here to share some tips that helped me to come up with a design that our users love.

There are a lot of different options of how you can make your table responsive.

There are a lot of different options for how to design tables, let alone how to make them responsive. Columns and rows can reposition, resize, collapse, minimise or even disappear when the browser window becomes narrower.

As with all design solutions, the best design depends on how your readers are going to use the data. We ran some user research at the start of this project to provide some direction and identified that for our project:

• This tabular information would be used equally on a mix of desktop, tablet and mobile devices.
• These tables could contain many columns of free text, as well as numbers.
• Certain important bits of information should remain visible at all times.

With these insights from our users, here are the main things I addressed when developing a design system for text-heavy data tables.

Comparison table or content table

First, determine what sort of table it is. Is it a comparison table, where the reader compares data across multiple columns, or is it a content table, where the data sets are independent of each other?

A comparison table, where the reader compares across multiple columns.

A content table, where data sets are independent of each other.

My table is more like a content table than a comparison table. Identifying this early on helped me to understand what information needs to remain in close proximity in the narrow screen size.

Mobile first

The first version I designed was the narrow screen version. I intentionally looked at this before the wide screen version as viewing the tables on mobile is important for our users. Therefore, I needed to find a way to fit complex and nonlinear information into a vertical format.

I knew it would be much to easier scale the design up when there is plenty of horizontal space, than to design a beautiful table for desktop and struggle to make it remain readable on mobile. It also meant that I kept touch target sizes in mind from the beginning and wasn’t relying on actions like hover to reveal information.

I decided to treat the content more like a list in narrow views so that the important information remained highly visible and scannable.

Consistent styling

The rows need to reposition when the screen size changes, so I used styling to help retain the connection between them. For example, if column headers are in bold with a grey background, use that same style in the narrow view too. That will help readers to remap the new distribution of cells.

Keep the same visual styling if your cells reposition.

Typography is your friend

It’s easy to forget about your typographic principles when you’ve a lot of constraints, but making a conscious decision to optimise the readability will be a huge help to your readers, especially in a project like mine where the tables have a lot of text.

Typography exists to honor content. ~ Robert Bringhurst

Scanning

Make it easy to scan quickly by keeping the reading flow simple and clear. I chose to have the text in each column hanging from the same edge so that the reader could scan text in a linear way.

Keep the reading flow simple by having all text aligned to the same edge.

Line length

Try not to compromise the line length of text by squashing a lot of columns into a narrow space, or it slows down the reading speed. I set a minimum width for columns of continuous text.

Try not to compromise line length by squashing a lot of columns into a narrow space.

Labels

Think about where to position labels so they don’t occupy an excessive amount of real estate, but still provide some context to the information.

Think about where to position your labels.

I put the labels above each bit of cell content in my list, where they took up less room, rather than to the side. And it made the information easier to scan too. I styled the labels differently so that it’s easy to distinguish the difference between a fixed label and variable content.

These are the main areas I looked into when I began this project. They seem fairly obvious looking back, but I felt overwhelmed by all the options at the beginning of the project. However, it has been a really fascinating problem to solve and I’m proud of the solution we developed.

Tabular matter need no longer be a rather unpleasant job to design: on the contrary, it can become a really charming and artistic exercise, in no way less interesting than any other area. ~ Jan Tschichold

Many experts in the web design industry have written on this topic, including from a front-end development perspective, which is helpful to understand too. Here are a few really interesting articles that elaborate on topics I raised.

Accessible, Simple, Responsive Tables | CSS-Tricks

Web Typography: Designing Tables to be Read, Not Looked At

Picking a Responsive Tables Solution