Google recently rolled out a new feature for search in an attempt to make the process faster and more satisfying. This new feature is an Instant Preview option. Essentially, it shows a visual preview of each of the results on the right hand side of the browser when you activate the option and mouse-over each result. While the impact on how this will affect PPC and SEO remains to be seen, there is a clear evident impact to web design that is apparent immediately.
The question is how does Instant Preview affect web design? It does in how you can present your website/web design in a manner that makes full use of Instant Preview. These are some of the things to consider for Instant Preview when designing a website:
Flash
Although Google says they are working on it, the current Instant Preview does not properly display flash objects. Instead of displaying the flash, it replaces it with a puzzle piece icon. This wouldn’t be much of a problem if you used flash sparingly as a complementary element to a design, but if your site is designed completely in flash, it will show up as a page with a puzzle piece icon on it and nothing else. There are some ways around this, of course.
The best way is probably to use javascript to embed the flash object, such as swfobject. It validates for W3C and it allows for graceful degradation. swfobject allows you to create an alternate display for the flash object if flash isn’t available and this is the part that is essential for Instant Preview. Whatever content you place within the alternate display will show up in Instant Preview. As such, you could show an image of what that flash object would look like and it will show as such in Instant Preview.
HTML5
HTML5 is all the rage thanks to Apple’s ongoing fight with Adobe, but it hasn’t been finalized by W3C and isn’t fully supported by all the main browsers. While HTML5 can perform some amazing tricks, sadly, most of it does not show up in Instant Preview. Anything done in HTML5 (canvas, etc…) doesn’t even get replaced by any sort of puzzle icon like for Flash but rather just shows up as blank space in the preview. So if your page is made up entirely of HTML5 content, the page will just appear to be blank in Instant Preview.
jQuery
Here’s some actual good news. Page elements and objects that utilize jQuery appear to show up in Instant Preview just fine. We’ve checked image cycling and jQuery-based navigation menus and they seem to be fine. So it seems to be fairly safe to utilize this web designer/developer tool.
Of course Google Instant Preview is still fairly new for wide-spread usage and Google is making innovations to it all the time, but for the moment, the verdict for designing for it is fairly in sync with designing for SEO. Mainly, use Flash sparingly, jQuery is great, and HTML5 is still a work in progress.