How To Choose The Best Responsive Table Solution

Posted: 02 Dec 2013 05:30 AM PST

One topic I haven’t yet covered where responsive design is concerned is how to work with data tables. Part of the reason is that I haven’t had to work with them much. For whatever reason my clients haven’t needed tables beyond very simple ones where a bit of flexibility was enough to make them work responsively.

However, that’s hardly the case with all tables and many tables will need something beyond flexibility in order to render well across devices and conditions. What options do we have at our disposal beyond using relative measurements and hoping for the best?

A weather table sitting in an empty weathered room

The Issue with Tables and Space

Think of a responsive layout in general. Typically the design will be a multi-column layout at larger resolutions with the number of columns being reduced as you move toward smaller screen widths.

You’ll make the layout flexible and then at certain points remove a column by either dropping it to the bottom of the design or better by integrating content from the column into another. This works because we can still maintain priority and hierarchy even as we move elements from one place in the layout to another. This isn’t so with tables of data.

You can’t arbitrarily remove columns from a table or simply drop the column below others and have it communicate the same thing. You certainly can’t mix the cells in one column with the cells of another column and have the table make sense anymore. It would change the meaning of the data and above all else we need to maintain that meaning.

If your table is a simple one, say 2 or 3 columns of information, you can probably find a workable solution based on flexibility alone. At worst the information inside each column will be a bit cramped, but the overall meaning will be maintained. You might need to rework some of the information so it requires less space, but otherwise you can get away with flexibility alone.

With larger tables containing more columns of complex data what can you do?

Responsive Table Solutions

Since I haven’t done a lot of work with responsive tables and because people smarter than me have, I’ll be leaning heavily on the work of others.

Instead of trying to provide the coding details of the solutions, I’ll simply point you to some places where you can find them. Here we’ll talk more in general about what solutions are available and why you might choose one over another.

First and foremost, like everything else in design, your solution should come from the needs of your content. All tables are not created equal. They have different purposes and different needs. Each is trying to communicate something about the information it contains. Above all else maintain this communication.

When choosing a responsive table solution ask yourself a few questions.

What information in the table is essential?
What information is nice to have, but not need to have?
Is it important to compare rows and columns?
Does everything need to be presented all at once or can some information be presented on request?

With these questions in mind let’s look at some of the solutions people have come up with. In looking over different solutions I’ve come across I think they can be grouped under a handful of approaches.

Reformat the table
Hide and reveal columns
Add horizontal scrolling
Provide a sample with a download link to full table data
Create a dynamic infographic

Reformat the Table

The first set of solutions involves reformatting the table, usually into something that doesn’t appear to be a table. This solution works when the table is mainly presentational and it’s not important to be able to compare rows to rows or columns to columns.

For example if you want to display basic contact information for a number of businesses you might present a table with company name, address, city, state, zip code, and phone number. You might also include the information as some kind of list. The former works better when there’s plenty of horizontal space. The latter works better when there’s more vertical space.

You wouldn’t necessarily change the html itself to become a list, but you might reformat the table to appear more list-like. It’s probably not a bad idea to give yourself a refresher on the html table element and all you can do with table rows, cells, headers, footers etc.

Some tables might work well as a pie chart or bar chart or some other kind of chart. Another possibility is to abandon the grid structure of the table and collapse the spacing to allow more information in the smaller space.

Hide and Reveal Columns

Sometimes it is important to compare different rows of information in a table, but the information in some columns is more important than other columns or you don’t need to compare every column all of the time.

In these cases you might choose to hide some columns when there’s not enough space to show them. In the company example above, perhaps the city and state columns could be dropped when there’s not enough space.

Additionally you could include a trigger that reveals the hidden columns when requested or allow viewers to select which columns to show at any time.

Add Horizontal Scrolling

The solutions above both try to rework the table in some way so it fits in the available horizontal space. Another idea is to rework the space to fit the table.

While only a few columns of data might be shown on the portion of the screen that’s visible, the rest can be held off canvas. The usual way to reveal the off screen table data is to make the table scrollable.

A scrollable table works best when there are visual cues provided that the table can be scrolled. Perhaps part of an off canvas column is shown or arrows indicate there’s more to see. You might also want to make the first column a fixed header column in order to make comparison between rows easier.

One other consideration is whether or not to flip the table orientation. Headers that work better as a row along the top on widescreen devices might work better as the first column on a mobile screen.

Provide a Sample and Download Link

At times no matter what you try there isn’t going to be any good way to show the entire table on a small screen. In these cases one option is to provide a small sample of the table and then offer a download to a .csv, .xlsx, or other file containing the rest of the table data. The sample itself could work as is or it might require one of the solutions above.

Create an Infographic

One solution I haven’t seen or tried myself is to convert the table into an infographic of some kind. This is more speculation on my part than anything else, but I think the idea of converting a table into a pie chart could be expanded into something more, perhaps a dynamic infographic.

Additional Resources

Like I said, people smarter than me have been offering responsive table solutions for awhile. Not every resource I found fit so neatly into the sections above so here are a few more with details on working with responsive tables.

Summary

Most tables don’t have a nice and easy responsive solution. Flexibility alone won’t save the day and rearranging tables at breakpoints can lead to miscommunication if you don’t consider the meaning the tables are trying to convey.

Solutions do exist. Before choosing one think about the information in the table. What’s being shown and why? Take some time to understand what the table is attempting to communicate. As long as you maintain that communication your solution should be fine.

Remember that any responsive table solution should be chosen based on the content of the table. Think about the best way to convey that content in the given space and under the given conditions. When space allows, the best way might be a table. When space doesn’t allow, it’s possible the best way is something other than a table or it’s possible you need to find a way to create more space.

If you liked this post, consider buying my book Design Fundamentals

The post How To Choose The Best Responsive Table Solution appeared first on Vanseo Design.