Comments on: Improve Usability and CTR: Make an Entire List Item Clickable

By: Menno Was

Menno Was — Tue, 20 Dec 2011 23:13:20 +0000

This tiny script is great for increasing CTRs. Thanks a bunch! I combined this with the CSS3 rounded corner + gradient on hover.

By: cheap gucci clothing for men

cheap gucci clothing for men — Wed, 09 Nov 2011 23:24:50 +0000

I have just found your site and enjoy each article. I admire your talent.

By: web design kent

web design kent — Fri, 22 Jan 2010 12:00:45 +0000

Some very interesting points made there, thanks for the great article.

By: Rob Glazebrook

Rob Glazebrook — Thu, 21 Jan 2010 16:03:09 +0000

That’s a good point, Jan-Philipp. One way around that might be to put the “hover” CSS styles in a separate class, and then assign that class to the clickable areas using jQuery.

By: Jan-Philipp

Jan-Philipp — Thu, 21 Jan 2010 15:51:39 +0000

Hi Rob, its a very nice solution you build. Just one thing, if I’ve deactived Javascript, the blocks will still seem like a link itself (caused by the li-hovers and cursor:pointer stuff). I dont think thats very user friendly, because a user with deactivated or blocked Javascript might think of a link, but by clicking he wont find one (only the heading is a real link).

By: CSS Brigit | Improve Usability and CTR: Make an Entire List Item Clickable

CSS Brigit | Improve Usability and CTR: Make an Entire List Item Clickable — Thu, 14 Jan 2010 14:19:07 +0000

Improve Usability and CTR: Make an Entire List Item Clickable…

Larger clickable areas make for greater usability and a higher click-through rate. Here's how to expand a clickable area to an entire list item using jQuery….

By: Rob Glazebrook

Rob Glazebrook — Wed, 13 Jan 2010 14:43:56 +0000

Excellent addenda, Brett! You’re right in that this is tailored for a smaller-style list. I built it for a list containing five elements, and thus didn’t bother to complicate my code to improve speed. :)

By: Jordan Walker

Jordan Walker — Wed, 13 Jan 2010 14:13:24 +0000

Nice work, looking forward to implementation.

By: Brett

Brett — Wed, 13 Jan 2010 11:29:11 +0000

Nice code. A simple, excellent solution.

I might just add ( for the sake of those who do not know )that this is perfect for a small number of items in a list, but for a larger list (say a page with 40 blocks of this nature) I believe you could attach the click event to the ul and use event bubbling to determine which element was clicked on and redirect the same way. That way you’re attaching one click listener to the entire list, instead of one click listener to each item in the list – more efficient.

And if you had a setup that was dynamically adding items to that list after the initial page loading you could use the .live() function attached to the ul (I do believe).

If the listener won’t attach properly to the ul you could wrap the entire ul in a div and attach the listener there for event bubbling – it seems to me I had an issue with this before – can’t remember for sure.

Anyhow, I’ve been following your blog for some time – excellent work – I really enjoy it. I’m just glad I finally found something I could add!!!!

By: Rob Glazebrook

Rob Glazebrook — Wed, 13 Jan 2010 02:33:10 +0000

I’ll be excited to see HTML5 grow in browser support, for reasons just like this.

Until then, I’ll probably stick to XHTML. I recently tried developing a site in HTML5 using a bunch of the new tags, only to discover that CSS support on HTML5-specific tags is atrocious. I gave up and converted it back to XHTML.