BigTarget.js - Increase the size of click targets and get more call-to-action conversions

http://newism.com.au/blog/post/58/bigtarget-js-increasing-the-size-of-clickable-targets/

Say goodbye to boring ‘Read More…’ links by turning your entire content block into a clickable target!

With all the positive focus on grid based web design these days, I started to identify a couple of standard design elements. The main pattern used in nearly every site (grid and non grid) was the “title, thumbnail, short summary, more link” pattern. This pattern is generally used for indexing blog post summaries in sidebars, listing services, or creating small calls-to-action.

The XHTML markup generally looks something like this:

<div>

  <h3><a href="http://leevigraham.com/">Title</a></h3>

  <a href="http://leevigraham.com/"><img src="thumbnail.png" alt="thumbnail" /></a>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

    <a href="http://leevigraham.com/">Read More …</a>

  </p>

</div>

One thing that always bugged me when implementing the code above, wasn’t necessarily the number of links inside a small block of content, it was the fact that only those small bits of sporadic content were clickable. Sure it’s not that hard for the user to hover over one of the three links, but I thought the user experience could be improved.

My feeling was that a user should be able to click anywhere in the content and navigate through to the target page — basically making the whole content block one big link.

Improving usability and the user experience with jQuery

Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it’s not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the ‘Learning jQuery’ plugin development pattern.

The concept is simple:

1. Attach the plugin to any link in the content block.
2. Pass through the click zone selector as a plugin option.
3. The plugin then attaches onclick and hover events to the click zone.
4. User clicks anywhere on the click zone.
5. The original link href is retrieved.
6. If the link has a rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.

A working example

A list of entries without bigTarget.js applied

1. Example Title 1

   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

2. Example Title 2

   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

3. Example Title 3

   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

A list of articles with bigTarget.js applied

1. Example Title 1

   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

2. Example Title 2

   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

3. Example Title

   

   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

bigTarget.js

Now you know what bigTarget.js does, you’ll probably want to grab the code and start using it on your site.

Usage

Adding bigTarget.js functionality to your site is straight forward. First include the plugin code in the head of your document, and then when the page is ready, attach the bigTarget function to the target anchor — bigTarget.js will do the rest.

$(document).ready(function(){

  $("ol.bigTarget h4 a").bigTarget();

});

Customising the hoverClass and clickZone

There are two options to further customise how bigTarget.js works — clickZone and hoverClass. By default, bigTarget.js will turn the first parent <li> tag of the target anchor into the click zone using li:eq(0) as the parent selector. The plugin will also add the class ‘hover’ to the click zone element.

This is fine for cases when your content is a series of ordered or unordered list elements. However you may prefer to use a series of <div> tags as the click zone elements and apply the class ‘over’ when the user hovers over the element. To do this just pass the options to the function like so:

$(document).ready(function(){

  $("ol.bigTarget h4 a").bigTarget({

    hoverClass: 'over', // CSS class applied to the click zone onHover

    clickZone : 'div:eq(0)' // jQuery parent selector

  });

});

The code

The plugin code for bigTarget.js is short and sweet.

Paste the code below into a new file called jquery.bigtarget.1.0.1.js or download it from here, then add a <script src="jquery.bigTarget.js.1.0.0" type="text/javascript"></script> to the <head> of your document before calling the bigTarget() method on the selected elements.

// bigTarget.js - A jQuery Plugin

// Version 1.0.1

// Written by Leevi Graham - Technical Director - Newism Web Design & Development

// http://newism.com.au

// Notes: Tooltip code from fitted.js - http://www.trovster.com/lab/plugins/fitted/


// create closure

(function($) {

  // plugin definition

  $.fn.bigTarget = function(options) {

    debug(this);

    // build main options before element iteration

    var opts = $.extend({}, $.fn.bigTarget.defaults, options);

    // iterate and reformat each matched element

    return this.each(function() {

      // set the anchor attributes

      var $a = $(this);

      var href = $a.attr('href');

      var title = $a.attr('title');

      // build element specific options

      var o = $.meta ? $.extend({}, opts, $a.data()) : opts;

      // update element styles

      $a.parents(o.clickZone)

        .hover(function() {

          $h = $(this);

          $h.addClass(o.hoverClass);

          if(typeof o.title != 'undefined' && o.title === true && title != '') {

            $h.attr('title',title);

          }

        }, function() {

          

          $h.removeClass(o.hoverClass);

          if(typeof o.title != 'undefined' && o.title === true && title != '') {

            $h.removeAttr('title');

          }

        })

        // click

        .click(function() {

          if(getSelectedText() == "")

          {

            if($a.is('[rel*=external]')){

              window.open(href);

              return false;

            }

            else {

              //$a.click(); $a.trigger('click');

              window.location = href;

            }

          }

        });

    });

  };

  // private function for debugging

  function debug($obj) {

    if (window.console && window.console.log)

    window.console.log('bigTarget selection count: ' + $obj.size());

  };

  // get selected text

  function getSelectedText(){

    if(window.getSelection){

      return window.getSelection().toString();

    }

    else if(document.getSelection){

      return document.getSelection();

    }

    else if(document.selection){

      return document.selection.createRange().text;

    }

  };

  // plugin defaults

  $.fn.bigTarget.defaults = {

    hoverClass  : 'hover',

    clickZone : 'li:eq(0)',

    title   : true

  };

// end of closure

1/1/08 8:51am — I have updated some of the plugin code for legibility and added a tooltip based on the work of Trevor Morris.

1/1/08 8:51am — My good friend Trovster (Trevor Morris) has independently published fitted.js which achieves the same goals as bigTarget.js in a slightly different manner.

})(jQuery);

Go forth and embiggen

bigTarget.js is a simple to use jQuery plugin that will give your visitors a better online experience. If you have any questions or feedback about bigTarget.js leave them in the comments below. If you find it useful, spread the bigTarget.js love through your preferred social network below.