12

I am interested in what the best practice is to pack a table from web (desktop size) to mobile.

I got the table done on desktop, but need to pack it on mobile. I understand that something should be fixed, whether the top with Roles, or left side with Stages. There are 11 stages, and 4 roles. I need to pack it to a 320px wide artboard with 16px margins. The table is pretty tall so that is the issue.

Here it is:

enter image description here

Improve this question
2

4 Answers 4

Reset to default
20

The natural orientation of a smartphone is portrait, and the natural scroll direction is down, creating a view which is very narrow compared to its possible length. If your table doesn't fit, you could consider either

  • nudging the user to rotate their device to landscape, so that you have more width to work with
  • switch the orientation of your table (roles on the vertical axis, and stages on the horizontal axis) and indicate they have to scroll horizontally

Another idea would be not to use a matrix, but present every stage as 'cards'. That way, you do lose the benefit of seeing what is required for a specific role throughout the project. It would look something like this:

Stage 1

Your role
text

Employee role
more text

Manager role
more text

CEO role
more text

Stage 2

Your role
text

Employee role
more text

...

Improve this answer
2
  • The natural orientation of some smartphones is portrait. Most are happy to work either way, and some others are only usable in landscape.
    – gidds
    May 10, 2020 at 15:32
  • If you mean 90% by 'some', then yes. All studies point out the majority of smartphone users are using portrait: scientiamobile.com/… That's what I meant by natural.
    – Glorfindel
    May 10, 2020 at 15:37
6

I agree with @glorfindel's answer. Ideally, you need to know how your users want to see the information and then turn either the cells of every column or the cells of one row into something that looks more like a card or even an accordion if that meets user needs.

Have a look at this link: https://medium.com/appnroll-publication/5-practical-solutions-to-make-responsive-data-tables-ff031c48b122

The solution am talking about is the "transformed" but there is a big chance something else is more appropriate to your needs.

Improve this answer
1
  • The "comparing" option in that link looks applicable too.
    – Joooeey
    May 9, 2020 at 15:30
3

I try to go with cards if possible. You can usually lay out the info with clear hierarchy to help users digest info in a logical way, and sometimes it is possible to omit column labels for certain information. In some instances it isn't feasible and I agree trying to prompt user to flip to landscape so you have more horizontal room for columns. You may also consider flipping axes on the grid (make rows columns and columns rows if it allows you to present the data in a more user friendly manner. The other issue you may run into with a grid on mobile is the need for both horizontal and vertical scrolling which isn't great. Also consider frozen columns – grids are useful because they allow the user to compare one data point across many rows easily; if this is the main goal of your grid and you can determine what column(s) are most used for this comparison, then it will determine if you should freeze a column and make other info visible with the secondary action (like scrolling horizontally).

Improve this answer
1
  • +1 For suggesting to show only the columns that users want to compare. But besides showing the two most important columns by default, it is also a good idea to let users choose which two columns to compare.
    – jazZRo
    May 11, 2020 at 11:55
0

Use the HTML5 table with bootstrap will will look your table good...as far as the height goes.. give height to your table ..and give css rule as overflow auto which will apply a vertical scroll bar ... The table will be responsive in mobile view also... You may be using some media queries for it...

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.