Use your left/right keys to browse tutorials
Using web thumbs to enhance user experience

Using web thumbs to enhance user experience

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on September 18, 2009

Over the past few years I’ve had the opportunity to work on a few personal projects. This allowed me to experiment more with techniques that I wouldn’t have normally used on client sites. During this time I was building a blogging platform, I soon found that it was difficult to present the data and make it look interesting to the user, this is where i discovered web thumbnails to achieve this.

There are a variety of web thumbnail services out there but the best and easiest to use by far is

Shrink The Web Thumbnail Engine

    Using the Pro Features

  • Specific Page Captures – “inside pages”
  • Full Length Captures
  • Custom Sized Captures
  • Refresh On-Demand – queued instantly
  • Custom System Messages – private label with your own system message thumbnails
  • Native Capture Resolution

  • Capture using browser resolution of 800×600 or 1024×768
  • Widescreen Thumbnail Capture
  • Capture using any browser resolution (i.e. 1440×900, 1024×750, etc)
  • Check out the FAQ section for more documentation.

Lets add thumbnails to an application

I’m going to run through the concept of adding web thumbnails to an analytics application. Lets say we have a concept and want to display our data like the image below taken from the popular link shortening service URL Shortener

So we have our data in a database including the URL or link to our target site that we want the thumbnail for. In the code example below you’ll see that I’m just doing a simple database query in a while loop. You can see from my example that it’s very easy to add web thumbnails from to your application and sites, and it improves the readability, stickiness, and retention rate of your users.

This is the kind of query used to create the example in the image above.


// simple database query
$result = $connector->query("SELECT url, title, clicks  FROM analytics order by date ASC LIMIT 10");
while($row = $connector->fetchArray($result)){			

// store the variable from the database
$clicks = stripslashes($row['clicks']);
$title = stripslashes($row['title']);
$url = stripslashes($row['title']);


<div class="analytics">
<img style="float:left;" src="<?php echo $url;?>"/>
<?php echo $title;?>
<?php echo $url;?>
<?php echo $clicks;?>
<div style="clear:both;"></div>

// end of while loop

More tutorials from Papermashup
  • Anthony

    I totally agree with the writer. I am running a web directory and putting screenshots along with the URL always good compare to not using anything at all. I am not using shrinkthweb but and it is working.