Tuesday, May 13, 2008 6:53 pm CST


logo

Website Design & Development



Archive for April, 2007


14
Apr

Google Launches Website Optimizer

I noticed yesterday that Google released a new tool for advertisers, the Website Optimizer. This new tool is included within the Adwords interface. If you have heard of AB Testing, or split testing, or multivariate testing, the Website Optimizer is suppose to simplify the process of tracking results. You can create multiple variations of a landing page, with different headers, product descriptions, link text, images, etc, and tag each variation. You also indicate what sort of action you are trying to encourage from a visitor, whether it be a sale, a newsletter subscription, a download, etc. The Website Optimizer tool will track results for a few days, and will then start reporting which variations do the best at delivering the desired action. One of the nicest features is that it shows which combinations (assuming you tried varying more than one item) produce the best results. This kind of insite can be crucial to improving the ROI of your online advertising and the profitability of your business.For more details, including sample reporst and a demo, visit

http://services.google.com/websiteoptimizer

I haven’t implemented this in any of my own projects yet, but am anxious to give it a try. It definitely sounds promising, and being a free tool, it’s hard to lose anything but the time involved in setting it up.

Posted in Search Engines | No Comments »

05
Apr

IE and Unwanted WhiteSpace

There is an issue with Internet Explorer adding white space when it isn’t really wanted (at least in my opinion). I haven’t noticed the problem with Firefox. The situation occurs when a line break exists in the html, but other than that there are no spaces or other elements that “should” display on the page in the browser. For example, let’s say I have several images that I want to appear side by side on the page and have no space between them, as when slicing images. My code might look like the following:

<img src="images/logo_left.gif" />
<img src="images/logo_right.gif" />

which would result in:

Sample Logo - Left Slice Sample Logo - Right Slice

I think you see what I mean by unwanted space. One fix is to make sure there is no whitespace (carriage return, line feed, or space) between the image tags in the html, which is simple but can make for sloppy code and would look like this:

<img src="images/logo_left.gif" /><img src="images/logo_right.gif" />

It doesn’t look all that bad here, but if you have a lot of images, or a lot of parameters to include with your image (noborder, height, width, etc), it can make the underlying html pretty sloppy. But, you can get the layout you want:

Sample Logo - Left SliceSample Logo - Right Slice

However, I prefer a simple CSS solution. In my stylesheet, I add the following class:

.imageNowrap {
white-space:nowrap;
display:block;
float:left;
}

I can then add this class to each of my images (except the last image in the row), like so:

<img src="images/logo_left.gif" class="imageNowrap" />
<img src="images/logo_right.gif" />

and again get the desired result, this time with cleaner, more readable html. If your images span several rows, then something like this will work (remember to keep the <br /> on the same line of html as the last image on the row):

<!--// ROW 1 //-->
<img src="images/logo_top_left.gif" class="imageNowrap" />
<img src="images/logo_top_right.gif" /><br />
<!--// ROW 2 //-->
<img src="images/logo_low_left.gif" class="imageNowrap" />
<img src="images/logo_low_right.gif" /><br />
I am sure there are other solutions, so I would be happy to hear them.

UPDATE: 13 Feb 2008

I had a visitor contact me stating that he had used this solution with success on one page of his site, but the solution failed to work on another page. After reviewing his source, I noticed something critical that I thought I would pass on here. The page that was not working did not have a DocType specified. For this solution to work, be sure that the first line of HTML includes the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Posted in Design, Coding | No Comments »




blog powered by WordPress
Entries (RSS) and Comments (RSS).

copyright © 2007 : Travis Langley & Associates, Inc.
405.562.7777