an All Creative World site
Ivan's picture

How to design for Google Instant Preview

google instant preview screenshoot

Google is testing a new cool feature Instant Previews. This allows the user to preview any webpages before clicking them by hovering over or clicking a small magnifying glass icon next to the results. This preview is not just the above the fold portion of the site, but a long page with the keywords highlighted. I expect many people will use this and therefore it's important to consider the effect of this new service on how we design sites in the future.

Google seems to take a screenshoot of the site at minimal width without scrolling and resizes it to an image with a width of 300px. Many users will decide on which site to click based on these preview images. Therefore for sites relying heavily for their traffic on Google searches it will be important to show a webpage design that is compelling even at that small preview size. Here is a list of things to keep in mind when designing a site optimized for Google Instant Preview:

google instant preview design guidelines

  1. Use large branding as much as possible on the top of the page. This is to make people see and remember your brand even if they don't click the link.
  2. Make sure the site structure is as simple as possible as in smaller size it will look easier to navigate.
  3. Use large colorful images above fold. Faces would work best. These will grab the attention and generate more clicks throughs.
  4. If you can try to include large type that explains what the site is about and invites the user to click.
  5. Make sure the site looks good even if the whole page is visible as a long column. Visual separation of content elements by background color would work best. For example alternating background color for blog posts would create a cool stripy effect.
  6. The preview images tend not to have any white space on any sides. Artificially include elements that allow the page to look wider for Google, so in result the preview image generated will have some breathing space and will look neater.
  7. Use backgrounds that look good in contrast against the white Google search page. Light shades of warm colors would work well against the white and blue of Google's color scheme.
  8. You may want to experiment with a design element that is not apparent when you open the site in a browser, but in preview could communicate an unexpected message.
  9. Be aware that your red, purple and orange elements will degrade in the preview image even more than any other colors. This is due to a strange problem that is always present in all highly compressed jpeg images.

google instant preview example

Commenting on this Blog entry is closed.'s picture
532 pencils

They only just announced it but this is a quick guide on how to adapt with it :) Thanks Ivan, really interesting.

I think it's key to find just the right compromise in preview and actual layout. Simplicity might become even more important :)

AtulVhale's picture
1 pencil

Well I am pleasing to join this conversation, I just came to know Google launching Instant Preview. I think they have used same technology for instant preview as they used for image previews in search result. whatever I am quite excited to experience this Gogol's new experiment. However, this is great challenge for web designers that they might have worried about how should website designed for Google instant preview. Before launching this program you prepared such great facts about future web design that is definitely great thing.

Gavelect's picture
1 pencil

Once again we are at the mercy of the Google gods. They are making so may changes at the moment it is getting hard to keep up. This is another big change to join the other two (instant search & Google Places) already made over the last month or so. At first it is always a panic but but after the dust settles everything always works out just fine as long as you can adapt to the new changes. This change will certainly be beneficial to users so webmasters will need to adapt once again to the new changes. Your simple guide on how to make your website look good through the magnifying glass is the perfect place for web masters to start. I know I will be given your ideas a shot. Thanks

Gav @ eqtr

steveballmer's picture
653 pencils

Stolen from MSN!
I am not Steve Ballmer pretending not to be me!

lucas_yas's picture
1 pencil

Great tutorial. I translated it into Polish at my blog: Jak skorzystać na Instant Preview and, of course, linked to your blog.
I would add one more thing to this list - don't use to much text under footer, it really looks strange on SERP :-)

jared.yoder's picture
1 pencil

I'm glad the preview doesn't pop up automatically just by hovering your mouse over the link. I've experienced that with some websites and it is rather annoying; while you're trying to read one link or headline you move your mouse so you can read it, then a preview pops up and blocks what you were originally reading. Google's instant preview can be turned on by clicking once on the magnifying glass and once more to turn it off so you decide whether or not you want the preview there. Also it's on the far right side of the screen so it doesn't get in your way of reading the other links. Thanks Google for all your innovation.

monkey1979's picture
680 pencils

cheers, good post. I'll take this into consideration for my next project, I hadn't even considered google's preview before.

living on dreams and custard creams.

Annemarie's picture
1 pencil

My website's images are not shown in Google instant preview. Any advise on how to get this fixed??

Bulwark's picture
1 pencil

Good advice. I am still a little shocked that google is moving on this. had this feature about 2-3 years ago. Cool feature, but if they didn't do it 2 years ago, why now?

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Do you need a great new logo?

Pick a pre-made design from a collection of 50,000+ logos that will be customized to your business name for free.