Huge data in table in responsive email

Question

I have a system where the tabular data is send via email and looks like the attachment. The table may have more than 50 rows in single email. Are there any solutions for this table view and use any smart solution?

Solution should consider responsive design for this email. Also, it should support older email clients too.

Answer 1

You can try two different UX behaviors: 1. What we call "Information rows or cards" with information hierarchy defined with client by a simple card sorting. The information cards can contain several data with a more usable approach. Here is a quick example:

In this example you have 5 columns (Typo of Information and Icon, Number of Policy, Expire date, remaining time and more info) simplified in only 3 leves of information and, by gestalt laws, only 2 visual groups to understand. This card is stackable with other above and below, teaching to the user that the easy scan any of the information structure through all the records.

The second approach is a "hidden complexity" method where you save by user the columns to be displayed on the workspace and with a simple "gear" icon let the user select them. Here you can say that the interface are "tailored" to different preferences BY USER (a selling gag).

Here an screenshot of this approach that I applied to a client (in spanish):

Hopes this helps :)

Best wishes.

Answer 2

Sounds like 2 separate problems.

1. The boss doesn't understand the purpose of email or the concept of User Experience. See other questions and answers for that, e.g. How do you persuade an organization to value UX

2. Responsive datatables. There are two main options: the layout as you describe, and the card UI design as Juan has pointed out. (Scrolling using overflow doesn't work on many email clients, and automatically hiding columns relies on JavaScript, which obviously doesn't work.)

Traditional datatable: no

Emails on mobile can comfortably display up to about 5-6 thin columns, so your layout is never going to be responsive unless you hide most of the columns on the email, and allow them to click through for more information (on a website, where you can use JavaScript solutions).

Card UI Design

Essentially, this pulls the data out of a table completely, opting for a 'card' which enables you to use multiple rows for a single entry. Then, you complement this with graphical hierarchy to create a pleasing display that responds to screen width naturally. There are tricks to make it more accessible and durable too, as I describe in my post: Responsive DataTables through Card UI Design for Email

You may end up with something like this, which just uses simple tables (no media queries, no hiding, fully and totally compatible with every email client). It reduced 6 columns to 3, and grouped together the data which goes together, making it much easier to read:

Before:

Card UI Design makeover:

Answer 3

For starters, tabular data laid out in tables is, inherently, not responsive. That's not necessarily a bad thing if the data makes the most sense staying in a large table. Sometimes panning and zooming in and out of a large table is actually the best way to digest the data.

But usually, the solution is to not use a table in the first place if you want a responsive layout.

Answer 4

If you are asking about the development of this kind of responsive email, then you can ask it on Stack Overflow.

Regarding the design of this table, You can make it more friendly to the reader maybe in the following ways.

1. Align the text of the entries to the left (titles can be center aligned).
2. Instead of 2016-12-04, you can use Dec 04, 2016 format keeping in mind that there are a lot of numbers(*e.g. 2017-01-03 12:00) in a really small space.
3. I wonder if the thumbnail for the Details View is of any help. It is way too small(ref rows 5,6,7,8)

If you are sure that your end design is the best solution, you will have to convince your boss about it.

Answer 5

For wide displays, perhaps you can include the table in full view. Setting the <table> width to 100% and letting the columns size themselves should display similar to your screenshot above in most clients.

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td>Content</td>
        <td>Longer Content</td>
        <td>Even Longer Content Can Go Here</td>
    </tr>
</table>

---

For mobile displays, you could try adding a horizontal scroll to a <div> that wraps the <table>. This way the table stays intact and stays large enough to read. overflow has decent support in mobile email clients.

<div style="overflow-x: scroll;">
  <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
       <tr>
           <td>Content</td>
           <td>Longer Content</td>
           <td>Even Longer Content Can Go Here</td>
       </tr>
   </table>
</div>