Hacker News Reader

Comment by Eric_WVGG | Hacker News Reader

When reading on an iPad, tapping on links is nearly impossible.

A better responsive CSS file wouldn't make the site any slower or degrade the experience for laptop users.

Hehe, I had never thought of this, but you're right. It's not just an iPad, either - it's the same on my Microsoft surface.

I got so used to pinch-to-zooming, for so many years, I guess I didn't even consider that usability flaw.

This. Please spend a little more time on the css. And a somewhat bigger up/downvote arrow would be great. I don’t have fat fingers but still accidentally click the wrong one every now and then.

I always need to zoom to vote or collapse threads on mobile

Yes, me too. I suggested adding more spacing between upvote / downvote links for usability on mobile.

I had the same issue on mobile. Annoyed me so much, I made a browser extension that increases the padding around those and the collapse buttons. Not useful for you, but for anyone using Firefox for Android, see here: https://addons.mozilla.org/en-GB/firefox/addon/sihn/

(It could use some tweaks to keep everything aligned, but the small usability tweak was most important to me.)

Thank you for this! Just installed and a quick smoke test provided a much nicer experience for me. :)

Good to hear :) I've not spent too much effort on it (nor am I planning to), but feel free to report an Issue if you have suggestions for small improvements.

On mobile, I use MiniHack (there are tons of other HN apps). On desktop, HN's interface works well enough that I don't try to mess with it.

I really wish I could do one feature on the desktop/web that mobile MiniHack.app does on mobile - to enforce all links opened launch in reader mode in Safari webview. 99% of the time that's exactly what I want when I click through.

Paying to browse a free website? Check premii

Seems significantly slower to me on my 3G network compared to hn

My time isn't free. I don't mind paying a small up-front fee for usability. Plus, upvotes with HN's site ui on mobile resulted in mis-votes - that's fixed with MiniHack or other HN apps.

I just use a bookmarklet to increase the font size. It requires an extra tap, but I'd rather do that than use an app.

The bookmarklet:

  javascript:(function()%7Bvar%20n=window.document.createElement(%22style%22);n.setAttribute(%22type%22,%22text/css%22);n.innerText=%22html%7Bfont-size:1.2em!important;line-height:1.3!important;%7Dbody,table,tr,td,.default,.comment,.comhead,.pagetop,span.pagetop%20b,.c00,.yclinks%7Bfont-size:inherit!important;line-height:inherit!important;%7D.pagetop,.title%7Bfont-size:1.2em!important;%7Dtable%23hnmain%7Bwidth:100%25!important;%7Dbody%7Bmargin:0;%7D%22;window.document.head.appendChild(n)%7D)()

What do you mean? Haven't had that issue. Am on desktop version, unsure if mobile exists

The tap targets are minuscule and close to each other.

I had to pinch-to-zoom to upvote this comment. :-)

That's a feature IMO -- HN could even make them even smaller.

It should take conscious effort to vote, and the small target size mentally reinforces this model; that it's not supposed to be the most common action.

EDIT: See, clearly the vote targets simply aren't small enough! </s>

I’ve also down voted comments by mistake...

They have added an undown link a while back.

But the undown/unvote links are hard to tap on mobile as well. On firefox on android it's always an exercise in patience.

Adding undo changed the feel of downvotes a little. Irreversible accidental downvotes were scattered randomly on comments and they made the occasional downvote feel less harsh.

I rarely wish to click on the username or time links (“3 hours ago”), but that’s what I click on the most due to size and placement issues (when trying to vote or collapse a thread). I agree one should not blindly vote, but at the same time if you have decided to vote, it shouldn’t be maddeningly difficult and error prone to execute.

Usability-wise, isn't it kind of weird that the click target you use the most (upvote arrow) is the smallest of the three? And the ones that you use rarely or never, are so easy to hit by accident. Why must world be like this?

Related question: what is the easiest way to increase the tap zone of a HTML element using CSS?

Aside: I have noticed Safari auto-inceases the touch zone for inputs and elements with ontouch/onclick events (I noticed because I had to fix an issue caused by this!)

a {padding: 1rem}

This increases area by padding the link. Just don’t want the rap areas of different elements to overlap with too much padding.

You can also put a border around the new area, or a box shadow, to indicate larger click area, making it a button sort of:

{border: thin solid grey}

Note that the <a> element is inline by default, which means top and bottom padding is not applied. Set display: inline-block; to have padding apply all around while retaining the element’s flow in the layout.

Thank you! I’m still learning CSS and will have to adjust my style sheets! :)

Probably just add some extra "padding: 5px". All the padding area registers "clicks" for the element.

For the thread collapsing functionality I think the long press/touch could mitigate the need for pinch zooming. Just hold your thumb on the comment long enough and bang, it's gone. For me this is the most commonly performed interaction with the site.

I find this behavior on Reddit annoying when I’m reading a long comment and the thread suddenly collapses because I left my finger on the screen. There’s pros and cons to the approach.

That's weird - must be an iPad specific thing. It works just fine on Android Chrome.

I've noticed that an Android Chrome I have no issues hitting the links on this site, but if I switch over to Firefox I can barely click anything. It's not just this site. That annoyance alone has almost driven me back to Chrome.

The trick is to keep your karma below 500. xD

Thanks! As someone who lurks here much, much more than commenting, I wasn't aware that the interface would change over 500 karma.

This does put the discussion in a different light (not to mention helps avoids me making comments that don't apply to more karmarific users).

All elements are super tiny unless you force zoom on them. The CSS says that all fonts are 10pt or _smaller_. There are 7pt fonts defined in there! Everything else is specified in exact pixels. Vote arrows are 10x10 pixels. Do you realize how small 10x10 pixels is on a modern display?

> Do you realize how small 10x10 pixels is on a modern display?

CSS `px` units are not equivalent to a device pixel.

https://www.w3.org/TR/css3-values/#absolute-lengths

That doesn't make it better. 10px at 1/96 inch per px makes them only 2.6mm.

I always accidentally log out when I try to click on my username in iOS.

Oh true, that happens to me a lot.

Reply on news.ycombinator.com