Design patterns or strategies for complex or large table data in Mobile phones

Question

I want to display a table with 4/5 columns and possibly 100 rows (as in desktop app right now) in smartphones. The table cells are also editable. Now we want to port this desktop app to smartphones (Android / IOS), what will be the most optimized way of showing this on Smartphones.

** I'm sure many people must've come across this problem by now, Is there some patterns or solution for displaying such kind of large data (editable) on smartphones.

Answer 1

When designing for mobiles, the first question you should ask yourself is, "Do users need to be able to perform the same actions while on-the-go as they perform at their workstations?" The second question you should ask is, "Can all of these actions be performed comfortably on all mobile devices?"

When you're dealing with 100-row tables, that translates to at least 7-8 screens on a mobile. That's not comfortable, especially when you want them to be editable. Editing needs to be invoked somehow, which is usually accomplished by tapping. The recommended target area is 9mm, so your entire table height can be as much as 900mm (90cm/0.9m/35.4in/2.95ft).

Thus, drop the editing capabilities and introduce some sort of pagination and filtering to improve usability.

There's also a similar question: How should large table columns be handled on a responsive design? and you can search for other mobile table questions for more ideas & solutions.

Answer 2

Filament Group offers the best approach for managing tables in responsive design that I've come across.

They have many other patterns and techniques to support varying screen sizes.

Additional detail:

The pattern / scripts available on the link above allow tabular data to be presented at varying screen sizes. By identifying the columns that are to be maintained at smaller sizes and providing the means of turning 'on' additional columns the primary focus that data illustrates is maintained.

Edit:

Filament Group has released a javascript library called TableSaw which implements their responsive table research/recommendations.

Answer 3

I had the same problem, and we chose a solution that we saw at CSStricks.

http://css-tricks.com/responsive-data-table-roundup/

They have different approaches there:

1. Show the complete table and offer a link to view it in a readable size.
2. Convert it to a pie chart
3. Make it vertical (this is the one we choose)
4. The filament group approach (choosing the fields that you want to see)
5. Pretty similar to 3