How to Make Whole Post Excerpt a Clickable Link

With potentially millions of people visiting your website (you hope) with nothing but their big fat fingers to guide them, and considering you might not have the hundred thousand dollar budget it takes to make well-designed separate sites for each class of device, it makes sense to start designing a website that will work just as well with a human digit as it does with a mouse.

In general, the web is still fairly horrible on mobile, even for sites that have been responsively designed. It still requires a slight mental shift. Text is usually smaller. Links will often be text, small, and close to each other – instead of big, comfortable buttons.

Responsive design in general is a relatively easy way to achieve mobile-friendliness, but here’s another idea that will help make the users experience of your site feel more integrated with their experience of their device in general.

One of the abilities of modern browsers is to make a whole block of anything into a link. The situation I find this is most useful is in a grid-layout blog page. Instead of having to precision navigate to the title link, the user can clumsily swat at the whole post. For an example, check out this blog page via the link up the top.

It’s fairly simple. Wrap the div, (or article) in a link, like this:

<a class="excerpt" href="/post-link">
<div class="post">
<h1 class="post-title">Title</h1>
<div class="entry-content">Content</div>
<div class="entry-meta">Meta info, but not linked!</div>
</div>
</a>

The only real complication is that you need to remove all other links from inside the div, as they will break the overall hyperlink at least partially.

You will need to specify non-altered hover-states for each element in the div. For example, if you don’t want the post excerpt transforming like a hovered-link, you’ll need to define something like this in CSS:

a.excerpt .post .entry-content {color: #333!important}

The “important” bit will ensure that the colour instruction will override the link-colour instruction.

If you’ve got a less blocky, more text based site, this is still an option. There’s no requirement to draw a block around your post to benefit from making your site more mobile-friendly.

The Hover Transformation

Keep in mind, mobile users won’t see whatever hover state you define until after they click the actual link, so don’t make it an essential factor for your users.

I think it’s nice to keep things very subtle. Whatever changes you make, try smaller ones at first and go garish from there. I used to like CSS transformations like rotate and size, but browsers aren’t really ready for this yet.

  • Apply a lower opacity.
  • Change the background colour of the post.
  • Lessen or alter block-shadow.
  • Change only the title colour.

Here’s how it works on the blog page here: Slight background color change, an inset-box-shadow to highlight the edges and give he post a slightly glassy look, and the removal of the outset box-shadow to help the post seem indented.

The effect is even more subtle when you look at it in the picture below. If you actually watch the transformation, you’ll see it’s quite obvious.

Posted on October 18, 2012 Modified October 2, 2015