Touchscreen optimized links via JS

As websites continue to experience an increase in mobile browser visits, most sites are accommodating this through mobile optimization. Let’s face it, mobile is here to stay. There are many things a site can do to improve the experience on mobile devices. Mobile-friendly layout, simplified design, and touch events are some examples.

One of the changes mobile devices bring is the shift from the mouse to the touchscreen. Whereas a mouse lets a visitor interact with the site with precision, using a finger requires larger interaction surfaces.

Take for instance a container that has a link and a paragraph regarding a blog post.

A user with a mouse could easily click on the link and be taken to the post. However, a user with a touchscreen would have to work much harder to click on the link as the link covers very little real estate. Furthermore, this example has visual clues that indicate that the paragraph and link go together. A touchscreen user is likely to expect that touching anywhere within the box would bring him/her to the post.

First, I assign the box a class I can apply to any elements I want this behavior applied to. In this example, I’ll use the “row-touch” class. As this event should fire when click on, I use the click event, but using the vclick event from jQuery Mobile is also nice.

$('.row-touch').bind('click', function () {});

So we have our element and we have our event. Next, we need to grab the hyperlink destination.

$('.row-touch').bind('click', function () {
    var destination = $(this).find('a').eq(0).attr('href');
});

As there may be more than one link in the box, I filter out just the first. This way you could have a Read More link or other links for desktop users to click on.

Finally, we want to send the visitor to the destination of the link. jQuery doesn’t allow clicking on links programmatically to deter malicious code, but we can simply set the location of the window to our new URL.

  $('.row-touch').bind('click', function () {
    var destination = $(this).find('a').eq(0).attr('href');
    window.location = destination;
});

So here we have the completed code for optimizing links for mobile devices by capturing clicks on the surrounding containers via JavaScript.