Hacker News Reader

Comment by otikik | Hacker News Reader

Website width isn’t calculated correctly for mobile and you need to scroll left and right in order to read the text. I was doing that right after reading

> i have very high and unusual standards,

Which was kind of funny TBH :)

View on HN

Because it's not a text organised into sections, paragraphs and whatnot with html, it's just a plain text file rendered into one big paragraph with whitespace set to `pre` ¯\_(ツ)_/¯.

`white-space: pre-wrap` is the solution to this. It's pre, but with wrapping when it's needed :)

cc @j3s (I wonder if this even works here), here's your line breaks fix :)

(assuming that since HN is mentioned in git repo [0] for the site, the author does read this occasionally)

[0] https://git.j3s.sh/j3s.sh

It's arguable whether this is better or worse, because now you'll have the text wrapping where needed _but also_ again where it would have on a wider viewport, even though it already wrapped. So on mobile you'll have a full line, then half a line, then a full line, then half a line, and so on, wrapping alternatingly at the natural edge of the viewport, and again at the original line end terminated by a line break.

It probably changes from person to person, but while I find wrapping like that harder to read than seeing it all normally, for code it is still much better than scrolling back and forth for every line.

Also there is 0 formatting with the safari reader which is likewise impressive.

I’ve often seen _weird_ formatting, but _zero_ formatting is a new one for me.

Firefox Mobile reader mode fixed it, so in practice only as inconvenient as tapping one button. Still not a good first impression.

In iOS reader, the line width was fixed, but there were still no paragraphs.

Thank God for that

Using Firefox Mobile reader mode turns the page into one, continuous brick of text. No way of discerning sections, lists, or anything since no newlines seems to work. I might have missed something, but that ain't a fix. I'd prefer scrolling sideways.

You get exactly the same result if you look at it with an actual text browser such as lynx. One giant brick of text...

The author’s reasoning and not building for the platform are at odds. I don’t get it.

Thought the same. Good they are proud of themselves, tho. I'll just not read what they have to say.

The crucial viewport meta element is included though:

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Likely copypasta.

Not just mobile, it's doing the same thing on my 30" desktop monitor

Desktop view in both Firefox and Chrome seem to work for viewing the full text without horizontal scroll, at least here.

I had this even on desktop Firefox.

> i have very high and unusual standards,

Proper capitalization of letters didn't make the cut either.

I found that scrolling left and tight to read the text was fairly usable.

If it fit the screen that would be better, but I’ve seen worse failure modes.

In what world is that “usable”? I mean sure it technically works, but the usability of it is horrible.

That classic definition of "usable" we know and love: "I've seen worse"

Something like ‘in the land of the blind the oney eyed man is king’ or some such?

Not catering to mobile could be construed as a part of the owner's values :)

I certainly think that "mobile first" was a mistake that got everyone addicted, and made kids oblivious about tech.

> I certainly think that "mobile first" was a mistake

But I think it was very intentional

There's a big difference between "mobile first" and "mobile hostile" (even if the hostility is unintentional). Here, for example, the website is just 10-15 characters too wide on mobile, regardless of orientation. It forces you to scroll left and right constantly just to read the lines. And regardless of orientation actually feels hostile, if I flip my phone to landscape, the font size increases and thus I still can't read the whole line.

I agree that designing for mobile first is annoying for the web in general. But... This is text! Most of the website is text, and it doesn't wrap or resize properly for a small screen.

Here, it's likely just a bug with the window width calculation, not a "mobile first" argument.

If a website is 99% text and it can't be read from every screen size from a phone to an ultrawide monitor... Than it's a bug, not a design choice.

Counter argument: content is mostly consumed on mobile device nowadays, why should I require users scroll horizontally to keep reading and in doing so losing focus of the actual row? “Mobile first” was a more of a methodology, aka start designing from the small device and going up. And this website clearly failed at keep me reading from my mobile device. While I don’t necessarly think “mobile first” was a mistake, I believe today an adaptive layout it’s a more appropriate methodology for the existance of a ton of different devices, screens, ratios and pixel density. Like most websites still sucks on my 32’’ external monitor, it’s not a mobile only problem

Counter-counter argument: A person creating a personal homepage has no obligation to cater to any particular audience. See, for example, jwz.org [NSFW when linked from here, very much on purpose]

> Counter-counter argument: A person creating a personal homepage has no obligation to cater to any particular audience.

That’s irrelevant. Most of the Web users are using mobiles, so if you decide to set a website up, the very basic thing is to ensure it’s readable on mobile. And since plain HTML is already readable on any device by default, it would be quite strange to voluntarily make it unusable on these devices.

The mobile crowd may not be your desired or intended audience though. It's fine to publish a website in Icelandic even if more people could read it in English.

Countee-counter-counter argument:

You are right that nobody is beholden to creating pages that can be viewed on any device. However, it is not unreasonable to say that a person has mismatched interests when they say they care a lot about quality, interoperability and values in general, but then don't care about making the document explaining this viewable on most devices.

Yes, ultimately it's not important. But if you only publish your website using Gopher, at some point you have to accept that you're interested by making cool things rather than the other things mentioned.

"Mobile first" means that the design is accessible on all devices and resolutions. Traditionally websites would be built primarily for large displays, and a separate mobile version would be tacked on, if the authors cared about those users.

In 2023, there's no technical reason websites should be inaccessible on any device. Doing so intentionally is needlessly user-hostile.

A lot of these supposed mobile first designs are barely usable on desktop, no working scroll bar, hamburger menus, etc.

This is a very first-world opinion. Low-end (second hand) smartphones are some of the only available computing devices available for a large part of the world.

All that's needed for a blog site to be mobile-friendly is to just not actively break it. Plain html articles with no css read great on mobile, e.g. http://motherfuckingwebsite.com/

That website contains

    <meta name="viewport" content="width=device-width, initial-scale=1">

So does the OP's website.

There is a difference between not being focused on mobile and deliberately making your website unreadable on mobile.

Reply on news.ycombinator.com