Mobile Phone Design – Data Tables

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

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.

Attribution
Source : Link , Question Author : hwcverwe , Answer Author : Alessandro Spano

Leave a Comment