Hacker News Reader

Comment by sixQuarks | Hacker News Reader

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.

View on HN

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.

> 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/

The main takeaway is that small screens just aren't good for certain things, like comparing large data sets.

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.

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

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

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.

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...

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.

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

Reply on news.ycombinator.com