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.

'round about

10 comments:

  1. Patzer Sees CheckJuly 1, 2012 at 6:57 AM

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

    ReplyDelete
  2. AnonymousJuly 1, 2012 at 12:47 PM

    Seems not to happen with firefox?

    ReplyDelete
  3. AnonymousJuly 1, 2012 at 12:57 PM

    Definitely happens with iceweasel.

    ReplyDelete
  4. AnonymousJuly 1, 2012 at 5:41 PM

    Doesn't happen with Chrome 20.

    ReplyDelete
  5. AnonymousJuly 1, 2012 at 7:45 PM

    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.

    ReplyDelete
  6. NirbheekJuly 1, 2012 at 8:51 PM

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

    ReplyDelete
  7. Emily DirshJuly 1, 2012 at 10:03 PM

    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.

    ReplyDelete
  8. Emanuele AinaJuly 2, 2012 at 3:10 AM

    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.

    ReplyDelete
  9. PrometheusJuly 2, 2012 at 11:20 AM

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

    ReplyDelete
  10. AnonymousJuly 2, 2012 at 6:45 PM

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

    ReplyDelete