6 ms·
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 la
by Eric_WVGG 7y ago
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.
- graeme 7y agoWhat do you mean? Haven't had that issue. Am on desktop version, unsure if mobile exists
- zoul 7y agoThe tap targets are minuscule and close to each other.
- tobinfricke 7y agoI had to pinch-to-zoom to upvote this comment. :-)
- zaroth 7y agoThat'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>
- scarface74 7y agoI’ve also down voted comments by mistake...
- zaroth 7y agoThey have added an undown link a while back.
- yoz-y 7y agoBut the undown/unvote links are hard to tap on mobile as well. On firefox on android it's always an exercise in patience.
- slavik81 7y agoAdding 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.
- danek 7y agoI 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.
- watt 7y agoUsability-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?
- robocat 7y agoRelated 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!)
- deftturtle 7y agoa {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}
- eurasiantiger 7y agoNote 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.
- deftturtle 7y agoThank you! I’m still learning CSS and will have to adjust my style sheets! :)
- tryptophan 7y agoProbably just add some extra "padding: 5px". All the padding area registers "clicks" for the element.
- fanick 7y agoFor 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.
- 7y ago
- thrower123 7y agoThat's weird - must be an iPad specific thing. It works just fine on Android Chrome.
- nkrisc 7y agoI'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.
- JaRail 7y agoThe trick is to keep your karma below 500. xD
- Beldin 7y agoThanks! 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).
- ebg13 7y agoAll 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?
- reificator 7y ago> 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 https://www.w3.org/TR/css3-values/#absolute-lengths
- ebg13 7y agoThat doesn't make it better. 10px at 1/96 inch per px makes them only 2.6mm.
- sequoia 7y agoI always accidentally log out when I try to click on my username in iOS.
- graeme 7y agoOh true, that happens to me a lot.
- lostgame 7y agoHehe, 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.
- spraak 7y agoI always need to zoom to vote or collapse threads on mobile
- rapnie 7y agoYes, me too. I suggested adding more spacing between upvote / downvote links for usability on mobile.
- r00fus 7y agoOn 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.
- baby 7y agoPaying to browse a free website? Check premii
- SiebenHeaven 7y agoSeems significantly slower to me on my 3G network compared to hn
- r00fus 7y agoMy 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.
- perilunar 7y agoI 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)()
- Vinnl 7y agoI 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/ 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.)
- digitalengineer 7y agoThis. 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.