4 ms·

A table that looks good on mobile and desktop

55 points by andrewfromx 3y ago

dvh 3y ago
It overflows right on WebView (non chrome) Android browsers. Update: On chrome too, my window.innerWidth=360
- Jaxan 3y ago
  On iOS too. I have to scroll sideways to read it all, although there is a lot of white space.
- andrewfromx 3y ago
  not the table part right? Just the html explanation below it? Yeah I need to fix that.
kelvie 3y ago
This really needs to be a userscript (if possible), does anyone know a way to run javascript helpers like this on Chrome on Android without going to a completely different browser that supports it straight-up (like firefox?)
- LordDragonfang 3y ago
  Could you inject it as a bookmarklet? If not, you could probably just paste it into Eruda (https://eruda.liriliri.io/ https://eruda.liriliri.io/)
putzdown 3y ago
This would be more convincing if the table looked good on mobile. On iOS, anyway, it is too wide for the page and wants horizontal scrolling to read the full title and table.
- noman-land 3y ago
  Same here on Firefox Android.
andrewfromx 3y ago
ok if you refresh, I think I fixed the issue with horizontal scroll. It was the <pre> tags for the code samples.
xnx 3y ago
Full-width tables require extra eye scanning. Auto-width is better most of the time. I don't mind having to scroll a table if it doesn't fit in the view. Scrolling is better than trying to mentally piece together the rows and columns. As in a lot of areas, less fussing with styles/CSS is better.
- LeifCarrotson 3y ago
  It completely depends on what you want to do with the information in the table. Yeah, it's marginally more strain on your eyeballs to track some 30 degrees across your field of view than glancing back and forth, but that only matters if you're reading every single value from left to right, row by row. It's extremely common to want to also compare values from top to bottom, column by column - or even just one particular column, known only to the reader. That's the whole point of a 2D table. It's one thing for an e-reader to have an option to flow longform text across multiple columns for that one guy with a 5120 x 2160 monitor who chooses to view the text in full-screen, another to apply "too wide is bad" everywhere. In particular, this looks stupidly blank in landscape mode on my 21:9 smartphone. Toggling Firefox to "Desktop Mode" shows it easily fits in that orientation.
noman-land 3y ago
You need to test with very long occupation names. How do these tables break text?
- andrewfromx 3y ago
  oh i left it out of the example to keep it simple but there is: https://github.com/andrewarrow/a-table-that-looks-good-on-mobile-and-deskto/blob/27d4a501b6550cbb49e100a092bd0555c29db25e/views/_table_large.html#L16 https://github.com/andrewarrow/a-table-that-looks-good-on-mo... {{ $wrap := "whitespace-nowrap" }} and I set: colAttributes := map[int]string{} colAttributes[0] = "w-1/2" https://github.com/andrewarrow/a-table-that-looks-good-on-mobile-and-deskto/blob/27d4a501b6550cbb49e100a092bd0555c29db25e/app/welcome_controller.go#L22 https://github.com/andrewarrow/a-table-that-looks-good-on-mo... to make tailwind handle a column that needs to wrap.
metaphor 3y ago
No thanks. If I need to review a table on mobile, I still much prefer just rotating to landscape, which mobile handles quite well. This very opinionated implementation forces me to switch to desktop mode and rotate to landscape when reaching for pragmatic utility. Surely there's a reasonable usecase, but I really can't think of any tabular data that I regularly review where "tranpose-serialize" would result in a net positive UX.
- supercheetah 3y ago
  I'm not sure what mobile you're using, but on Firefox Mobile on Android, if I rotate it to landscape, the tables turn into regular tables like in desktop mode, but I didn't have to change to desktop mode.
baloki 3y ago
Isn’t this just 2 tables with one hidden at a time?
- mrzimmerman 3y ago
  Definitely. I thought this was going to be a single, semantically correct table that had some fancy use of the display property across the different elements to make them align differently (though that would help with the table headers). I actually think this is probably the more practical approach, though I wonder what screen readers make of the mobile version compared to traversing a normal table structure.
6510 3y ago
I'd go with something like this: name: Zog, Luna, Glimmer, Xylon, Astra age: 150, 200, 75, 300, 120 species: Xenon, Lunarian, Nebulite, Celestial, Stardust home_planet: Zeta-7, Moon, Nebula-9, Alpha Centauri, Polaris language: Zorgon, Lunar, Stellar, Cosmic, Celestial occupation: Astrobiologist, Quantum Physicist, Astroengineer, Interstellar Diplomat, Astroarchaeologist or just rotate the table: name: Zog, Luna, Glimmer, Xylon, Astra age: 150, 200, 75, 300, 120 species: Xenon, Lunarian, Nebulite, Celestial, Stardust home_planet: Zeta-7, Moon, Nebula-9, Alpha Centauri, Polaris language: Zorgon, Lunar, Stellar, Cosmic, Celestial occupation: Astrobiologist, Quantum Physicist, Astroengineer, Interstellar Diplomat, Astroarchaeologist Having to scroll is fine https://jsfiddle.net/ok89bh3j/ https://jsfiddle.net/ok89bh3j/
jasfi 3y ago
Perhaps cards are the answer? The minified table kind of looks like a card. Also, tables are good for scanning for something in a lot of data. Cards don't do that very well.
rajivharlalka 3y ago
Seems more from a fan of extended print in psql.

55 points by andrewfromx 3y ago

dvh 3y ago

It overflows right on WebView (non chrome) Android browsers. Update: On chrome too, my window.innerWidth=360

Jaxan 3y ago
On iOS too. I have to scroll sideways to read it all, although there is a lot of white space.
andrewfromx 3y ago
not the table part right? Just the html explanation below it? Yeah I need to fix that.

kelvie 3y ago

This really needs to be a userscript (if possible), does anyone know a way to run javascript helpers like this on Chrome on Android without going to a completely different browser that supports it straight-up (like firefox?)

LordDragonfang 3y ago
Could you inject it as a bookmarklet? If not, you could probably just paste it into Eruda (https://eruda.liriliri.io/ https://eruda.liriliri.io/)

putzdown 3y ago

This would be more convincing if the table looked good on mobile. On iOS, anyway, it is too wide for the page and wants horizontal scrolling to read the full title and table.

noman-land 3y ago
Same here on Firefox Android.

andrewfromx 3y ago

ok if you refresh, I think I fixed the issue with horizontal scroll. It was the <pre> tags for the code samples.

xnx 3y ago

Full-width tables require extra eye scanning. Auto-width is better most of the time. I don't mind having to scroll a table if it doesn't fit in the view. Scrolling is better than trying to mentally piece together the rows and columns. As in a lot of areas, less fussing with styles/CSS is better.

LeifCarrotson 3y ago
It completely depends on what you want to do with the information in the table. Yeah, it's marginally more strain on your eyeballs to track some 30 degrees across your field of view than glancing back and forth, but that only matters if you're reading every single value from left to right, row by row. It's extremely common to want to also compare values from top to bottom, column by column - or even just one particular column, known only to the reader. That's the whole point of a 2D table. It's one thing for an e-reader to have an option to flow longform text across multiple columns for that one guy with a 5120 x 2160 monitor who chooses to view the text in full-screen, another to apply "too wide is bad" everywhere. In particular, this looks stupidly blank in landscape mode on my 21:9 smartphone. Toggling Firefox to "Desktop Mode" shows it easily fits in that orientation.

noman-land 3y ago

You need to test with very long occupation names. How do these tables break text?

andrewfromx 3y ago
oh i left it out of the example to keep it simple but there is: https://github.com/andrewarrow/a-table-that-looks-good-on-mobile-and-deskto/blob/27d4a501b6550cbb49e100a092bd0555c29db25e/views/_table_large.html#L16 https://github.com/andrewarrow/a-table-that-looks-good-on-mo... {{ $wrap := "whitespace-nowrap" }} and I set: colAttributes := map[int]string{} colAttributes[0] = "w-1/2" https://github.com/andrewarrow/a-table-that-looks-good-on-mobile-and-deskto/blob/27d4a501b6550cbb49e100a092bd0555c29db25e/app/welcome_controller.go#L22 https://github.com/andrewarrow/a-table-that-looks-good-on-mo... to make tailwind handle a column that needs to wrap.

metaphor 3y ago

No thanks. If I need to review a table on mobile, I still much prefer just rotating to landscape, which mobile handles quite well. This very opinionated implementation forces me to switch to desktop mode and rotate to landscape when reaching for pragmatic utility. Surely there's a reasonable usecase, but I really can't think of any tabular data that I regularly review where "tranpose-serialize" would result in a net positive UX.

supercheetah 3y ago
I'm not sure what mobile you're using, but on Firefox Mobile on Android, if I rotate it to landscape, the tables turn into regular tables like in desktop mode, but I didn't have to change to desktop mode.

baloki 3y ago

Isn’t this just 2 tables with one hidden at a time?

mrzimmerman 3y ago
Definitely. I thought this was going to be a single, semantically correct table that had some fancy use of the display property across the different elements to make them align differently (though that would help with the table headers). I actually think this is probably the more practical approach, though I wonder what screen readers make of the mobile version compared to traversing a normal table structure.

6510 3y ago

I'd go with something like this: name: Zog, Luna, Glimmer, Xylon, Astra age: 150, 200, 75, 300, 120 species: Xenon, Lunarian, Nebulite, Celestial, Stardust home_planet: Zeta-7, Moon, Nebula-9, Alpha Centauri, Polaris language: Zorgon, Lunar, Stellar, Cosmic, Celestial occupation: Astrobiologist, Quantum Physicist, Astroengineer, Interstellar Diplomat, Astroarchaeologist or just rotate the table: name: Zog, Luna, Glimmer, Xylon, Astra age: 150, 200, 75, 300, 120 species: Xenon, Lunarian, Nebulite, Celestial, Stardust home_planet: Zeta-7, Moon, Nebula-9, Alpha Centauri, Polaris language: Zorgon, Lunar, Stellar, Cosmic, Celestial occupation: Astrobiologist, Quantum Physicist, Astroengineer, Interstellar Diplomat, Astroarchaeologist Having to scroll is fine https://jsfiddle.net/ok89bh3j/ https://jsfiddle.net/ok89bh3j/

jasfi 3y ago

Perhaps cards are the answer? The minified table kind of looks like a card. Also, tables are good for scanning for something in a lot of data. Cards don't do that very well.

rajivharlalka 3y ago

Seems more from a fan of extended print in psql.