4 ms·

Changing the table format from rows to "cards" is an ABSOLUTELY TERRIBLE solution. I don't understand why people do this. It's not a table anymore. You can't

Changing the table format from rows to "cards" is an ABSOLUTELY TERRIBLE solution. I don't understand why people do this. It's not a table anymore. You can't easily compare the figures in the columns against each other. The optimal solution, in my opinion, would be if you could specify a viewport width within a section of the site. The browser would then shrink that portion down and the user would see the full table, shrunk down to the width of the browser. The user can then magnify that area to see the data better. Not sure if I'm making sense here. Also, I don't think this is technically possible right now.

bradbatt 12y ago
Totally agree. Why not get rid of some of the extraneous information in the table first? You don’t need MM/DD/YYYY format for every date. You don’t even need the year if you are displaying information for this year, which is probably the most likely in a payments table. So instead of “02/01/2015" and “01/01/2015 - 01/31/2015” use “2/1” and “1/1-31” … or even “Feb 1” and ”Jan 1-31”. I assume that under payments they would normally have some other description other than “Payment #1”, “Payment 2”, etc. - otherwise that is a waste of space as well.
- wallawe 12y ago
  Just for the record, the data and arrangement of the data in the blog post is completely contrived.
jonahx 12y ago
While your criticism of losing the ability to easily compare values across columns is valid, that ability is not relevant for many use cases. This use case -- a list of monthly receipts -- is arguably one of those. Another option here would be to remove less important columns. "Payment #1" seems extraneous. "Period", assuming it is monthly in all cases, could be changed to an abbreviated month name (eg, "Feb"). Now you'd have 3 columns that probably still look okay. As a general solution for a many-columned table on a small device, I disagree that showing the full table and letting me pinch zoom is a good solution. It's a poor user experience, and I appreciate the designer taking the time to think about what my most important needs are and catering my small screen experience to them.
EC1 12y ago
My favourite approach is limiting the width of a table to the point where cells are still readable, and having it wider than the viewport width. Then you can easily drag the table left and right.
wmeredith 12y ago
> Changing the table format from rows to "cards" is an ABSOLUTELY TERRIBLE solution. I don't understand why people do this. It's not a table anymore. You can't easily compare the figures in the columns against each other. This is exactly why OP's solution to this problem is not universally implemented. It's a good solution in a small set of circumstances, but is a terrible idea if you had good justification for the tabular view in the first place. This is all well trodden ground in CSS and UX circles. Here's is the same solution (along with several others) from 2011: https://css-tricks.com/responsive-data-tables/ https://css-tricks.com/responsive-data-tables/ The main takeaway is that small screens just aren't good for certain things, like comparing large data sets.
fiatjaf 12y ago
If you are using a phone you are probably not doing some heavy math with row comparisons.
- teraflop 12y ago
  It's not about "heavy math." On a small-screened device like a phone, information density is more important, not less. This change dramatically reduces the density, so you have to do much more scrolling to see the same amount of information.
- harlanlewis 12y ago
  Add it to the list: if you are using a phone you are probably not... shopping, changing settings, signing up, using all the features, comparing products, reading longform, watching a movie, trying to do your job...
BorisMelnik 12y ago
agree. I would rather pinch zoom so I can compare rows / tables than flip through a bunch of "cards." Must be a Microsoft thing.

bradbatt 12y ago

Totally agree. Why not get rid of some of the extraneous information in the table first? You don’t need MM/DD/YYYY format for every date. You don’t even need the year if you are displaying information for this year, which is probably the most likely in a payments table. So instead of “02/01/2015" and “01/01/2015 - 01/31/2015” use “2/1” and “1/1-31” … or even “Feb 1” and ”Jan 1-31”. I assume that under payments they would normally have some other description other than “Payment #1”, “Payment 2”, etc. - otherwise that is a waste of space as well.

wallawe 12y ago
Just for the record, the data and arrangement of the data in the blog post is completely contrived.

jonahx 12y ago

While your criticism of losing the ability to easily compare values across columns is valid, that ability is not relevant for many use cases. This use case -- a list of monthly receipts -- is arguably one of those. Another option here would be to remove less important columns. "Payment #1" seems extraneous. "Period", assuming it is monthly in all cases, could be changed to an abbreviated month name (eg, "Feb"). Now you'd have 3 columns that probably still look okay. As a general solution for a many-columned table on a small device, I disagree that showing the full table and letting me pinch zoom is a good solution. It's a poor user experience, and I appreciate the designer taking the time to think about what my most important needs are and catering my small screen experience to them.

EC1 12y ago

My favourite approach is limiting the width of a table to the point where cells are still readable, and having it wider than the viewport width. Then you can easily drag the table left and right.

wmeredith 12y ago

> Changing the table format from rows to "cards" is an ABSOLUTELY TERRIBLE solution. I don't understand why people do this. It's not a table anymore. You can't easily compare the figures in the columns against each other. This is exactly why OP's solution to this problem is not universally implemented. It's a good solution in a small set of circumstances, but is a terrible idea if you had good justification for the tabular view in the first place. This is all well trodden ground in CSS and UX circles. Here's is the same solution (along with several others) from 2011: https://css-tricks.com/responsive-data-tables/ https://css-tricks.com/responsive-data-tables/ The main takeaway is that small screens just aren't good for certain things, like comparing large data sets.

fiatjaf 12y ago

If you are using a phone you are probably not doing some heavy math with row comparisons.

teraflop 12y ago
It's not about "heavy math." On a small-screened device like a phone, information density is more important, not less. This change dramatically reduces the density, so you have to do much more scrolling to see the same amount of information.
harlanlewis 12y ago
Add it to the list: if you are using a phone you are probably not... shopping, changing settings, signing up, using all the features, comparing products, reading longform, watching a movie, trying to do your job...

BorisMelnik 12y ago

agree. I would rather pinch zoom so I can compare rows / tables than flip through a bunch of "cards." Must be a Microsoft thing.