Two lines of CSS that will improve HN on mobile (IMO) | Hacker News Reader

Two lines of CSS that will improve HN on mobile (IMO)

tdinh.notion.site

259 pointstrungdq88155 comments

What I really would like to have would be to collapse comment threads via a column that runs the length of the comment thread and is indented like its respective comment.

This way I don't have to scroll to find the comment to collapse its thread, and clicking the column is easier.

This is used in some subreddits in the old Reddit style, e.g. /r/de as can be seen here: https://old.reddit.com/r/de/comments/rcc9us/experten_finden_...

Slashdot has that. Ability to collapse would be enough for me

Hackerdaily [1] has a nice interface for collapsing comments too, though it suffers from the same issue on mobile that the main HN site does. The collapse button just follows you down the page until you are through all of a comment's children, so you can always collapse without scrolling back up.

https://hackerdaily.io/29482351/comments

This is one of the few things where I think the new Reddit is actually a little better. Same basic idea as at your link, but make it so that those guidelines that are running down to the left of the subtree are the thing you click to collapse, instead of having a separate invisible (until you mouse over) collapse column next to the guideline.

The Refined Hacker News extension for Chrome has a “collapse root” button on each comment that I think does what you want.

Note that the extension is also for Firefox (and, I'll attest as well, is great).

+1 for the extension. Been using it since forever on Firefox and Brave.

Link: https://github.com/plibither8/refined-hacker-news

Great extension. Thank you for recommending.

My 5 cents: This makes it way too easy to accidentally collapse threads as the clickable area is hard to tell apart from whitespace. (Speaking from regular and annoying experience with on old.reddit.com.) I, for one, much prefer the HN style buttons.

I did this to toggle all the comments via bookmarklet: https://greptips.hashnode.dev/hacker-news-toggle-comments

I created a quick UserScript that does just this. Hacked together but seems to work well. You can find it here [0][1]

[0] https://gist.github.com/evanreichard/96d89512cbfe23e5d7a8147...

[1] https://i.imgur.com/qGUltI8.png

Very helpful, thanks for sharing! I'm installing it now.

I was going to ask how to install it but figured I should be able to figure it by myself. After a few web searches and reading this Hacker News discussion¹, I installed GreaseMonkey and it was super-easy from there.

Many thanks! It works like a charm.

¹ https://news.ycombinator.com/item?id=22896078

There are lots of interesting HN-specific browser extensions, if you know where to look.

One I came across performs automatic voting. On pageload, it scans for comments starting with "So..." or ending with " lol" and downvotes them. I'm not sure who this is for. "Communication peeves" comes to mind, but doesn't quite fit. I'm don't know what the word is for this.

It would be also very useful to know how "deep" you are into a comment thread.

I know I'm late to the party but this could do what you want: https://greasyfork.org/en/scripts/427429-hacker-news-context... (disclaimer, I made it)

A little bit of UX like this would go a long way towards fixing the problem where the first root comment gets all the activity, because people get sucked in to one of many subthreads as they scroll past.

For me the up- and downvote icons are too close together and I always have to pinch zoom to upvote (I don't downvote often). So prefer a bit more spacing between them.

oops, i just downvoted that by mistake.

I don't see a downvote button...?

not enough karma points.

You can't downvote comments if you have less than 501 karma, and the downvote button doesn't appear on replies to your own comments. Plus, there is no downvote button for stories, just for comments.

EDIT: It originally said "less than 500 karma".

Huh. TIL. It seems I am but a few karma from having a downvote button. Interesting.

https://github.com/minimaxir/hacker-news-undocumented

Thankfully the title bar says “unvote” or “undown” so I can know which one I actually hit.

Not on comments, it just says "unvote" which is extremely unhelpful.

I just downvoted your comment and it says "undown".

On playing with this it does initially say 'undown'. If you refresh the page it changes to 'unvote'. You could both be right.

Oh how strange, perhaps I thought I'd downvoted something by accident and actually hadn't. Either way, the arrows are too damn close and small.

I'd prefer moving them to the same line as "reply", putting them side by side, and changing them to "▲ upvote" and "▼ downvote". Adding the text and putting them side by side makes them easier to hit, and moving them down to the "reply" line frees up valuable space at the left side.

To that newly freed space on the left move the "next" and "prev" links, and if "next" and/or "prev" is not available for a particular comment pad its space so if "next" and/or "prev" is there it is always at the same horizontal position.

This makes it easier to skip forward or back a subtree at a time, because after a given click of "next" or "prev" is executed your mouse or finger will be over the next "next" or "prev".

I have voted for your comment. Not sure if it was up or down though. ;)

An other issue is the link to your profile in order to get back to discussions you were involved in.

On some phone widths, you end up with the profile and "logout" links right above one another and it's even odds you'll have to log back in on all your device because you'll fat-finger the wrong one and there's no confirmation or anything, just straight fuck off.

No idea why that damned logout link can't be moved to the profile, is anyone really in such a hurry to log out they can't just hit two links?

Yes the biggest change here should be making those buttons bigger and less prone to accidental downvote/upvote

Just pinch-zoomed to upvote this :)

Yes, please! I often tap the “[-]” button as well and it is quite difficult to get right.

Especially now that the “next” button has been added. It is very disorientating when I accidentally tap that.

In fact, all tap targets are too small for mobile. Clicking the comments link to open a post is difficult and I sometimes click flag or hide by accident.

^^ This so much. I click the [-] a lot and often click on the wrong 'link'.

What is prev next and parent for? am I missing out, not using them?

- 'parent' goes to the comment that is replied to

- 'prev' / 'next' goes to the adjacent sibling comments

- 'root' goes to the top level comment in the thread (not the post)

They are very useful on mobile if you're deep in a thread, and want to go to the next top-level thread. To do that, press 'root' and then 'next' (or collapse it with [-]).

You can press "parent" and then "next" to jump to the next (sub)thread. I wish there was a single button for that.

Personally I prefer the existing style.

The larger text looks imbalanced, and I think there are ways to make collapsing threads easier without the eyesore, like changing "[-]" to "collapse thread" or adding a reddit-style bar to the left of the text.

Commenting in case others agree, so the HN team doesn't assume everyone agrees with the proposed change.

Adding padding instead of increasing the size would accomplish a similar goal.

Generally agree. I wouldn't call the proposal an eyesore, but I can feel the larger font dragging my attention (presumably trained from 30 years of upsized headings) from the content. More padding might help or just stretching it laterally.

Sometimes I wish the Apollo [0] app developer, Christian Selig, would create a HN app using the bones of the Apollo app but that would probably just increase my HN browsing time whereas now I normally only browse HN on desktop.

[0] https://apps.apple.com/us/app/apollo-for-reddit/id979274575

Ha, I have a similar first-world problem.

I'm so used to the Reddit app rif is fun, to a point that any HM apps I have tried feel "wrong" as soon as they're different from it and I constantly feel frustrated.

I ended up just not read HN much on my phone and when I do, I just use the webpage.

I love Apollo! It’s the definitive Reddit experience for me.

Do you know if HN or any third party provides an API so that devs can play around building mobile interfaces ?

Hacker news provides its own api, but it's not as easy to use as you would like.

https://github.com/HackerNews/API#design

I’m currently using “HACK for Hacker News” which is similar to Apollo. Don’t get your hopes up to high though.

I have this exact sentiment. I wished for the same thing with Alien Blue when it was the king of 3rd party reddit apps.

I'm also using HACK (same as one of the other commenters in this thread), but it's not quite as nice as Apollo.

Replying to you now from HACK. This will do but I’ll still pine for Apollo for HN.

Don't use points, use em or rem. Otherwise it won't render well for people with unusual screen formats.

12pt = 1em, so how would using em be different?

no he's right, pt is an absolute unit unlike rem/em, see https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

100% I've had to explain this to too many people who are supposed to be web developers

em and rem are relative to some value higher up the tree.

`em` is a relative unit that can change depending font-size of the given element while `pt` is an absolute value. the W3C does not recomend using any absolute value such as `pt` for text rendered on screens. only relative values or `px` should be used. [0] I would suggest this very helpful article on the topic, it provides a lot of good info and context on this subject.

[0] https://www.w3.org/Style/Examples/007/units.en.html

Historically, the term "em" goes back to the days of printing with metal type, and referred to the width of a capital "M" in the current typeface and point size:

https://en.wikipedia.org/wiki/Em_(typography)

There's also a unit called an "en", which was based on the width of "N":

https://en.wikipedia.org/wiki/En_(typography)

> only relative values or `px` should be used.

Both px and pt (and cm, mm, in etc.) are absolute (in the sense that they don't depend on the current font size, only on the pixel density and scale factor of the display). So there is no reason to prefer px to the other units.

In traditional typography, pt is relative to the size of a font, but in CSS it is just an absolute measurement like px.

See: https://drafts.csswg.org/css-values-3/#absolute-lengths

The tutorial you link to is wrong, which is weird since it is written by the inventor of CSS! It might be because it is out of date and reflect the original intention of CSS, not how it actually turned out.

Originally, the intention of CSS was that px should correspond to a pixel and pt/mm/in to physical dimensions, so the ratio between px and pt would vary depending on the pixel density. But people started to specify font sizes in px, which meant text would just become unreadably small when high-density displays were introduced. So instead px was redefined as a physical unit rounded to nearest pixel, and the other absolute units defined relative to this.

This is not true in CSS. In CSS pt is an absolute unit and does not depend on the size of the current font the way em does.

See: https://drafts.csswg.org/css-values-3/#absolute-lengths

Much terminology have a different meaning in CSS than in traditional typography. For example the em unit does not actually depend on the width of on "m"-letter in the font, rather it depends on the height of the font.

Yes. Also, use unitless values for line-heights, it's basically a shorter way of expressing it as a percentage of the font-size. This way, if the font-size changes (either a change to the site design or the user changes it), the line-height will be proportionally appropriate.

12pt equals 16px, 20pt equals 26.667px. The unitless line-height would be 1.6667. Regardless of how it's written, that's a pretty big value for regular-sized text (compared to larger text for something like a heading). I guess that's helpful in narrow views of nested comments, where the close button might wrap to a new line, below another clickable element.

  .comhead {
    font-size: 1rem;
    line-height: 1.667
  }

I for one value the HN limited aesthetic. From a ui perspective its not ideal, but keeping the site extremely simple and a little coarse surely disincentivizes mass and mob adoption.

You can retain the aesthetic while also making it less frustrating to use.

That's cool, but I hope you can also see that the user experience on mobile is pretty bad due to small icons and links.

I suggest Harmonic for Android, an app front-end to HN with a similarly minimal aesthetic but a pleasure to use on mobile.

Personally, I find the user experience on mobile is fantastic. The small icons and links mean that more content can fit on my tiny screen. This is without a doubt one of the main reasons HN is the most visited site on my phone.

(Not trying to start a debate. Just pointing out that user experience on mobile is subjective, rather than objectively "pretty bad".)

Now I need two lines of CSS that will undo whatever this page does to disable my arrow and Vimium keys so that I can read whatever it has to say.

Looks like that's a byproduct of Notion's keyboard shortcuts. I agree it's very annoying. Not only does it break arrow keys, but also home, end, page up, and page down.

This few lines will improve HN on desktop, IMHO.

body { margin-top: 0; background-color: #EAEBE3; }

.title { font-size: 14px; }

.titlelink { color: #131010 }

.subtext { font-size: 11px; }

.comment { font-size: 14px; line-height: 1.5; }

.default p { margin-top: 16px; max-width: 100ch; }

https://i.imgur.com/FmbgVOo.png

and moving "Lists" from bottom navigation to the top navigation would good thing.

I’d also add more space between "next" and "[-]" to prevent mis-taps. Or use "collapse" instead of "[-]".

If anyone from HN is here reading: maybe just make this change? The current touch targets on mobile are much too small and definitely fall below most UX / accessibility standards.

The current touch targets on mobile are much too small and definitely fall below most UX / accessibility standards.

I don't know how many times I've accidentally flagged a post when using my iPad because the text is so small. And there's no unflag button.

Fortunately, I have a controversial commenting history, so the system only very rarely allows me to flag anything.

See, I would have just put that in a userstyle (yes, I have Stylus on mobile) rather than write a blog post about it. But I'm grateful for the blog post...now I can put those lines in my userstyle.

There's definitely something to be said for short blog posts with snippets of info like this.

I very much appreciate the fact that this wasn't turned into a article three times the size, just the information and relevant code.

Custom user styles might work on Chrome, but on Firefox mobile, it's an atrocious experience. You need to install the nightly version, set some hidden developer flags, create a addon collection with your user account on addons.mozilla.org and type the collection ID in the settings of your mobile browser.

In other words, you can't really do it.

I just zoom in to 115% on iOS and 120% in Firefox on my desktop computer.

That is a great idea! No idea why I didn’t think of that myself.

150% on desktop here.

200%

180%

I'm 35 with no known problems with my sight, still 190%.

Same club :)

The issue in the article was about finger clicking on links.

On a desktop OS, you should not have issues using pointer devices. (On mobile devices, when using fingers to tap, one normally pinches to enlarge and re-pinches to adjust size... Although I am not really sure if this still works with nowadays' mobile software: I am assuming text reflow, being that strictly required, and last time I checked most implementations in browsers were broken.)

For comfort in readiing, on a desktop OS, one is supposed to quickly adjust the zoom level with [Ctrl]+[Wheel], or [Ctrl]+[+/-] or similar...

iOS safari zoom increases the size of the buttons (like expand/contract), so it’s at least a partial fix

I zoom out to 80% in Firefox fwiw. There may well be more of you that zoom in, just wanted to point out it's not necessarily obvious to everyone it should be different in that direction.

Yep, HN is one of the few websites I use my browser's zoom feature on. 125% is enough for me to comfortably read.

Just a few lines of CSS could really improve readability here.

My eyesight is terrible but 175% is the sweet spot for me on Edge. 125% is still way too small for me.

Firefox Mobile doesn't have interactive zoom, nor per-site zoom settings.

Font size is buried three levels deep under Settings > Accessibility > Font Size

Yes, I have iOS Safari set to make all text 115% (that is, 15% larger than the default) on news.ycombinator.com and it remembers.

Or just use: https://play.google.com/store/apps/details?id=com.simon.harm...

Last time when I use this app, there is no login and comment function, only reading. I had to use Materialistic - Hacker News [0], with old UI and no update.

[0]: https://play.google.com/store/apps/details?id=io.github.hidr...

I'm writing this from Harmonic - it definitely has upvotes + comment sending, but no comment edit / delete, or link posting.

Hope dev will add all functions in the future.

Personally not a fan of using an app to browser something that contains that many links to the web. You're either stuck in the in-app browser (no bookmarks, etc.) or there is a lot of switching between the app and the browser.

I have an iOS device. The experience might be better on Android.

I have a rudimentary app wrapper for HN on Android, that just renders HN in a webWiew control but shells out to your default browser for external links.

It was the starting point of my own HN app, but as usual I never finished it.

I'm typing this comment via it, actually.

Not to mention every app is another potential security hole.

https://hckrnews.com/ then

It also means you can't open a link in a private/incognito tab, which I like to do to cater my history and cookies.

Mobile Web > Mobile App (especially for sites like HN).

I personnally prefer to use Glider for HackerNew [0] mostly because it is available from F-droid and the webview uses firefox and can be switched to the browser pretty seemlessly.

Writing from it now, it's pretty simple and has everything needed

[0] https://github.com/Mosc/Glider

About "Bookmarklets" (custom javascript one can call on a current page):

-- a good starting guide is at https://www.freecodecamp.org/news/what-are-bookmarklets/

-- it's not clear what could be the best method for calling them with a keyboard shortcut (where relevant/applicable), but a few approaches exist: https://superuser.com/questions/387729/creating-hotkeys-in-f...

-- it's not clear how to automate applying one such javascript snippet on each page load of a URL of defined pattern matching - there probably exist at least browser extensions

> it's not clear how to automate applying one such javascript snippet on each page load of a URL of defined pattern matching - there probably exist at least browser extensions

Userscripts with extensions like tampermonkey.

I made a bookmarklet to toggle all the comments at once. Check it out if you find it useful: https://greptips.hashnode.dev/hacker-news-toggle-comments

If any site developers from HN are reading this thread -- please prioritize some of these quick wins to improve mobile UX and a11y. Some small CSS changes such as those suggested in the Notion post demonstrate, these quick wins that don't require a full-redesign do make a difference.

Obviously, understand that your team may be lean and have other priorities, but maybe hiring a contractor to resolve some these issues would be a way to address concerns for those with sight issues and those browsing on small screens.

I made a Firefox extension to do just this which was great for a few months until Mozilla decided to remove all extensions for Firefox Mobile to a select pre-chosen list.

Hah! This is nothing compared to the “update” button being next to iOS Safari’s back button.

Will I successfully update my prescient mumblings such that they actually make sense, or will I delete everything my fat fingers just spent hundreds of seconds editing? Who nose?!

This is an specially irksome bug given that the two buttons are only next to each other for particularly long comments. I should cut back on the waffle.

Does Safari not keep preserve the text when you press forward?

I suppose that wouldn't help if you opened the comment page on a new tab, though.

Testing… it does!

This could be useful, but I have huge respect for HN not changing anything despite what must be a deluge of developers giving their input.

Its annoying that alt+left-arrow is broken on that site. Instead of taking the browser back, it just selects some random part of the page.

With notion.site, they basically went out of their way to break everything for viewers: they give you what I presume is their editor (which clobbers a lot of the browser’s normal functionality, though whether it does a good job of it or not I can’t tell, never having used it), but with most of the editing functionality clumsily disabled. The end result is a bit better than it was a year and a half ago (https://news.ycombinator.com/item?id=23925461; the links and contenteditable parts have been mostly fixed), but still extremely bad, and still painfully keyboard-inaccessible (Up/Down do their own wonky thing that does let you navigate, but roughly by paragraph, and PageUp/PageDown/Space/Shift+Space/Home/End do nothing; but I just discovered that if you click on the page title text, then Up/Down start to do nothing and PageUp/PageDown/Space/Shift+Space/Home/End work).

Page up and page down also don't work on that page. Funny for a blog post that's about improving UI.

The website is actually a Notion page, I can't do much, sorry!

Yeah notion's habit of overriding essential browser shortcuts is bad enough on desktop but the site is basically useless on mobile.

The two Screenshots are placed next to each other instead of having the headline between them, and one of them doesn't even render.

I have to use notion at work and if I didn't love my job for other reasons their UI might be enough to make me walk out the door.

Plus: my goodness for a few words and two images this page takes forever to load and render, even with a warm cache. Cutting-edge UX in 2021! hooray!

I am not positive, but I think the creator of the iOS Reddit client, Apollo, created an app to edit the HTML/CSS of pages on mobile Safari: https://apps.apple.com/us/app/achoo-html-viewer-inspector/id...

god speed

I use 20px font size in Hacker News - Zenburn Dark (by incrediblygood [1]) to make usable, the default fontsize and the bright colorscheme is fatiguing to my eyes.

[1] https://userstyles.org/styles/97106/hacker-news-zenburn-dark

I've long campaigned for HN to abandon px and adopt em/rem units for text.

Reading on mobile devices, or worse, high-DPI e-ink, is a nightmare.

There's supposed to be a custom-per-user CSS hack in the works, but that's been the response for years.

Not sure where I read this, but there are few features that are undocumented on the website probably! But some of them are mentioned here: https://github.com/minimaxir/hacker-news-undocumented

One of the few issues that I've faced is pagination of the comments and occasionally "dang" might pop up to paginate the comments on heavily trending/debated topics.

My 2 cents would be to enable pagination after a set number of comments, so that it doesn't go on and on, on mobiles.

BTW, I really like this kind of website design as its minimal enough to load on terrible connections and easily viewable.

With the unimportant caveat of the upvote and downvote icons being too close to each other I think the plain simpleness of HN works perfectly from a mobile browser.

Same thought here. All the buttons are too close to each other on mobile, haha.

Same here. Of all websites I frequent HN has the best mobile experience. The only thing they need to fix is indeed up and down being too close to each other.

A bookmarklet like this one could also be used as a quick fix - but I know it's not very practical in the long run because it has be called on every page reload:

javascript:(()=>document.querySelectorAll('.comhead').forEach(e=>{e.style.fontSize='12pt';e.style.lineHeight='20pt'}))()

Hilariously you can’t see this full snippet on mobile safari.

And Chrome strips the `javascript:` prefix before pasting. I guess to make it harder for attackers to trick clueless users into running JS on their online banking?

How about option to move menu to button instead of top, its hard to reach using today's phones

++! I use https://hackerweb.app/ on mobile nowadays but yeah whenever I try to upvote its really hard to do so on the "official" site

Worse are the up and down arrows. They are truly made for ants.

I wish HN would borrow one UX person from its own portfolio companies to improve the overall typography and UX.

Personally I think they work well since I can pinch zoom in to them and out again in a second or two.

As there are hundreds of thousands of them on the page, the size is important.

Ok, but there are also other css things I would like to add on mobile, but how can I do this without a console, do I need an extension like grease monkey?

Bookmarklets.

At least the work on mobile chrome. You open a site, then tap the url bar and type the name of the bookmarklet and tap that.

I have one that removes all iframes, getting rid of 90% of ads

Does mobile Chrome not have extensions? Or you really prefer that solution to uBlock (or whatever)?

It does not. There are alternative mobile. browsers that adblock, however.

Huh. Yes, hence my unfamiliarity with having to do things like that described above ;)

Tampermonkey works on FF Nightly (the one with the blue icon). You just need a mozilla account and create your own allowed extension list.

Here is a solution that extends tap targets by 10px to the top and bottom without changing anything visible:

.comhead a { padding: 10px 0; margin: -10px 0; }

What I want the most is a second click to confirm hiding/flagging/etc.

Not a bad idea. Almost everything I flag or hide on mobile is accidental, and then I need to go and undo it.

I wish there was a higher contrast ratio between text and the tan background.

I support this, I miss the minimize button a lot.

If only there was a way to create a PR :)

The first one looks better in my opinion.

Yesss! BTW I’m using Hack app on mobile.

Why are we setting font-size in pts?!

(A bit ironic that the article about supporting small screens doesn't render well on a small screen: The before and after headings are both placed above the two screenshots.)

At least you were able to see something. In Chrome, with cookies disabled by default, the page appears completely blank.

Author here. It's a Notion page, I can't do much, sorry! Maybe I'll spend some time to migrate everything to a proper blog soon.

If your mobile browser doesn't support custom css, switch to different browser.

The technical state of Hacker News front-end is an embarrassment.

I wouldn't say that. Maybe not the best design you might think of but much faster than e.g. indiehackers.

There's plenty of ways to improve on HN without affecting load times.

not really? looks good, functions well. slightly awkward on mobile since the text is small. very fast, loads on all devices, very accessible because of good document structure. you could reasonably browse HN on a text-only terminal.

Tables for layout. The <center> tag. Special spacer elements. HN is ridden with anti-patterns.

Wow jesus. Opened HN with my accessibility checker. No recognisable structure. 33 spacers on the main page alone. 200+ contrast errors.

I thought it was bad but it is actually worse. Maybe accessibility is the argument to make, because my prayers always fell upon deaf ears.

It's weird because HN seems like it has a very simply document structure and would easily be made very accessible. But no, it's a horrible mess instead.

"Technical"? Nah. The html is readable, assets are minimal and get served almost instantly.

The UX and design could be better, that's true.

Readable HTML does not mean it's good HTML, also these are not mutual exclusive. The UX and design can only be improved if you improve the code. Tables only bring you so far..

Reply on news.ycombinator.com