7 ms·

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/up

by ray_v 10mo ago

If I ever encounter, and need to read a webpage with arbitrarily sized and placed grids of text, please somebody just shoot me. https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-demo-dark.png https://webkit.org/wp-content/uploads/Grid-Lanes-newspaper-d...

arewethereyeta 10mo ago
what's your problem?
2cynykyl 10mo ago
Funny, I think that looks gorgeous!
jlaternman 10mo ago
I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.
- deleted 10mo ago
  [deleted]
- snackbroken 10mo ago
  It looks pretty, but fails at basic usability. After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG https://imgur.com/a/0wHMmBG Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".
  - satvikpendem 10mo ago
    > what the fuck am I supposed to read next? What a weird comment. You read whatever you want next, ever read a newspaper? You scan it all and pick the article you are interested in, then read that. I don't understand these comments, they work perfectly well in real life (and fixed size is arbitrary, I can make a super wide or super long newspaper too, the axis size does not affect this sort of layout, see infinite scroll for example, as there is only a fixed amount of content on the screen at any given time).
    - snackbroken 10mo ago
      > You scan it all and pick the article you are interested in Okay. What order am I supposed to scan in so I don't lose my place and accidentally skip a block? Scanning column by column gets me cut off partial boxes that I'll have to remember to check again later, while scanning side to side forces me to keep track of each individual block I've already looked at, as opposed to a single pointer to "this is how far I've scanned". Alternatively, I can scan roughly left to right, top to bottom and just live with missing some blocks. That's not ideal either, because hopefully if you didn't think I'd like to look at all of them you wouldn't have included them on the page. You're right that you can make a newspaper that's really inconvenient to read, but you wouldn't, because the failure case you'd end up with is CSS Grid Lanes.
      - satvikpendem 10mo ago
        This is so funny that I'm not even sure what to say. You can ask your exact questions about a newspaper but somehow 99% of people manage to read them just fine. I think it's just a you problem that you are looking for an exact algorithm on how to scan a page with multiple sizes of content; in reality, people just look over it all and keep track of what they have or haven't looked at all in their heads.
        snackbroken 10mo ago
        In a newspaper the answer is simple. You linearly scan the leftmost column to the bottom of the page, then the next column, then the next, and so on until you get to the end of the page. At no point do you ever need to keep track of anything other than "this is how far I've gotten" to make sure you haven't missed anything. Columnar layout make sense in newspapers because both axes are fixed in size, so all you ever do is one long linear scan with wraparound.
65 10mo ago
NYTimes.com comes to mind...
BowBun 10mo ago
I agree, this seems to violate some of the most fundamental concepts of design like least-surprise and using grouping + alignment to give context to readers.
satvikpendem 10mo ago
Never read a newspaper?
- netsharc 10mo ago
  (Not GP poster.) I don't really have a problem with masonry layouts, but a newspaper is limited by the paper size and they have incentive to squeeze everything in there (to maximize the spread of "information"). The screen is theoretically infinite (although not for kiosks). I do have a website with a lot of images, and at the moment everything is in a 3-across grid layout...
  - satvikpendem 10mo ago
    The screen is infinite but information should still be prioritized, that is why newspapers use different sizes of headings. If they truly wanted to jam everything in there, they'd use the same small font size and save on paper, but that's not what people like because they want to see at a glance what is important and what's not, and that's done by the font size initially. This is no different on an infinite screen, the design principle of information prioritization still holds.
- ray_v 10mo ago
  Yes, I have. Printed, which is fundamentally, and literally a different media type with different properties
  - satvikpendem 10mo ago
    Someone else said the same thing which I addressed here: https://news.ycombinator.com/item?id=46331586#46334242 https://news.ycombinator.com/item?id=46331586#46334242 TLDR: in the user's eyes, a newspaper and this sort of layout are not very different, if the average user can navigate the former for hundreds of years, they can navigate the latter.
    - ray_v 10mo ago
      Ok, but the fact of the matter is that a digital display rendering a webpage and a physical format of a newspaper are fundamentally different media and should be treated as such. A wall of text isn't fundamentally a bad thing, but on a display monitor (or god help you, a cellphone or tablet) that's a terrible user experience.

by ray_v 10mo ago

arewethereyeta 10mo ago

what's your problem?

2cynykyl 10mo ago

Funny, I think that looks gorgeous!

jlaternman 10mo ago

I think this looks great too. Finally replicating the efficiency of newspaper layouts. No enforced symmetry, just content in an optimal space. I want.

deleted 10mo ago
[deleted]
snackbroken 10mo ago
It looks pretty, but fails at basic usability. After reading the top-left block of text titled "Optimizing Webkit & Safari for Spedometer 3.0", what the fuck am I supposed to read next? Am I meant to go recursively column by column, or try to scrutinize pixels to determine which of the blocks are further up than the others, skipping haphazardly left and right across the page? A visual aid: https://imgur.com/a/0wHMmBG https://imgur.com/a/0wHMmBG Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes. Web layouts leave one axis free to expand as far as necessary to fit the content, so there is no sane algorithm for laying out arbitrary content this way. Either you end up with items ordered confusingly, or you end up having to scroll up and down repeatedly across the whole damn page, which can be arbitrarily long. Either option is terrible. Don't even get me started on how poorly this interacts with "infinite scroll".
- satvikpendem 10mo ago
  > what the fuck am I supposed to read next? What a weird comment. You read whatever you want next, ever read a newspaper? You scan it all and pick the article you are interested in, then read that. I don't understand these comments, they work perfectly well in real life (and fixed size is arbitrary, I can make a super wide or super long newspaper too, the axis size does not affect this sort of layout, see infinite scroll for example, as there is only a fixed amount of content on the screen at any given time).
  - snackbroken 10mo ago
    > You scan it all and pick the article you are interested in Okay. What order am I supposed to scan in so I don't lose my place and accidentally skip a block? Scanning column by column gets me cut off partial boxes that I'll have to remember to check again later, while scanning side to side forces me to keep track of each individual block I've already looked at, as opposed to a single pointer to "this is how far I've scanned". Alternatively, I can scan roughly left to right, top to bottom and just live with missing some blocks. That's not ideal either, because hopefully if you didn't think I'd like to look at all of them you wouldn't have included them on the page. You're right that you can make a newspaper that's really inconvenient to read, but you wouldn't, because the failure case you'd end up with is CSS Grid Lanes.
    - satvikpendem 10mo ago
      This is so funny that I'm not even sure what to say. You can ask your exact questions about a newspaper but somehow 99% of people manage to read them just fine. I think it's just a you problem that you are looking for an exact algorithm on how to scan a page with multiple sizes of content; in reality, people just look over it all and keep track of what they have or haven't looked at all in their heads.
      - snackbroken 10mo ago
        In a newspaper the answer is simple. You linearly scan the leftmost column to the bottom of the page, then the next column, then the next, and so on until you get to the end of the page. At no point do you ever need to keep track of anything other than "this is how far I've gotten" to make sure you haven't missed anything. Columnar layout make sense in newspapers because both axes are fixed in size, so all you ever do is one long linear scan with wraparound.

65 10mo ago

NYTimes.com comes to mind...

BowBun 10mo ago

I agree, this seems to violate some of the most fundamental concepts of design like least-surprise and using grouping + alignment to give context to readers.

satvikpendem 10mo ago

Never read a newspaper?

netsharc 10mo ago
(Not GP poster.) I don't really have a problem with masonry layouts, but a newspaper is limited by the paper size and they have incentive to squeeze everything in there (to maximize the spread of "information"). The screen is theoretically infinite (although not for kiosks). I do have a website with a lot of images, and at the moment everything is in a 3-across grid layout...
- satvikpendem 10mo ago
  The screen is infinite but information should still be prioritized, that is why newspapers use different sizes of headings. If they truly wanted to jam everything in there, they'd use the same small font size and save on paper, but that's not what people like because they want to see at a glance what is important and what's not, and that's done by the font size initially. This is no different on an infinite screen, the design principle of information prioritization still holds.
ray_v 10mo ago
Yes, I have. Printed, which is fundamentally, and literally a different media type with different properties
- satvikpendem 10mo ago
  Someone else said the same thing which I addressed here: https://news.ycombinator.com/item?id=46331586#46334242 https://news.ycombinator.com/item?id=46331586#46334242 TLDR: in the user's eyes, a newspaper and this sort of layout are not very different, if the average user can navigate the former for hundreds of years, they can navigate the latter.
  - ray_v 10mo ago
    Ok, but the fact of the matter is that a digital display rendering a webpage and a physical format of a newspaper are fundamentally different media and should be treated as such. A wall of text isn't fundamentally a bad thing, but on a display monitor (or god help you, a cellphone or tablet) that's a terrible user experience.