Ask HN: Why are the upvote arrows so small?
3 points
9 hours ago
| 3 comments
| HN
The .votearrow element on HN is 10x10px:

.votearrow { width: 10px; height: 10px; border: 0px; margin: 3px 2px 6px; background: url("triangle.svg"), linear-gradient(transparent, transparent) no-repeat; background-size: 10px; }

On mobile, I keep tapping the title instead of the arrow. I've been running this override via Stylus for a while:

.votearrow { width: 40px; height: 40px; margin: 0; background-repeat: no-repeat; background-position: center; background-size: 16px; cursor: pointer; }

▲
al_borland
4 hours ago
[-]
I just zoom in on mobile if I really want to vote on something.

I prefer that to the idea of a “mobile-first” site overhaul like much of the web has done. In nearly every case those efforts seem to make things worse.

reply
▲
guilhermeasper
3 hours ago
[-]
That's what I used to do until I discovered the Stylus extension and created an override for it.

I think the change should apply to both (desktop and mobile).

reply
▲
krapp
5 hours ago
[-]
To be as unintrusive as possible, as per HN's general minimalist aesthetic.

Also HN was designed to be used on a PC, not mobile, around what looked good enough to pg in the early 2000s.

reply
▲
juped
7 hours ago
[-]
They're fairly large (larger than lowercase letters in the header text, comparable to uppercase). Glad you were able to fix it since you prefer them much larger.
reply
▲
guilhermeasper
6 hours ago
[-]
Since this is an action, I disagree that 10px is "fairly large". According to WCAG https://www.w3.org/WAI/WCAG22/Understanding/target-size-mini...

It should be 24px minimum, we shouldn't be comparing with the title either.

reply
▲
fuzzfactor
5 hours ago
[-]
I know what you mean but it always seemed to me that voting is not a main feature, merely an accessory.
reply