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 shrinktheweb.com

Shrink The Web Thumbnail Engine

    Using the Shrinktheweb.com 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 http://tweet.me.it.

Tweet.me.it 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 shrinktheweb.com 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.

<?php

// 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="http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=YOURKEY&stwsize=tny&stwUrl=<?php echo $url;?>"/>
<?php echo $title;?>
<?php echo $url;?>
<?php echo $clicks;?>
<div style="clear:both;"></div>
</div>


<?php
// end of while loop
}
?>


More tutorials from Papermashup
Comments
One Response about Using web thumbs to enhance user experience
  1. Anthony says:

    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 w3snapshot.com and it is working.





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.