41–50 of 74 posts
Interesting read, but why no JS? Don't all mobile devices play well with JS? Is it a file size issue?
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,…
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. 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,…
The problem was that there is no way to reliably have the responsive styles kick in with CSS alone. You need to know how wide that table is on the page to know when it needs to respond. At his shortfall of CSS (and others) has driven me to create a CSS polyfill to add Element Query support to CSS so I finally can build tables that are responsive wherever they display. My plugin is available at http://elementqueries.com but I haven't had a chance to apply it to tables yet
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,…
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 w…
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,…
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.
This solution is pure love! Any idea about the license? It doesn't appear to say anywhere and I would love to add it to Picnic CSS as a plugin (developer here).