Technology

A Tiny Web Design Change with a Big Impact

When I launched a new site, I wanted to add some kind of feature to the blog that would highlight the new site. However, I didn’t want to make it overly obvious or take away from the blog itself.

The answer was tiny, but had a huge impact… adding a tiny new image to the link in the navigation menu. (click through to the post to see it in action). I ran with the link for several days by itself and got zero traffic. I added the image and now 8.5% of outbound traffic is going through that link!

Rather than actually embed the image in the HTML, I utilized CSS so that I could use it on other new features in the future. The CSS looks like this:

span.new {
background: url(/mytheme/new.png) no-repeat top right;
padding: 0px 18px 0px 0px;
}

The background anchors the image to the right top of the text and stops it from repeating. The padding pushes out the span 18 pixels past the text so that your image is in clear view. To embed it in the page is now easy, I just use a span tag around my text:
<span class="new">Reviews</span>

Sometimes it doesn’t take much to point your readers in a new direction!

3 Comments

  1. 1

    Awesome tip! So simple and so good… That is the kind of things that add value to a blog: simple, good, useful tips… Thanks!

  2. 2
  3. 3

Leave a Reply