Punkchip

Recently I was uninspired by Bootstrap’s cop-out for responsive tables where they just add horizontal scrollbars for widths under 768px.

I’d come across a few ideas in the past and now I’m exploring them to give pros and cons for each solution.

1. Dummy table image

Replace each instance of a table with a generic image and custom link text that goes to a new canonical table page.

Demo of dummy table image

Advantages

• Single implementation for all tables
• No loss of information, i.e. hiding columns
• Easier to view a full table in landscape mode

Disadvantages

• A large table is still hard to view on a mobile device
• There is an additional click to see information

2. Reformat the table: cells become rows

In this case you have to make each cell a block level element so they stack on top of each other in a single column. Then to make sure we know what each piece of data is you can add content :before each cell as a label.

Demo and implementation of cells becoming rows

Advantages

• No loss of information
• Smart solution

Disadvantages

• Each ‘row’ of the table becomes much taller – larger vertical scroll
• You lose the ability to compare data

At uSwitch on the energy comparison table we used something similar – the generated content was used for the equals sign and only one cell became a row (the title of the plan).

3. Change the table’s orientation

In this solution, the table is flipped 90° anticlockwise so the header is always visible and fixed to the left-hand-side.

View demo of changed table orientation

Advantages

• No loss of information
• Smart solution
• Ability to compare rows/columns

Disadvantages

• Non-intuitive horizontal scrolling – iOS doesn’t show scrollbar so not easily discoverable
• Table may have long headers so might not fit on screen
• A challenge to implement
• Would require a JS solution for bulletproof implementation

4. Use a chart or graph

Charts or graphs can often be a good way to visualise large amounts of data and there are some excellent JS libraries for achieving this.

View demo of table to chart

Advantages

• Charts/graphs can be a good overview of data
• Easier to process a chart on mobile device

Disadvantages

• Loss of information
• Not suitable for all tables
• Specialised implementation for each table

5. Hide some of the data

This is probably the most simple solution, only show the most important columns in the table and perhaps have a link to the full version.

View a demo of hiding columns

Advantages

• No loss of information – after visiting full view
• Easy to implement

Disadvantages

• Loss of information at basic view
• Specialised implementation for each table
• Some tables might not have superfluous data

Conclusion

The advantages and disadvantages will be particular to your business and depend on other factors such as do you use a CMS, what is the content of the tables, the size of the tables etc, so they are listed as guidelines for your decision making.

Tags: HTML, Responsive development, Usability, Web development

This entry was posted on Monday, June 16th, 2014 at 14:58 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.