Hacker News Reader

Comment by Zealotux | Hacker News Reader

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.

View on HN

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

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.

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

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.

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

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.

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.

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.

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.

> I wish Apple would provide at least something of a better user experience here

But they don't, so its generally our job to work around that and provide sane usability in light of decisions made by larger browsers.

Still doesn't make horizontal scrolling discoverable or a pleasant UX.

I had affordances. Browsers dropped support for them. I'm taking all this feedback in for whenever I have time to next update my personal blog CSS.

Multi-column plays poorly with mobile user agent UX, because the swipe motion made (often with just a thumb) is inaccurate. Works alright if you can reduce it to just the y-axis, but you ask a lot of your end-user on a mobile UA to scroll horizontally also. Flipbook or vertical scroll are the two metaphors that work here.

That having been said, you should be able to tune your stylesheets to vend one that gets users single-column text on mobile devices with some elbow grease. Up to you whether it's worth it.

That's absolutely what this CSS already does and why a suggestion above is to shrink the browser tab width to a "mobile" media breakpoint for vertical scrolling if that is preferred even on wider screens.

My mistake... I had my phone set to "Request desktop sites by default" and forgot!

No complaints from here about the mobile UX.

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.

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.

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.

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!

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.

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/

http://art.teleportacia.org/olia.html

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

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.

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?

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

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.

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!" :)

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

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.

or… I dunno… vertical scrolling like literally every other web page?

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

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.

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

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

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

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

Reply on news.ycombinator.com