Mobile Phone Design - Data Tables

Question

Currently I am struggling a bit with how to show a lot of data properly and user friendly on a mobile device.

On a website its easy to implement a table. You can show for example 7 columns. But having a table with 7 columns on a mobile device is not really user friendly. The data in the grid will have to wrap the words in order to show 7 columns next to each other.

• So what is a recommended way to show data on a mobile device which you usually shows in a table on larger screens?

• Do I need to use tables or are there much better approaches to show a lot of data.

  • for example split up in multiple screens?
  • expandable containers?
  • ??

• Can you give me some references where to look at actual designs

• Do I need to take into account different designs due to I am working on Android, Windows Phone and iPhone?

Answer 1

The common way to show data on a phone is reorder all the data from columns to rows. You can find several libraries to do that, just search for "responsive tables".

For example "reflow" Table: Reflow

And just for a reference , you can also read this: 10+ Solutions for Responsive Data Tables

Regarding the different platforms, yes, you should stick to them as much as you can.It's not mandatory,but it's good for the user. Just take a look to every single official website ( Material Design, iOs8, Windows Mobile ) and see how they show tables and lists.