Replacement for Grid or Table Data Visualization for Mobile Apps

Question

What could be the best replacement for Grid data visualization in terms of displaying multiple data elements with same structure in mobile apps.

To Elaborate..Well, lets say we have 10 rows and 5 columns or relative data.In web, it can be visualized in a simple table structure.

My question is, how effectively this can be visualized in mobile applications apart from going for a table view. The reason why i don't want to go for a table view is i have a minimal real estate,and the requirement is to show all the 5 columns of data.

Answer 1

Sometimes a table really does need to be a table, otherwise you're losing the purpose of it. (i.e. if you're comparing records / products / users).

If you deem that it's information that is really needed (not everyone using the mobile site will need to see everything available to the full-size site, that's up to you to decide) then possibly go for a thumbnail / image version of the table to show the context of where the table is used and provide a link (and make the image selectable too) that takes the user to a new full page where the table is shown on its own for them to then read separately to the actual site.

That way you still get to display the actual table data in its complete state without compromising on the detail, but you're not restricted to having to render it in-page along with all the other page content.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

You can design it in a list structure, depending upon the way you want it to look like.

Here's an example screenshot. You can increase/decrease height of list items and display the main data you want there. You can have a look at more patterns here

In the list below, there's data for 4-5 columns displayed in each row.