Hacker News Reader

Comment by ourmandave | Hacker News Reader

Create solid markup, uncluttered by additional elements that the past tells you that you need. Design your site using what Grid and other new methods have to offer. Then look at how you deal with the browsers without support, by serving them something slightly simpler.

Perhaps a fallback like, oh I dunno, <TABLES>?!

View on HN

That wouldn't work because it would rely on markup although display: table is pretty handy as a fallback for small UI elements in particular.

The grid (and flexbox) specifications define how fallbacks should work, making it pretty straightforward to create good - not identical (because what would be the point?) experiences for the browsers you need to support.

So, for example with display: table which generates anonymous boxes, the spec defines that box generation won't happen.

I detailed a bunch of this stuff here: https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

Tables don't work in a world that requires responsive layout. I don't want to be pinching and zooming all over the place to read content on a handheld device.

At least with tables you can view all the content and you can zoom in. There are many botched sites now where on some devices you can't scroll, or can't scroll far enough to even see all the content, or can't zoom in far enough to read it.

That's an argument against botched sites (or, for good css), NOT an argument for tables.

HN is one of the most mobile-friendly sites I visit and it's still table-based.

  just wait until someone quotes someone and you have to scroll all the way over here ---->

Because this is not quote, but code block.

Or when the nesting gets deep and you have about 3 words per line ... or you're trying to visually identify the comment hierarchy.

It also doesn't really have much along the lines of a "responsive layout" in the sense of one that changes (outside of scaling) with different browser sizes/shapes. (But the typical clean forum also doesn't really need one, so using "outdated" tech is fine. CSS Grid is nice because it allows to do things that weren't (easily) done before, but not everybody wants or needs them)

Then you visit some very unfriendly sites.

The only part of HN that is remotely easy to read on mobile are the homepage/etc list pages, which recently became slightly better to read sometimes (I don't know why but the new mobile-friendly scaling doesn't always kick in).

Those pages have zero need for a table based layout - they're vertical lists of stuff.

The comments threads are honestly terrible to read on mobile.

Hacker News is a single column. That's the simplest layout to build using CSS. It really doesn't need tables or grid layouts.

Pinching and zooming is very underrated. I like it better than scrolling and digging through hidden menus.

Responsive design isn't about hidden menus.

At its most basic, it's just reflowing content to fit the given viewport width.

You lost that battle 15 years ago, and rightly so.

Jeez, I'm like a 150 in internet years (or 1,500 in JS framework years). crumbles into neatly stacked dust

That's a very modern approach for someone 1,500 years old ;D

crumbles[1] into[2] neatly[3] stacked dust[4]

[1] https://www.npmjs.com/package/crumbles

[2] https://github.com/sindresorhus/into-stream

[3] https://www.npmjs.com/package/neatly

[4] https://github.com/linkedin/dustjs

It really is 1999 again. I shudder at the days of design patterns that utilized nested tables.

Tables seem better than Grid, because of vertical alignment, too bad they don't have wrapping.

Grid has alignment: https://rachelandrew.co.uk/css/cheatsheets/box-alignment

Reply on news.ycombinator.com