Thumbnail based web design?

Google have added an instant preview to its search results that shows a thumbnail of your website. Should this change the way you design?

Just before I went away to America Google launched an interesting new feature that I believe raises some questions about how we design of our websites. The feature I am referring to is instant preview found in Google search results.

In case you haven’t seen this feature yet go to Google and perform any search. In the search results next to the title of each result you will see a small magnifying glass. Clicking on this will show a preview of the webpage being listed. You can then roll over any other result to have that preview automatically update.

Google instant preview

Why should I care?

The introduction of this feature is significant because the thumbnail will influence which links users click. If the thumbnail is incomplete, unattractive or does not seem relevant the user is significantly less likely to click. In short where users used to judge a website within a few seconds of arriving, they will now be making judgements before even visiting your website.

How does this change our design?

Beyond the obvious fact that some sites will look more attractive as a thumbnail preview than others, there are also technical considerations. For example a thumbnail cannot display interactive slideshows, video or indeed any other moving element.

The technology that Google uses to capture these thumbnails also seems to have problems with elements that take longer to load on a page or with plug-in technology such as flash. In short if elements of your page take too long to load or use technology such as flash they may appear blank in your thumbnail. Websites built entirely in flash do not display at all.

Example of a blank preview of flash based website

But are people using this feature?

Of course you may argue that few people will actually use this functionality and you may well be correct. However I can see this being particularly useful for people using a slower web connection. It will allow them to assess individual search results without visiting each page. It is therefore particularly important to consider your previews if you are targeting an audience you know will have a relatively poor connection.

My take on instant preview

Personally I believe that instant preview is part of Google’s ongoing campaign against those who would seek to artificially manipulate their search engine placement. By allowing users to quickly preview pages it exposes sites that are either squatters, keyword stuffers or doorway pages.

However I do believe it has greater ramifications than this. For example, it is yet another reason to avoid flash unless absolutely necessary. It may also discourage some website owners from using third-party widgets that load slowly.

I would certainly encourage website owners to check their thumbnail and make sure it is displaying correctly.

But what do you think? Should we be worrying about Google instant preview or is it something that will be rarely used? Let me know in the comments below.

  • Good point Paul,
    Just checked our site and it looks fine so my parachute’s OK ;-)
    also checked out and as it’s flash based it doesn’t display.
    We only use Flash where it’s appropriate.

  • This is definitely and interesting topic, Paul. From a pure design perspective, it’s always a good exercise to step back from your giant monitor when working on a site and look at the page as a composition. At 300px wide, details will be lost and the only readable text will be the headlines. This is obviously not the ideal window through which you want people deciding whether or not to visit your site. If the composition is good and the headlines are relevant though, it should provide enough info and interest to encourage the click.

  • I think the trend toward billboarding in web design and the use of hero images will work in tandem with Google Preview. Big hero images, large fonts for H1s, all these techniques are effective ways of quickly conveying a site’s message, even in thumbnail view.

  • Thanks for the writeup! Here’s what I think:

    “Should we be worrying about Google instant preview or is it something that will be rarely used?”

    No, we should definitely not spend our time worrying about it—after all, that won’t make problems go away. Copyblogger covered this topic a few weeks ago and provided a basic list of what can be done:

    I rarely use Instant Preview but I found myself thinking “Nobody uses that feature” because I don’t use it more often than not.

  • I’m peronsally not going to be changing my design and build style purely because Google have introduced this feature.

    I do completely concur it will help users see far easier whether a result is search pirating or an actual website.

    As far as I’m concerned things such as easily readable headers and minimal use of flash should be good practise anyway, thus making your preview perfectly acceptable.

    It is a good point (nearly wrote pint – it’s only wednesday!) to bring up, don’t get me wrong. However if we all stick to good website design and build practises, much like we should for search purposes anyway, I think we’ll all find we’ll be fine :)

  • It’s a cool feature but it has issues. Webfonts don’t seem to show up and it could do with waiting a little longer before taking the screen shot. I did a fancy progress bar loading thing for a site to avoid the webfont FOUT so a half-finished progress bar and generally blank screen is what you see in Google’s thumbnail. Very annoying if it means the site looks worse or not like it actually does.

    If there’s a way to detect when a visit is actually Google taking a screenshot then some alternative scripts/styles could be delivered maybe but that seems ridiculous just to get the thumbnail preview you want in the search results.

  • “If the thumbnail is incomplete, unattractive or does not seem relevant the user is significantly less likely to click”

    You’re probably correct, but nevertheless that’s a pretty sweeping statement. I’d want to see some research that confirms the suspicion before suggesting further investment in design to ‘fix’ an undesirable thumbnail.

    Interesting post though.

  • Steven

    I find this really interesting, as I have Google stripped bare and never notice these kinda things. I guess if it takes off, we can add search engine preview optimization to our SEO repertoire.

    However, the millions of people looking for textual content will find this of no use at all, unless the preview can be specifically optimised to be read at preview size.

  • If the preview in the thumbnail satisfies but the full-view disappoints then there will be no retention. But if the full-view satisfies then surely the preview will as well, therefore the focus should not be on an attractive preview when the full-view is the root of it.

    Instant Preview will likely stay, and see more use than most other general search upgrades that Google has implemented lately, but I’m not sure that it will see much favor being that it deviates from the simplified functionality that is Google’s primary draw.

    • Dafydd

      Even if your full view is well developed it doesn’t necessarily translate to the google preview e.g. if you have alt content for your flash elements it will not show the flash or the alt content. Doesn’t look good!

  • Instant Preview is the logical counterpart to Google Instant, which they rolled out first.

    It’s nothing to “worry” about per se (unless you’re a horrific front-end/UI designer) but something to be aware of along with the 20,000 other things we need to be aware of.

  • Noticed this a week or 2 ago. I think its a great strategy by Google to weed out those using unfavorable tactics to get search engine results. Great article to bring this to the attention of more people!


  • for some reason google preview shows my website with only one thumbnail. I dont know why it didnt cached other thumbs on the home page :-s

  • Thanks for the tip. Even though I knew about google preview I guess it never occurred to me to think how it would really effect designs. I was also unaware that it couldn’t take snapshots of flash. Certainly something to take into consideration.

  • This is very informative, especially for people who are planning to have a new website or wants to redesign their existing one.

  • Pretty useless feature if you ask me