web design

Google's Instant Preview Feature

 

Google’s Instant Preview feature gives new meaning to the phrase “A picture is worth a thousand words.” 
 
The Instant Preview feature was rolled out without much fanfare so you may or may not be aware of it. Opinions vary on how much it affects SEM (Search Engine Marketing) or SEO (Search Engine Optimization,) but most strategists agree it places much more importance on design than ever before.
 
The Instant Preview feature provides a graphic overview of search results and enables people to preview the results right on the results page. This is done through the use of a magnifying glass icon to the right of your search results.
 
When you search on a word or phrase, a whole page of search results will be produced. To the right of each result is a magnifying glass icon. Click this icon and a preview of the website appears in a pop up with a snippet enlarged that contains your search words highlighted. Once activating Instant Previews with that one click, you can hover over any other search result to see a preview of the web page. It is easy to skim down the page quickly and glance at the websites, almost like flipping through a magazine.
 

The benefits of Instant Preview:

 
  • Saves time. You can quickly compare between search results before clicking on any.
  • Accuracy.   You will know at a glance if this site is what he/she is looking for. Also, this feature will decrease the bait and switch tactic of using keywords to lure traffic only to disappoint upon arrival. 
  • May reduce Adwords charges. Currently for Adwords, you pay per click. The Instant Preview (free) will prevent clicks as searchers see the site before going there.
  • Should increase CTR (click-through rates) and decrease bounce rates.
 

  How can you take advantage of Instant Preview:

 
  • Fix your landing pages. More images, less copy writing. Larger headers. Small print won’t show up on the Instant Previews, but the headlines will.
  • Design matters. Does the look of your page convey your message? Potential visitors will decide whether to visit your site without even reading any content, they’ll decide from just one view. 
  • Reduce your clutter. Sign Up boxes, social media icons, ads, sidebar clutter will not show up well on the preview. Put them near the bottom of the page. Get rid of rotating flash headers.
  • Eliminate Forms. Nobody is attracted to a site where they have to fill out a bunch of information.
  • Clean-Up a little. Eliminate a few colors and typefaces, be consistent.
 
 
 I peeked through some of our sites to see how we were holding up. I was very happy with The Race Shop’s look:
 

 

 

I think Tyler Brothers has an appealing look and is very clear on what you’ll find at their site, however, the slideshow at the top doesn’t show up. There’s just a blank white space. The video shows up as black space, too, but I can live with that. The white space has to go though.

 

 

When I search on TroutU Perfect Fly, one result looks great, but another doesn’t look so great. The first is their facebook page:

 The second is a page that discusses Abram’s Creek, it’s all text and not visually obvious that I can purchase Perfect Flies here. The highlighted snippet, if I read it, tells me where to go to purchase the flies. It’s just not obvious that this is the site I need if I want to purchase a Perfect Fly. But honestly, that’s not the purpose of that page anyway, it just got sucked into the keyword search vortex.

 I had one glitch in my Instant Preview experience – I could not get it to work on IE7. Apparently, this is common. If you experience this, you should be able to click on Tools > Compatibility View Settings and uncheck the "Display intranet sites in Compatibility View" checkbox.   I still could not get that to work and I think it’s because on my computer, the system administrator controls that.

Go out and play around with it, see what you think.  Is this a strong enough tool to affect website design and banner advertising?  Maybe.  Maybe not.

Fun with Drupal's ImageCache

I had a problem appear this week that I've seen before, but couldn't remember the best resolution for it.  

If you don't setup your ImageCache Presets correctly, you sometimes get caught with black stripes down the sides of your images.   In my case, this was happening in a view used on the Tyler Brothers website, in this case the page for Youth and Children's Carhartt clothing.

The solution to the black stripes is to define your "canvas" color within your imagecache preset.   Here's what I believe to be the best way: 

First, install the ImageCache Actions module.  This module gives you a great number of options to transform your uploaded images.  

Then, add a Define Canvas action.  The position of this action is important.  In my case, it needs to go between the Scale and Crop actions. 

In my situation, I set the canvas to white (#ffffff), make it appear under the image, and it works like a charm. 

No more black stripes!

 

Columbia's Trouble Building a Web site

One of the challenges of building a large Web site is getting the technical people to work with the graphic design and marketing people.  The city of Columbia, SC recently experienced this exact problem when the technical department unveiled their $107,000 web site just days before the marketing department was planning to launch their own $10,000 redesign of the site. 

Speaking at the Columbia Chamber of Commerce ITC

I had the opportunity to speak to the Greater Columbia Chamber of Commerce's Information Technology Council this past Tuesday. I was very appreciative of Kurt Hamm and the rest of the group for giving me the opportunity to speak about Web 2.0 in the Enterprise.

Over the next few weeks I'll be sharing some of the point I made during my presentation.

 

Simplicity in Web Design

This video is an excellent example of what can happen when we try to do too much on a page. It shows what happens when a corporate "team" tries to design a Stop Sign. http://www.youtube.com/watch?v=kU9YeOQm3Y0 I often remind myself that the most successful Web interface on the planet is www.google.com. One text block and a button.

Resizing Photos in Batch with FastStone Photo Resizer

I am loading an online store with several hundred product images. Unfortunately, all images in the vendor's catalog CD is all in tif format. The images are huge and need to be converted to JPG. ProStores does not allow you to upload tif for product images, and now that I know how huge they are I wouldn't want to anyway. I went to download.com and found a free product that might do what I needed. I needed to convert several hundred images from tif to jpg, and I'd like to re-size them while I'm at it.

HTML HREF Target - Why didn't I know that?

I've been coding HTML for over 12 years and today reminded me that it's never too late to learn something new. I don't know why I didn't know this but today I watched someone code an HREF adding a Target="_blank" to the tag in order to make the link pop up in a new window. It was on a SharePoint site, so I thought maybe it was a Microsoft-specific thing. No, said the person coding it. I was amazed.

Syndicate content