0

We have large articles on our website that include several tables of information. The tables typically follow a certain structure. For those tables, we've managed to come up with a solution that works.

For tables that do not follow the typical structure, we struggle to make them non-repetitive and meaningful on mobile devices.

While people typically do not consume the content on phones, it’s not uncommon for users to be tablets or small laptops.

In an ideal world we would find a solution that takes all data out of tables and displays it in a fluid layout. However, there is allot of overlapping information.

Below is a picture of a particularly troubles some matrix taken straight out of MS Word. Sorry for having to remove allot of the information. I've tried to leave enough so you can understand the length of content, headline placement ect...

enter image description here

We are searching for a solution that either takes the content out of the table all together, or an arrangement of the table that is suitable for mobile devices.

It might be worth noting that currently we make two versions of ever table and some articles have up to 18 tables.

Thank you

Improve this question

1 Answer 1

Reset to default
2

This does not appear to be a true table.

Semantically a table is used to display data in a way that similar information can be evaluated and compared, or connections made between data in the cells.

In this case, it appears a table is being used as a formatting hack to display lists. This could have begun in printed media as a way to utilize the full width of an 8.5 x 11-inch page by someone with limited Microsoft Word formatting skills.

The reader, from what I can see, is not comparing list items across columns, and the rows are so high as to not really serve the function of a row, which is easy scanning.

So a possible solution for mobile would be: let lists be lists. You can establish hierarchy/organization (classification, subgroup) with headers.

Category 1 (h2)

Subgroup A (h3)

Drivers of something:

  • Something
  • Something
  • Something

Category 2 (h2)

Subgroup A (h3)

Strategic sourcing actions:

  • Something
  • Something
  • Something

Lists are also much more suited to a mobile experience, which is more vertically oriented (portrait) while a traditional desktop experience is more horizontal (landscape).

Improve this answer
1
  • 1
    Thank you Eric, You're right that its not a table and that it has come from print. Ideally, we would get rid of tables all together as we only use them in this context. I will put forth your suggestion to our editors.
    – Tom
    Commented Oct 21, 2016 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.