Sunday, July 1, 2012

Wired, headline click area

Something has always bothered me about the story links on Wired magazine's home page. Today it bothered me enough to write about it.

I don't know if they do this on purpose, or whether it's just an oversight. If it's on purpose, I'd love to know the reason why.

So here's a story; and I hover over the text:

There you go, it lights up and I can click on it… Oops! I moved my mouse by just a few pixels, and:

Ew, I missed! I can't click on it any more.

Fitts' law, my friends, is being violated. Why are they making it harder for me to click on their headlines?

Ars Technica doesn't seem to have this problem. No matter where I hover inside a headline, it still lights up as a link, and I can click to view it:

The difference comes because Ars Technica surrounds the entire span with the hyperlink anchor, whereas Wired only surrounds the text.

I find this somewhat upsetting.


Patzer Sees Check said...

You're not the only one. It's one of my pet hates when websites do that.

Anonymous said...

Seems not to happen with firefox?

Anonymous said...

Definitely happens with iceweasel.

Anonymous said...

Doesn't happen with Chrome 20.

Anonymous said...

Amusingly this comes from some whose
blog has a fixed width. That's up
there on the "obnoxious" list too.

Were it not for that, the same link
problem could also be seen on your site.
If your links, like "1 July 2012 12:57 PM"
are made to wrap, the interline space
will not be a link.

Nirbheek said...

The difference is that my blog is not Wired magazine. :)

Emily Dirsh said...

Really, the browser should be handling this. You shouldn't have to wrap your text links in unnecessary divs or spans just to get reasonable click behavior. That said, web developers have to deal with the state of the browser as it is, rather than as they would like it to be. So, you should email the wired web folks and let them know about this in addition to filing a browser bug.

Emanuele Aina said...

It's just a matter of adding "h1 a{display:block}" to their CSS. Clean, correct, simple and works on every browser known to man since the stone age.

Prometheus said...

Seems Epiphany does "wrapping" of the inline anchor box different to every other browser known to mankind? (Opera, Firefox, IE, stock webkit (rekonq)...)

Anonymous said...

Is it maybe related to line-height css property? Without having checked, I'm not in the mood of installing Firebug ;)