AdSense Case Study: Adding the site banner

Now that we've discussed the

href="http://www.makeeasymoneywithgoogle.com/blog/adsense/AdSense-Case-Study-Why-Were-Making-it-Pretty.html">reasons for adding images to

the Invisible Fence Guide that is serving as our

href="http://invisible-fence.ericgiguere.com/adsense-case-study.html">AdSense case study, we can actually get started with the images

themselves.

The first kind of image we want to add to our site is a banner at the top of each page. The banner serves two purposes: it identifies

the site and is also a link back to the site's home page. Technically, of course, you don't have to create banners using images: some sites

create simple banners using text and some creative use of tables or style sheets. But image-based banners are commonly used and very simple to

create.

To create your banner you'll need some kind of graphics software. Personally, I've been a longtime fan of

href="http://www.amazon.com/exec/obidos/tg/detail/-/B0009DVGSS/refid%3Dericgiguerecom">Paint Shop Pro, so that's what I use. But almost any

basic graphics package will do for simple banner creation. The open source (free!) GIMP package is one

option if you don't already own some graphics software.

Here are the steps to take in creating a banner:

• Choose a background color for the banner. You should have some idea by now of what your colors you want to use on your site. If not,

  this is a good time to start thinking about those kinds of design issues. Don't choose a very bright (saturated) color that will jump out and

  overpower the reader, and make sure that there's a nice contrasting color you can use for the text you'll be placing on the banner. Also, avoid

  colors that can't be represented using “hexadecimal” notation.
  Hexadecimal notation for colors looks like this: #FFFFFF (white), #000000 (black), #FF0000 (red), etc. You'll be extending the banner using

  style sheets in Stage 4, so the color needs to be in hex so you can use it in a style sheet.
  All good paint programs have a way to show you the hexadecimal equivalent of the color you've chosen. Write that down somewhere, you'll need it

  later.

• Create a filled rectangle. Now use the color you chose and create a filled rectangle of an appropriate size. Stay away from standard

  advertising banner sizes so that ad-blocking software the user might be running doesn't filter out your (non-advertising) banner. Instead of

  creating a banner 468 pixels wide by 60 pixels high, for example, try (say) 470 by 62, or 500 by 70. Whatever seems good to you. Don't make it

  too high, though, and don't go any wider than about 550 pixels.

• Save the empty rectangle. Before you do anything else, save the rectangle you just created under a different name. This will help

  immensely when you need to start over — it's not unusual to try a few different banners before settling on one you like.

• Choose a contrasting color for the text. Make sure you can read the text on that background! See the examples on page 136 of my

  book.

• Add text to the banner. After selecting an appropriate font (don't get too fancy, if you're unsure then just choose a standard font

  that you'll be using for the body text), put some text on the banner. Keep it short, but don't worry too much about keywords — no crawler will

  be able to read this text. Normally, you'll want to left-justify the text, but make sure the text is vertically centered. Fiddle with things

  until it looks good. This will take time.

• Add any decorative images. This part is optional, but if you can thinking of ways to “spiff up” your banner, do it. This isn't as

  easy as it sounds, though. And it takes even more time.

Once you're done with the banner, save it in either GIF or JPEG formats. Which format you use depends mostly on what's in the banner. If

you've included some photographic images, choose JPEG. Otherwise, use the GIF format to get a smaller image file. Place the banner up on your

website.

Be careful not to violate copyright when you're using images in your banner, or anywhere on your site. Use images you create or take

yourself, or use clip art or other freely-distributable sources of imagery.

If all of this seems like too much work, there are banner creation software packages you can buy. But it's not that much work, really.

Now add the banner to your web pages. The image itself is included with an IMG tag, of course, but you'll want to surround it with an A tag

to make it clickable. You'll further surround it all with a DIV tag so that later you can apply some style sheet magic to it. In other words,

you should end up with something like this:

<div id="header"><a href="/index.html">
<img src="/images/banner.gif" border="0" width="470" height="70" alt="Invisible Guide Home">
</a></div>

A few points to remember:

• Always specify the image height and width in the IMG tag. This lets the browser format the page correctly before it finishes

  downloading the image.

• Use the ALT attribute of the IMG tag to specify the “alternate text” for the image. Crawlers use this information to determine the purpose

  of the image.

• Use a descriptive file name for the image URL. Good for you (so you remember what the image is about) and the search engines.
• Make the banner clickable so that the visitor can quickly return to your home page.

To see a live banner in action, check out Stage 3 of the Invisible

Fence Guide. Actually, why don't I just put a smaller version inline here:

alt="Invisible Fence Guide" border="0" width="352" height="52">

We're not done yet with Stage 3. Next, we'll continue the stage by embedding images in the content.

Eric Giguere is the author of Make Easy Money with

Google, a real (printed!) introductory AdSense book for non-technical

people, available at all fine bookstores. Be sure to download the

free sample chapter for more information about the book.

Comments