6 ms·

In case you're wondering: there's more to the article if you scroll horizontally, I won't comment on the irony of the thing.

charles_f 5y ago
Also ironic, the justified text alignment, huge font and large padding which leaves room for 3 unreadable words per line on mobile.
tedmiston 5y ago
To save some awkward scrolling: https://outline.com/mhWdLS https://outline.com/mhWdLS.
WorldMaker 5y ago
Or shrink to mobile size or use your browser's Reader View. Horizontal scrolling multi-column was a weird aesthetic choice based on personal preference (despite bad and growing worse browser support, sigh), but it's a personal blog and as "a 90s web kid" I strongly believe weird aesthetic choices are what makes blogs personal and not just another walled garden like most of social media (or Medium).
- ebruchez 5y ago
  I intend the following as friendly feedback. Personal is fine but that doesn't have to imply impossible to use. The main problem is that it's not discoverable, at least on MacOS where there are no scrollbars. I found the horizontal scrolling by chance after trying every key on the keyboard. In the meanwhile I had already scanned the article using the Reader mode in Safari.
  - WorldMaker 5y ago
    Personally, I think that a UX bug on Apple's side that they lost scrollbars and any hint of "more to see". As an iOS and iPadOS user I get so frustrated every time I discover a thing scrolls that wasn't obvious. I have observed that almost every iOS/iPadOS user (mostly subconsciously) "twitches" constantly over apps trying to find things that scroll. I wish Apple would provide at least something of a better user experience here. This is also one of the things where I'm disappointed that browser support for multi-column has only grown worse over time rather than better: I tried to intentionally set it so that there would be at least some next column "bleed through" horizontally in CSS and that (mostly) worked when I built the CSS theme but WebKit, Blink, and Firefox all moved to implementations that always balance columns evenly in viewport space rather than what the CSS specifically asks for. (And Edge Classic died, the one browser that really cared about good multi-column experiences.)
    - toomanydoubts 5y ago
      I get this issue on Android Chrome when using the "Desktop Site" version. Personally, I believe the UX problem is with the website. You seem to be aware of the problem and yet decided to keep a broken version. That's a UX decision made by you. The web is top-to-bottom, every user has this expectation. The usual mouse has a top-to-bottom scroll wheel, not a left-to-right one. Maybe it's not what you want, but it is what it is. You can either accept that fact and use a top-bottom layout, or accept the fact that you made a deliberate decision to create a confusing UX.
      - WorldMaker 5y ago
        I stated several comments up directly in this chain that a confusing UX on my personal blog was a deliberate decision. I stand by that. I also point out that I tried to add affordances to make it easier to use and was stymied by bad browser support getting worse. I haven't updated this CSS in a while, because I haven't felt like I needed to, but the way the browsers display it in 2021 is actively worse than when I wrote it and I'm sorry about that. I can also at the same time believe that Apple removing scrollbars altogether and not replacing them with some sort of affordance is also a UX crime, whether or not my own decisions that make are worsened because of it were deliberate.
        toomanydoubts 5y ago
        Well, it's good to see that you accept its your own decision, given the circumstances, that made it what it is. If you're set on that, maybe you could try adding a really unmistakable indicator such as a "Scroll right for more ->" text. I'm not sure if that's good as I'm not a UX/UI designer, but probably better than nothing. Still, as a user, a would prefer something that I'm used to, such as top-down text.
        WorldMaker 5y ago
        When I wrote this CSS the columns themselves were supposed to do that and supposed to "peek" across the edges. Browsers decided to take a different, worse layout approach to multi-column and broke my intended CSS affordances. There wasn't intended to be "nothing". Just time and tech debt.
- LarrySellers 5y ago
  Unfortunately it makes them inaccessible in this case, I wouldn't even know how to scroll sideways unless you actually expect a user to click and drag a scrollbar. Even if the site was usable the the text is still illegible.
  - WorldMaker 5y ago
    Yeah, I wish I had scroll wheel support again. The CSS for that was never standardized and the browsers that supported it no longer exist and most of the JS-based solutions are a bit more lacking than I would prefer. I've been tracking it for a while: https://github.com/WorldMaker/lcars-moderne/issues/1 https://github.com/WorldMaker/lcars-moderne/issues/1
- dentemple 5y ago
  The first section just needs a little note that the user needs to scroll horizontally to continue. Certain browsers make it completely non-obvious that you have to do so to see more content, and it's no longer "intuitive" UX for most users.
- Alex3917 5y ago
  I'd agree with you if hitting the spacebar or the arrow keys made it scroll over a full page. But honestly this is pretty ridiculous.
- kevin_thibedeau 5y ago
  The 90's web was broken with bad assumptions about the viewport for what was supposed to be a flexible layout engine. This is no different that hardcoding for 640x480 and making everyone else suffer.
- halfeatenpie 5y ago
  I see your point and that's up to you. But I do think factoring in the end user's experience is important here if you want them to listen to your argument. You're trying to sell someone that your idea is right, but having the desktop experience be a bit difficult (and putting it on the end user to deal with it) doesn't really help you in communicating your points. It also makes it harder for them to digest your content, therefore people might just skip over it. But again, it's a personal blog so all these decisions are up to you and your liking!
  - WorldMaker 5y ago
    I appreciate that and tried to compensate for some of the trade-offs with the CSS available at the time. CSS that the browsers seem intent on not supporting and maybe dropping. I do find upsetting that I end up having to apologize a lot for trying to do some things that I thought were fun/unique/unusual/personal touches and the browsers just getting worse about it with passing years rather than better. It is interesting how many of these comments have fallen into style of substance fallacy over the contents of the arguments themselves, and I am listening to all of this feedback. This current CSS was designed to make 90s kid me happy, primarily on "Edge Classic". It's not aged as well as I would have liked, and I don't know if/when I'll revisit it, but I am listening.
    - tarboreus 5y ago
      You know what? Keep it. It's weird but I think that makes it cool. Don't get demoralized. Everyone is boring today. If this was a business or something I'd say ditch it and make your website have Bootstrap or whatever least common denominator thing. It's not, it's your place to express yourself, so don't let wet blankets ruin your site for you. Here's two other weird sites just to keep up your morale. https://slimedaughter.com/ https://slimedaughter.com/ http://art.teleportacia.org/olia.html http://art.teleportacia.org/olia.html
    - deleted 5y ago
      [deleted]
- SahAssar 5y ago
  > I strongly believe weird aesthetic choices are what makes blogs personal and not just another walled garden like most of social media (or Medium). Sure, but in this case the choice also strongly sacrifices usability. Even on non-MacOS desktop firefox I didn't know there was more to the article before reading the parent comment. If you want people to read more of the article then perhaps make it easier to find out that there is more of it.
riidom 5y ago
Admittedly I like the column-based layout. Just the scrolling should work via mouse wheel and stop at whole columns. Not sure if I would want this on every website I visit, but it's a nice change. At least it doesn't scream "materialize!" or "bootstrap!" :)
- WorldMaker 5y ago
  I still think it is a shame that Microsoft's proposed scroll-translation CSS still hasn't made it into the CSS multi-column standard (and also didn't survive Edge Classic to Chromium Edge shift either). It's been on my backlog for a while to find a good JS replacement but haven't been happy with the ones I've tested: https://github.com/WorldMaker/lcars-moderne/issues/1 https://github.com/WorldMaker/lcars-moderne/issues/1
nimih 5y ago
If you make your window small enough to hit the tablet/mobile breakpoint, it collapses into a vertical layout, which is much more pleasant. I honestly cannot fathom what would possess a person to make horizontally scrollable columns like this, since it's both difficult to use and introduces novel typographical defects such as widows and orphans.
- itronitron 5y ago
  While the horizontal scroll isn't immediately obvious I found it easy and enjoyable to use as I can just start reading at the top of the next page instead of concentrating on not losing my place during a vertical scroll. Also, if a typographical defect has a name (widows and orphans) can it truly be novel?
  - WorldMaker 5y ago
    There is a JS library script tag on the site to try to correct the worst widows/orphans and some other typographic defects. It's after body load so as not to slow time to first paint and I don't think all browsers correctly readjust multi-column layout after its corrections/adjustment. The caniuse statistics for CSS native support for widows/orphans correction is much better today than when I last worked on this CSS file: https://caniuse.com/css-widows-orphans https://caniuse.com/css-widows-orphans
  - nimih 5y ago
    Novel to web pages, is what I meant. Software such as TeX and MS Word have a considerable array of (sometimes quite complicated!) tools for dealing with such things, and the absence of such concerns from web development was something that I had never really thought specifically about until seeing a heading appear right before a column break on this article, followed by an orphan in the next one.
YetAnotherNick 5y ago
Missed chance to use "In case someone doesn't know it, ..."
hodgesrm 5y ago
Thanks, I would have missed that completely without your comment.
earthboundkid 5y ago
If the author is out there: Add scroll snap to the text box! Without it, you're constantly misaligned, making it hard to read. Scroll snap is one of those great new CSS properties that makes thing that used to be hard easy.
- jonny_eh 5y ago
  or… I dunno… vertical scrolling like literally every other web page?
- WorldMaker 5y ago
  I've considered that, but I feel scroll snap is actually the opposite of the intended affordance for what I was going for. I don't want the scroll to be exact. I want columns to peek out just a little bit in either direction in a "more to see" way. (I had that for a while with this CSS but browsers dropped some support for it.)
  - spcebar 5y ago
    There's not a bit of paragraph peaking in, there's a bit of the paragraph off screen, so to get everything in the paragraph I have to scroll right and then left whenever I get to the end of a line.

charles_f 5y ago

Also ironic, the justified text alignment, huge font and large padding which leaves room for 3 unreadable words per line on mobile.

tedmiston 5y ago

To save some awkward scrolling: https://outline.com/mhWdLS https://outline.com/mhWdLS.

WorldMaker 5y ago

Or shrink to mobile size or use your browser's Reader View. Horizontal scrolling multi-column was a weird aesthetic choice based on personal preference (despite bad and growing worse browser support, sigh), but it's a personal blog and as "a 90s web kid" I strongly believe weird aesthetic choices are what makes blogs personal and not just another walled garden like most of social media (or Medium).

ebruchez 5y ago
I intend the following as friendly feedback. Personal is fine but that doesn't have to imply impossible to use. The main problem is that it's not discoverable, at least on MacOS where there are no scrollbars. I found the horizontal scrolling by chance after trying every key on the keyboard. In the meanwhile I had already scanned the article using the Reader mode in Safari.
- WorldMaker 5y ago
  Personally, I think that a UX bug on Apple's side that they lost scrollbars and any hint of "more to see". As an iOS and iPadOS user I get so frustrated every time I discover a thing scrolls that wasn't obvious. I have observed that almost every iOS/iPadOS user (mostly subconsciously) "twitches" constantly over apps trying to find things that scroll. I wish Apple would provide at least something of a better user experience here. This is also one of the things where I'm disappointed that browser support for multi-column has only grown worse over time rather than better: I tried to intentionally set it so that there would be at least some next column "bleed through" horizontally in CSS and that (mostly) worked when I built the CSS theme but WebKit, Blink, and Firefox all moved to implementations that always balance columns evenly in viewport space rather than what the CSS specifically asks for. (And Edge Classic died, the one browser that really cared about good multi-column experiences.)
  - toomanydoubts 5y ago
    I get this issue on Android Chrome when using the "Desktop Site" version. Personally, I believe the UX problem is with the website. You seem to be aware of the problem and yet decided to keep a broken version. That's a UX decision made by you. The web is top-to-bottom, every user has this expectation. The usual mouse has a top-to-bottom scroll wheel, not a left-to-right one. Maybe it's not what you want, but it is what it is. You can either accept that fact and use a top-bottom layout, or accept the fact that you made a deliberate decision to create a confusing UX.
    - WorldMaker 5y ago
      I stated several comments up directly in this chain that a confusing UX on my personal blog was a deliberate decision. I stand by that. I also point out that I tried to add affordances to make it easier to use and was stymied by bad browser support getting worse. I haven't updated this CSS in a while, because I haven't felt like I needed to, but the way the browsers display it in 2021 is actively worse than when I wrote it and I'm sorry about that. I can also at the same time believe that Apple removing scrollbars altogether and not replacing them with some sort of affordance is also a UX crime, whether or not my own decisions that make are worsened because of it were deliberate.
      - toomanydoubts 5y ago
        Well, it's good to see that you accept its your own decision, given the circumstances, that made it what it is. If you're set on that, maybe you could try adding a really unmistakable indicator such as a "Scroll right for more ->" text. I'm not sure if that's good as I'm not a UX/UI designer, but probably better than nothing. Still, as a user, a would prefer something that I'm used to, such as top-down text.
        WorldMaker 5y ago
        When I wrote this CSS the columns themselves were supposed to do that and supposed to "peek" across the edges. Browsers decided to take a different, worse layout approach to multi-column and broke my intended CSS affordances. There wasn't intended to be "nothing". Just time and tech debt.
LarrySellers 5y ago
Unfortunately it makes them inaccessible in this case, I wouldn't even know how to scroll sideways unless you actually expect a user to click and drag a scrollbar. Even if the site was usable the the text is still illegible.
- WorldMaker 5y ago
  Yeah, I wish I had scroll wheel support again. The CSS for that was never standardized and the browsers that supported it no longer exist and most of the JS-based solutions are a bit more lacking than I would prefer. I've been tracking it for a while: https://github.com/WorldMaker/lcars-moderne/issues/1 https://github.com/WorldMaker/lcars-moderne/issues/1
dentemple 5y ago
The first section just needs a little note that the user needs to scroll horizontally to continue. Certain browsers make it completely non-obvious that you have to do so to see more content, and it's no longer "intuitive" UX for most users.
Alex3917 5y ago
I'd agree with you if hitting the spacebar or the arrow keys made it scroll over a full page. But honestly this is pretty ridiculous.
kevin_thibedeau 5y ago
The 90's web was broken with bad assumptions about the viewport for what was supposed to be a flexible layout engine. This is no different that hardcoding for 640x480 and making everyone else suffer.
halfeatenpie 5y ago
I see your point and that's up to you. But I do think factoring in the end user's experience is important here if you want them to listen to your argument. You're trying to sell someone that your idea is right, but having the desktop experience be a bit difficult (and putting it on the end user to deal with it) doesn't really help you in communicating your points. It also makes it harder for them to digest your content, therefore people might just skip over it. But again, it's a personal blog so all these decisions are up to you and your liking!
- WorldMaker 5y ago
  I appreciate that and tried to compensate for some of the trade-offs with the CSS available at the time. CSS that the browsers seem intent on not supporting and maybe dropping. I do find upsetting that I end up having to apologize a lot for trying to do some things that I thought were fun/unique/unusual/personal touches and the browsers just getting worse about it with passing years rather than better. It is interesting how many of these comments have fallen into style of substance fallacy over the contents of the arguments themselves, and I am listening to all of this feedback. This current CSS was designed to make 90s kid me happy, primarily on "Edge Classic". It's not aged as well as I would have liked, and I don't know if/when I'll revisit it, but I am listening.
  - tarboreus 5y ago
    You know what? Keep it. It's weird but I think that makes it cool. Don't get demoralized. Everyone is boring today. If this was a business or something I'd say ditch it and make your website have Bootstrap or whatever least common denominator thing. It's not, it's your place to express yourself, so don't let wet blankets ruin your site for you. Here's two other weird sites just to keep up your morale. https://slimedaughter.com/ https://slimedaughter.com/ http://art.teleportacia.org/olia.html http://art.teleportacia.org/olia.html
  - deleted 5y ago
    [deleted]
SahAssar 5y ago
> I strongly believe weird aesthetic choices are what makes blogs personal and not just another walled garden like most of social media (or Medium). Sure, but in this case the choice also strongly sacrifices usability. Even on non-MacOS desktop firefox I didn't know there was more to the article before reading the parent comment. If you want people to read more of the article then perhaps make it easier to find out that there is more of it.

riidom 5y ago

Admittedly I like the column-based layout. Just the scrolling should work via mouse wheel and stop at whole columns. Not sure if I would want this on every website I visit, but it's a nice change. At least it doesn't scream "materialize!" or "bootstrap!" :)

WorldMaker 5y ago
I still think it is a shame that Microsoft's proposed scroll-translation CSS still hasn't made it into the CSS multi-column standard (and also didn't survive Edge Classic to Chromium Edge shift either). It's been on my backlog for a while to find a good JS replacement but haven't been happy with the ones I've tested: https://github.com/WorldMaker/lcars-moderne/issues/1 https://github.com/WorldMaker/lcars-moderne/issues/1

nimih 5y ago

If you make your window small enough to hit the tablet/mobile breakpoint, it collapses into a vertical layout, which is much more pleasant. I honestly cannot fathom what would possess a person to make horizontally scrollable columns like this, since it's both difficult to use and introduces novel typographical defects such as widows and orphans.

itronitron 5y ago
While the horizontal scroll isn't immediately obvious I found it easy and enjoyable to use as I can just start reading at the top of the next page instead of concentrating on not losing my place during a vertical scroll. Also, if a typographical defect has a name (widows and orphans) can it truly be novel?
- WorldMaker 5y ago
  There is a JS library script tag on the site to try to correct the worst widows/orphans and some other typographic defects. It's after body load so as not to slow time to first paint and I don't think all browsers correctly readjust multi-column layout after its corrections/adjustment. The caniuse statistics for CSS native support for widows/orphans correction is much better today than when I last worked on this CSS file: https://caniuse.com/css-widows-orphans https://caniuse.com/css-widows-orphans
- nimih 5y ago
  Novel to web pages, is what I meant. Software such as TeX and MS Word have a considerable array of (sometimes quite complicated!) tools for dealing with such things, and the absence of such concerns from web development was something that I had never really thought specifically about until seeing a heading appear right before a column break on this article, followed by an orphan in the next one.

YetAnotherNick 5y ago

Missed chance to use "In case someone doesn't know it, ..."

hodgesrm 5y ago

Thanks, I would have missed that completely without your comment.

earthboundkid 5y ago

If the author is out there: Add scroll snap to the text box! Without it, you're constantly misaligned, making it hard to read. Scroll snap is one of those great new CSS properties that makes thing that used to be hard easy.

jonny_eh 5y ago
or… I dunno… vertical scrolling like literally every other web page?
WorldMaker 5y ago
I've considered that, but I feel scroll snap is actually the opposite of the intended affordance for what I was going for. I don't want the scroll to be exact. I want columns to peek out just a little bit in either direction in a "more to see" way. (I had that for a while with this CSS but browsers dropped some support for it.)
- spcebar 5y ago
  There's not a bit of paragraph peaking in, there's a bit of the paragraph off screen, so to get everything in the paragraph I have to scroll right and then left whenever I get to the end of a line.