Google Instant Previews

Last November Google launched its Instant Previews feature for search results. The quick skinny is that there is a magnifying glass graphic in the search results. When you click on it you are shown a pop-up visual miniature representation of the web page so you can get a sense of what’s at the destination before visiting the page.

google previews example

It’s a nice feature and I can see this coming in very handy for the times you find a great site, don’t bookmark it, then search again to go back to it at a later date. Instead of visiting site after site until you find it, you can use Google Previews to quickly preview sites without having to load each page. Since you’ve been to the page before you’ll likely recognize it when you see it in the Preview.

And now the bad news

Unfortunately, as of now, it doesn’t support many rich media format content types. Embedded Flash, Silverlight, Java Applets, and video files (FLV, MOV, MP4) are rendered as blank spaces on the page or represented by a gray box with a puzzle piece in the center.

google previews puzzle graphic

For Flash, the immediate solution that comes to mind is to offer a non-Flash alternative (as many sites already do). No dice. The Google Preview (bot?) doesn’t display the replacement content. Check out http://www.google.com/search?q=%22SWFObject+2+dynamic+publishing+example+page%22 to view examples. Google employee, John Mueller, has posted that Google is working on this but there is no projected date for a solution.

It’s something to consider for sites that are heavily dependent on Google searches for traffic.

Favicons

The favicon is a small thing, literally. It is the tiny image seen in web browsers next to the URL field, page tabs, and bookmark/favorite lists. It’s an easy thing to overlook in the grand scheme of building and maintaining a web site. It is, however, worth putting in the little bit of effort required to include it.

Favicon Examples
favicon examples

Why fool with these little things?

  • Additional brand impressions.
  • A faster visual cue for visitors to find your page when multiple browser tabs are open. If they recognize your image they don’t have to read the tab text. Scan, bang, click. Nice.
  • If a visitor bookmarks your site the icon will show up in the bookmarks list, helping to distinguish your site from others.

Since favicons are so pervasive, not having one may actually reduce your site’s perceived credibility. It’s another “expected thing” along with the standard logo, reasonably conventional navigation elements, and easy to find contact info. The absence of the favicon can make your site come across as “small time.”

Implementation is Eeeasy

Creating the graphic is as simple as creating a 16 x 16 pixel ICO file. Photoshop users can download a free plugin that adds an option to save an ICO file. Then the web master uploads and adds some simple HTML code to the page header.

If you need some inspiration check out Cool Favicons.

Springing Some Flash on Ya


Flash CS5 has physics engine features that offer some really fun possibilities. This wibbly wobbly spring for one.
Sorry, either Adobe flash is not installed or you do not have it enabled

Use the time. Hurry! Do it NOW!!!

It being the thick of the holiday season there are time sensitive events showing up all over the place. From Black Friday, to Cyber Monday, to “two hour” sales, there is a ton of time sensitive web content being offered up. Retail marketers clearly have a handle on the frequent alteration of their sites based on the day, date, and time in their marketing efforts.

B2B or corporate marketers might take a cue from this and consider implementing date/time related content as well. Consider something as simple as a time of day related greeting.

Let’s try it out with a simple example that offers a greeting and corresponding animal doodle image based on the current time of day. Different greetings and images are displayed in the morning, afternoon, and night.

Going beyond simple greetings

It might make sense to present different content based on whether you think your visitor is just starting their work day or putting in a late night effort. Another idea is to present content variations throughout the week. Monday’s steaming coffee mug image can be automatically replaced by Tuesday’s donut image. A lunch menu can change to a dinner menu as evening approaches. Items for a contest/scavenger hunt can be presented at different times to encourage repeat visits during a special promotion. Think advent calendar.

It isn’t a big challenge technically

I used Javascript for the date, day, and time elements of this post. Major scripting platforms have date handling methods so it could easily have been done with Flash or PHP.

Goin’ Mobile

Since more people are accessing the web via mobile devices (phones and tablets) the
online marketer needs to be aware that there are some relatively new platform issues to consider. Since I do a lot of Flash production I’ll focus on that.

With mid-high 90% web browser penetration the Flash player plugin has been near ubiquitous when it comes to web content delivery. With the advent of the iPhone, other smart phones, and tablets the situation has changed some. Apple decided not to support the Flash player for mobile devices. Early versions of the Google/Android phones also did not support Flash. When visitors using iPhones, Droid Phones, and iPads visit web pages with Flash content they don’t see it. When the percentages of visitors using those devices was tiny it wasn’t much of an issue. As sales of these devices grow at an accelerating pace however; it is becoming more of an issue. So how big is it?

…today, mobile operating systems account for nearly 3% of all Internet traffic. The percentage of Internet usage on mobile devices has been doubling every eight months or so. If you extrapolate that trend, it’s easy to imagine a world in which mobile devices consume 20% or more of total Internet usage within the next two or three years.”
Source: zdnet

The trend…
Oct-07: 0.09%, Oct-10: 2.77%

Here are a few suggestions on dealing with this. Examine stats to find out if a significant portion of your audience is accessing via mobile device. For example if you are using Google Analytics you can go to Visitors > Mobile to find information regarding visitors using mobile, versions (iPod, iPhone, Android), and carriers.

If the numbers are significant then you need to choose a strategy.

Go without Flash
There are ways to use JavaScript to perform many of the animation effects that are achieved with Flash. For the most basic applications it’s probably a toss up on development effort but for more complex projects Flash has a more streamlined development environment.

Use Flash but Redirect nonFlash Visitors
There are techniques to detect which platform and plugins visitors are using and direct them to suitable pages for their particular situation. The upside to this method is that you can provide richer content to those able to view it while still accommodating mobile/nonFlash users to a lesser extent. The downside is that you may need to maintain multiple pages. So a cost/benefit decision is in order.

Keep me movin’

New Android (version 2.2) phones and tablets are supporting Flash 10.1 so that may just leave the iPhone and iPad pair as the “odd man” out.

The combination of HTML5 and CSS3 can achieve much of what Flash can but without need for a plugin (Presumably Apple’s preference for mobile devices). It doesn’t have full browser support yet but is gaining ground.

Hee hee, hoo!

What a (Click and) Drag


Here’s a simple example that demonstrates allowing the visitor to rearrange on-screen elements. Simply click and drag with the mouse on either of the two environment graphics below to move them around. The fish moves to the selected environment. My obsession with the particle generator continues. I just made a few adjustments to change the graphics to bubbles and invert the gravity so they float up.

Sorry, either Adobe flash is not installed or you do not have it enabled

Adding Flash to WordPress

I tried a couple of different WordPress plugins for embedding Flash SWFs in posts. The one I settled on is swfObject Reloaded. After installation all you have to do is use the same “Add media” button that you use for adding images while editing a post. You can adjust the display height and width to suit your needs. It makes adding Flash files a piece of cake. Mmmm, caaaake…

Cascading Jack O’Lanterns


Just off of Halloween duty, here’s an example of a very basic particle system that uses gravity and some randomization to produce a cascading object effect. Since there is only one jack o’lantern vector graphic used the file size is tiny – weighing at only 8K! Click that carved up left-over to see it in action.

Sorry, either Adobe flash is not installed or you do not have it enabled

The Gravity of the Situation


Here is an example of using acceleration to give a simple simulated gravitational effect. The figure rises into the air with decreasing velocity until it reaches it’s apex then descends at an accelerated rate. Rotation was added for fun.

Sorry, either Adobe flash is not installed or you do not have it enabled

Rotate It


The following example demonstrates rotating an object to point at another. In this Flash example, we’re locking the mug to the mouse coordinates and rotating the hand to point at it. There are many other ways we could adapt this technique; eyes locking on to something or a grid of objects with elements that all move in unison are a couple of thoughts.

Sorry, either Adobe flash is not installed or you do not have it enabled