Using web thumbs to enhance user experience

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

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.

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
}
?>

This entry was posted in Blogging, CSS, Design, PHP, Trends, Tutorials, Web Tools, featured and tagged Services, thumbnails, tools, Web. Bookmark the permalink.