Archive for July, 2010

It’s no secret that some Web ads are a lot more effective than others. In fact, click-through rates — what percentage of the people who see the ad actually click on it — can vary from less than one-tenth of one percent to an astonishing 10 percent or more. Some of this depends on what´s being advertised, of course, but much of it is due to the ad itself.

To make sure that your ads are as effective as possible, ask yourself the following three questions:

1. What are you trying to accomplish with the ad? Are you looking to establish a brand or to produce qualified leads? If branding is the goal, make sure your logo is prominently featured. If you want to sell, don´t let the logo interfere with your pitch.
2. How will you measure success for your ad campaign? Are you looking for high click-through rates, increased awareness or a specific number of leads generated?
3. Who are your customers? You need to advertise on sites that appeal to your target audience, and you must think about what kinds of ads will appeal to your audience.

Once you know what you want, you need an ad that will do the job. That means creative design and good copy, but not necessarily fancy graphics or animation. It also means creating a series of ads instead of just one. Multiple ads help keep the message fresh, and they let you track results and emphasize the most effective ads.

Many Web surfers complain about animated ads, claiming that they’re distracting or take too long to download. And they may be right. But animated banners do grab the viewer’s attention, and they often garner higher response rates than static ads. Just be sure to keep the file size as small as possible to avoid download delays, and think twice before you use Java, Shockwave or other advanced techniques to power your banners. Your audience may not have the proper hardware or software to take advantage of these enhancements, and they can stall or even crash some users’ browsers.

Other ways to grab viewers’ attention include using bright colors and high contrast images in your banner ads.

Your banner ad copy should be concise and powerful. Try to offer a defined benefit, and feel free to use questions in your copy to get people more involved. Avoid ambiguous messages, though. People don’t click if they don’t know where you’re going to take them. People also like to be led by the hand — adding the words “click here” to your banner ad can boost the response rate.

Once users click on your banner, where do they go? On the Web, creating an ad isn’t good enough. You also have to create the destination to which the ad leads. Remember, the ad should lead directly to the associated product, service, content or benefit. You can´t just link to your home page and force users to find whatever your ad promised them.

1. Splash Page

I’ve seen this mistake many times where people put up just a big banner image and a link “Click here to enter” on their homepage. The worst case — the “enter” link is embedded in the Flash object, which makes it impossible for the spiders to follow the link.

This is fine if you don’t care about what a search engine knows about your site; otherwise, you’re making a BIG mistake. Your homepage is probably your website’s highest ranking page and gets crawled frequently by web spiders. Your internal pages will not appear in the search engine index without the proper linking structure to internal pages for the spider to follow.

Your homepage should include (at minimum) target keywords and links to important pages.

2. Non-spiderable Flash Menus

Many designers make this mistake by using Flash menus such as those fade-in and animated menus. They might look cool to you but they can’t be seen by the search engines; and thus the links in the Flash menu will not be followed.

3. Image and Flash Content

Web spiders are like a text-based browser, they can’t read the text embedded in the graphic image or Flash. Most designers make this mistake by embedding the important content (such as target keywords) in Flash and image.

4. Overuse of Ajax

A lot of developers are trying to impress their visitor by implementing massive Ajax features (particularly for navigation purposes), but did you know that it is a big SEO mistake? Because Ajax content is loaded dynamically, so it is not spiderable or indexable by search engines.

Another disadvantage of Ajax — since the address URL doesn’t reload, your visitor can not send the current page to their friends.

5. Versioning of Theme Design

For some reason, some designers love to version their theme design into sub level folders (ie. domain.com/v2, v3, v4) and redirect to the new folder. Constantly changing the main root location may cause you to lose backlink counts and ranking.

6. “Click Here” Link Anchor Text

You probably see this a lot where people use “Click here” or “Learn more” as the linking text. This is great if you want to be ranked high for “Click Here”. But if you want to tell the search engine that your page is important for a topic, than use that topic/keyword in your link anchor text. It’s much more descriptive (and relevant) to say “learn more about {keyword topic}”

Warning: Don’t use the EXACT same anchor text everywhere on your website. This can sometimes be seen as search engine spam too.

7. Common Title Tag Mistakes

Same or similar title text:
Every page on your site should have a unique <title> tag with the target keywords in it. Many developers make the mistake of having the same or similar title tags throughout the entire site. That’s like telling the search engine that EVERY page on your site refers to the same topic and one isn’t any more unique than the other.

One good example of bad Title Tag use would be the default WordPress theme. In case you didn’t know, the title tag of the default WordPress theme isn’t
that useful: Site Name > Blog Archive > Post Title. Why isn’t this search engine friendly? Because every single blog post will have the same text “Site Name > Blog Archive >” at the beginning of the title tag. If you really want to include the site name in the title tag, it
should be at the end: Post Title | Site Name.

Exceeding the 65 character limit:
Many bloggers write very long post titles. So what? In search engine result pages, your title tag is used as the link heading. You have about 65 characters (including
spaces) to get your message across or risk it getting cutoff.

Keyword stuffing the title:
Another common mistake people tend to make is overfilling the title tag with keywords. Saying the same thing 3 times doesn’t make you more relevant. Keyword stuffing in the Title Tag is looked at as search engine spam (not good). But it might be smart to repeat the same word in different ways:

“Photo Tips & Photography Techniques for Great Pictures”

“Photo” and “Photography” are the same word repeated twice but in different ways because your audience might use either one when performing a search query.

8. Empty Image Alt Attribute

You should always describe your image in the alt attribute. The alt attribute is what describes your image to a blind web user. Guess what? Search engines can’t see images so your alt attribute is a factor in illustrating what your page is relevant for.

Hint: Properly describing your images can help your ranking in the image search results. For example, Google image search brings me hundreds of referrals everyday for the search terms “abstract” and “dj“.

9. Unfriendly URLs

Most blog or CMS platforms have a friendly URL feature built-in, however, not every blogger is taking advantage of this. Friendly URL’s are good for both your human audience and the search engines. The URL is also an important spot where your keywords should appear.

I always find it a challenge to balance the aesthetic of the site, while still keeping it usable. On top of that, I don’t want to overload visitors with my sales pitch (for my video courses) … yet I still want to sell videos.

New Video Courses

This blog post itself is an example of that; I want to mention our new web design video training packages, but I also want to give you guys some useful information. So first, the useful information:

The Web ‘likes’ the soft sell.

That means that your product information should be interwoven with something useful or interesting. Pretty simple.

So back to our new home page with the rotating top banner .. pretty nifty stuff and easily done with JQuery … something we teach come to think of it!

When you are working within the web design market there are many things you’ll want to learn and how to slice with Photoshop could be one beneficial thing to learn. Photoshop is a program that every designer should be familiar with and when you begin creating more eccentric designs having the knowledge to do slicing can be beneficial.

There are various steps you’ll need to take when it comes to doing  slicing and we’ve taken the time and created a step by step guide for you.

Step 1:

When you’ve made all the necessary changes within Photoshop to your image you will then want to Save the file making a duplicate copy of that file by doing Image then Duplicate which is an option in the top menu. Now you will want to open your duplicate copy file. Go to Layers then Flatten Image which will merge all the layers of the image. This makes the whole composition into a single layer allowing you to copy any portion you want when you need it. While doing this ensure that you’ve merged the duplicate copy and kept the original copy safe and workable. Everything you do will be done to the duplicate copy now.

Step 2:

During this step you will want to select View then Show and then Guides. This will make the guides visible to you. You will then see blue horizontal and vertical lines which become the guides for you. You can change the requirements of the guides if need be.

Step 3:

Now it is time to open the HTML page for the image that you want to make changes to within DreamWeaver. You will then select the image in design view. This is done just to ensure that you’ve sliced the image allowing you to select portions within the Photoshop file. You will want to select the file that you’ve done the above steps to and select the similar portion within the Photoshop file. This is done by Edit and then Copy. You will then create a new file by doing File and then New. This file will be created using the same width and height as the area which you just copied. You will then need to go to Edit and then Paste. This will now display the new slice image which is ready for you.

Step 4:

Within DreamWeaver you will want to check the width and height of the original image as well as the image name. Now back in PhotoShop you will want to save the new sliced image. This is done by File then Save for Web. You will want to change the image format to GIF and the colors have been set to 256. Once you’ve done this select Save. You will want to specify the location and then Save again. You’ve now replaced the image so check within the HTML of the page within DreamWeaver or your browser.

Placing Guides in PhotoShop

For those that do not know how to place guides within Photoshop after doing the steps within Step 2 you will want to do this:

• Select Move tool from toolbar located on left
• Select the Ruler and drag (keep mouse button pressed down)
• Release mouse where you’d like guide to appear
• Make the ruler visible by View>Rulers or CTRL+R

The guides can be moved for your own personal requirements.

Two files you need when customizing Thesis blog theme are located in the “custom” folder: custom.css and custom_functions.php. Nothing else is needed. Simply copy/paste my codes into the file, wherever in the file you want, and save.

Place menu underneath header

Thesis comes with the menu above header look as default. I have changed that to have my menu placed underneath the blog header. Simply put this code into your custom_functions.php file:

remove_action('thesis_hook_before_header', 'thesis_nav_menu'); add_action('thesis_hook_after_header', 'thesis_nav_menu');

Put a clickable image in your header

As I explained before your blog header is the most prominent feature on your blog and it is very important to have unique image to brand your blog with. That is why I have decided to have a blog header image instead of the default blog title option.

You need to upload your header image to /Thesis/Custom/Images folder on your server. Then place this code in your custom.css file (remember to insert your file name and the file height / width):

.custom #header #logo a { display: block; height: 180px; width: 800px; background: url('images/IMAGE-FILE-NAME') no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header {border-bottom:none; padding:0}
.custom #header { padding: 0; }

Place your avatar beside each post

Having your avatar show next to each post you write is a good way of branding yourself. You can for example use the same avatar as you use as your Gravatar or same  avatar you use as your Twitter profile picture. This way you get the total and consistent branding. Insert this code into your custom_functions.php file (remember to insert the URL of your avatar – image size 50×50 works best):

And this code you have to insert in your custom.css file:

.custom .title-avatar {float:left; width:5em; margin-right:1em;}

Customize Twitter field in your comments

As I spend time on Twitter and use it for promotion of my blog, I included the Twitter username field in my comments and customized it for a clean and simple look on Thesis. What you need to do is install WP TwiTip ID plugin, activate it and put this into your custom_functions.php file:

Have a prominent sponsor spot below content

I used to have Google Adsense block between my content and comments, but because of inefficiency I decided to do something different. Now I have a very prominent and eye-catching block there and I plan to make announcements or put my recommendation messages there.

This has to be done in two steps, first step in custom_functions.php and second step in custom.css. Insert this into custom_functions.php (remember to customize your own message):

And this code you have to insert into your custom.css file (you can customize it by including different colors, borders etc):

.custom div.promobox2 { border-top: 6px solid #2361A1; border-bottom: 6px solid #2361A1; background-color: #CCE1F5; color: black; padding:1em; margin-bottom: 0.5em;}
.custom div.promobox2 H3{ margin-top:0em;}
.custom div.promobox2 a:hover img {border:3px solid #bebebe;}
.custom div.promobox2 a img {border:3px solid #CCE1F5;}
.custom div.promobox2 img {padding: 0px; }

Prominent popular posts in the sidebar

I have done some customization to get the popular posts to be more prominent and eye-catching in the sidebar. What you need to do is you have to install Popular Posts plugin and activate it. In Appearance - Widgets put the “Popular Posts” widget into your sidebar. In “Format of the links” field place this:

<div><a href='%post_permalink%' title='%post_title_attribute%'>%post_title%</a></div>

In your custom.css file place this code (you can customize it with different color and border):

.custom li.widget .callout { padding: 0.846em; line-height: 1.385em; background: #e3f0f2; border: 0.077em solid #addde6; }