Comment by ray_v

5 days 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-d...

22 comments

ray_v

Reply
satvikpendem  5 days ago

Never read a newspaper?

  • netsharc  5 days 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  4 days 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.

meesles  5 days 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.

jlaternman  5 days 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.

  • snackbroken  5 days 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

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

    • atoav  5 days ago

      Well not all content is meant to be read in order. A layout like this is good for content where you want to incentivise users to read in whichever order you like. So if the order is confusing you, chances are there wasn't meant to be any order at all. E.g. if you search google images google guesses some relevant order for you, but it is layed out in a dense way so you can scan with your eyes and decide which thing is most relevant for you. Whether you scan the screen left-right, top-down, randomly, bottom up, or ehatever is totally your choice.

      Using such a layout for a novel or something like this would be really bad UX. But using it for an image gallery? Or a series of random articles that aren't priorized? Why not?

    • zozbot234  5 days ago

      > Columnar layout is FUNDAMENTALLY BROKEN on media that doesn't have two fixed-size axes.

      You can use plain old CSS columns (which don't have the automated "masonry" packing behavior of this new Grid layout, they just display content sequentially) and scroll them horizontally. But horizontal scrolling is cumbersome with most input devices, so this new "packed" columnar layout is a good way of coping with the awkwardness of vertical scrolled fixed-width lanes.

    • satvikpendem  5 days 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).

      5 replies →