Instant Website Previews – Why, When & How?
Website previews were always a part of web content: the thumbnails in CSS galleries, a website screenshot in an article, etc.
They were static as expected. But for the last few years, using live or instant previews became much easier which is a far better experience (for the reasons shared below).
And lately, Google launched "Google Instant Previews" in its search results making this more a reality than only a trend.
Now, it won't be wrong to expect such functionality spreading into other websites/web apps.
Advantages for end-users
Better search accuracy
Once a user has made a search and seeing the result as not only links but with images, a better decision can be given on "if the result is related to the search or not".
Prevent re-visiting same URLs
It is more likely to remember the look of a web page rather than the URL.
Users generally find themselves clicking on a URL that they had already visited. Previews can help preventing this.
Filter foreign and non-available websites
The link that is about to be clicked can have the information the user is searching for but it can be in a foreign language or the page may not be available.
For anyone who is clicking many links after a search, that can be a real time-saver.
Advantages for developers
Besides offering an option to users to find out where they are about to be forwarded, there are several advantages for developers:
If your web application is anything to do with the screenshots of websites, getting them automated would clearly be awesome.
It can be a CSS gallery, an ad network displaying images of websites, a directory, etc.
As the previews are generated instantly, it should be possible to create them with any size preferred.
This is a great feature for a website whose design is changing regularly or if the same screenshot needs to be used in different layouts.
When to use them?
Like any other element to be used in web design, "functionality" is usually the right answer.
Instant thumbnails are definitely not for every website like a corporate one with few links or an e-commerce website who usually links to its sub-pages.
On the other hand, it perfectly fits into search pages, directories, social bookmarking or any other website with lots of links to external resources.
As usual, how Google does it is an example case: it is optional, so easy-to-use and helps reaching to the right point faster.
How to use them?
You have 2 options for that. Let's start from the easy one first.
Using Website Thumbnail Services
ShrinkTheWeb is a very stable instant website previews provider that offers many options for customizing the screenshots like:
- real-time captures
- multiple sizes
- Flash embed or HTML
- API support
- optional permanent caching and more..
For basic usage, they have a free plan which can cover a high percentage of websites.
The service also offers plugins for popular applications like WordPress, vBulletin and more for faster integration.
Different image sizes can be served and it is possible to remove "powered by" info according to the plan you're in.
Setup a website screenshot tool
If your website is not hosted on a shared account and you have the control of the server, than there are various tools that can capture website screenshots from command-line like:
- CutyCapt – for getting screenshots via WebKit browsers
- IECapt – a tool for website previews with IE
- SiteShoter – for getting screenshots via IE
- khtml2png – for capturing on Linux machines
However, keep in mind that setting up such a tool may require extra coding like getting the image created to the folder you prefer, etc. Simply, it can become complicated.