Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Banner Advertising for Beginners: Everything I Wish I Knew When I Started

Banner ads, also known as display ads or image ads, are image-based advertisements that are widely popular online. Why are banner ads so popular? They are a cost-effective way to allow advertisers to attractively display their products and services online across an array of websites. Additionally, banner ads allow for increased brand recognition and ad targeting.

Before jumping in and creating multiple banner ads there are a few recommendations to review first. You need to take into consideration the size and position of the advertisement, the context of the ad, the call to action, the file size, and other components. Outlined here are recommendations to help you design suitable ads, effective, and profitable advertisements.

Further Reading on SmashingMag: Link

Banner ads come in different sizes and are used within different positions on a page. Most commonly a website will have an array of sizes and positions from which you can choose to advertise on. Additionally, it is possible to have more than one ad on a page in different sizes or positions. Finding the right size and position for your ads can be a crucial part in determining how successful they are.

Size Link

Every website is going to have its own requirements when it comes to the size of an ad. Typically these sizes are going to be standard sizes set by the many years of practice and existence online. These sizes can often be found present in many different graphic software programs, including Adobe Photoshop and Adobe Flash. Over time ad sizes have changed slightly, with the dismissal of pop-up advertisements, however the general sizes have become rudimentary consistent.

Determining what ad size will be the most beneficial depends on the product or services of which you are advertising. Ideally, you want to reserve two-thirds of the ad for a picture or the main value proposition. The other third should be dedicated to the primary call to action. In the chart to follow you will see the most common ad sizes, of which are strongly recommended for creating any banner ad.

Position Link

As with ad sizes, the position of an ad is entirely up to the website itself, however there have become common standards used across the Internet. Studies have proven that the most successful ad positions are within the content (44.66% response), within the heading (27.32% response), within the left (7.88% response) and right (9.28% response columns, rounded out by rotating ads (4.74% response) and ads below the fold (1.93% response). Generally speaking, ads close to the content, above the fold, and near other captivating content will provide optimal performance.

300 x 250 Medium Rectangle
250 x 250 Square
240 x 400 Vertical Rectangle
336 x 280 Large Rectangle
180 x 150 Rectangle
300 x 100 3:1 Rectangle
720 x 300 Pop-Under
Banners and Buttons
468 x 60 Full Banner
234 x 60 Half Banner
88 x 31 Micro Bar
120 x 90 Button 1
120 x 60 Button 2
120 x 240 Vertical Banner
125 x 125 Square Button
728 x 90 Leaderboard
160 x 600 Wide Skyscraper
120 x 600 Skyscraper
300 x 600 Half Page As

For more information regarding common banner ad sizes and positions, and where these charts originated, please visit the Interactive Advertising Bureau (IAB) Ad Unit Guidelines5.

Have a Strong Heading Link

Immediately grab a user’s interest with a strong heading. If you are selling pet supplies a heading such as “Look Here!” will not fair as well as “Pet Supplies Specials”. Entice users with a short, captivating heading and draw them into your advertisement. Use a variation of font sizes and colors, different from the rest of the ad, to really place an emphasis on the heading.

Creative Copy Link

Users are drawn to creative copy such as “Free”, “On Sale”, “Today Only”, and so forth. Use intriguing copy that will support the heading. Keep the message short and to the point while providing enough information. Capture their attention then quickly deliver the message.

Display Pertinent Content and Images Link

In order for your ad to stand out against the rest of the content on a page you may want to spruce it up with a little visual content and/or images. When doing so, make sure that the content and images are relevant to that of what the ad is promoting. A beautiful scantily dressed lady will surely attract attention and click-throughs, but it is not going to do much good when trying to sell pest control services. Content and images have to be on target with that of the advertisement.

Have a Strong Call to Action Link

Every banner ad needs to have a strong call to action in order to work. Believe it or not, some users may see your ad similar as to how they see an ad on the side of a road. They observe the advertisement and store it within their memory bank, not knowing that the ad is clickable. Speak out to the user and tell them to “Click to See Home Lighting Specials” or whatever the ad is promoting. Also, make sure that your call to action is visually engaging within its size, shape, and color6 by using bright colors and an instinctively clickable shape.

Limit One Offer per Ad Link

Throwing too much at a user at a time will only confuse then, allowing them to miss your offer altogether. Before listing out every single product variation that is on sale think about using the text “All Sizes & Styles on Sale” instead. It is more attractive to the user and accomplishes the same task quicker. If it is pertinent to list all of the products it may be beneficial to run multiple ads within the same campaign.

Optimize File Size Link

The recommended maximum file size for a banner ad is anywhere between 10k and 40k, all depending on the size dimensions of the banner. The smaller the better, but by adding multiple colors, images, and animations the file size can quickly add up. Remember, the smaller your file size is the quicker your ad is able to show up on a page, thus giving you a better opportunity to grab a use’rs attention.

Use Animations and Motion Link

Users are quickly drawn to animation and motion within a page, and because so animated banner ads greatly outperform static banners. Sliding, fading, blink, and other motions will immediately grab a user’s attention, however too much will annoy them. Use visually pleasing animations, of which are completely finished with the course of no more than 15 seconds. As a precaution, the more animations you use the larger your file size will become.

Blend In and Compliment Link

When designing a banner ad for a specific website use colors that will blend in and compliment that of the website being advertised. Making an ad look like that of the website itself will increase trust within the ad, provoking more users to click on it. If an ad is too contrasting and sticks out like a sore thumb users tend to be turned off as they know that they are trying to be sold something. Blend in and earn the users trust.

Run More than One Ad per Campaign Link

It is difficult to measure the success of a campaign based off of one banner alone. Every website is going to have a different audience of which will react differently to a banner. Create multiple banners for the same campaign and test them against one another. As time progresses mix up variations of the banners to create the best performing banners from one website to another website.

Measure Your Success Link

The only way to know if your banners are working is to measure your success. Create reports to see which banners have the highest click-through rate, what websites produce the highest amount of conversions, and so forth. Take note of what is working and what is not. Drop certain elements that are not working up to par and implement elements that are working into other banners. Make adjustments to your campaign upon measuring your success, then measure your success again and repeat as necessary.

Advertising Networks Link

Once you know the basics you are ready to start rolling out your banner ads. Only question is, how do you go about finding websites to advertise on? You may have a specific website in mind already, of which your best opportunity is to contact them directly or to look and see if they have any advertising guidelines or programs listed on their website. If you are unsure of where you would like to advertise, but want to get in the game this is fine as well. Listed below are a few different advertising networks that allow you to spread your ads across a collection of websites.

Google Adwords7 Link

Display ads on websites within the Google Content Network based on keywords and demographics.

Yahoo! Advertising Link

Very similar to that of the Google Content Network, Yahoo! Advertising allows you to place your banner ads on websites across their wide network.

BuySellAds8 Link

Browse thousands of websites to advertise on selecting the website and ad position of your choice. Currently limited to web design and development website ad publishers.

Adify9 Link

Choose from one of many, many different advertising networks from Adify to find your specific niche market.

Commission Junction10 Link

Commission Junction provides a large network of ad publishing websites from which you can connect with to display banner ads on websites, e-mails, RSS feeds, and more.

ValueClick Media11 Link

With a huge network of ad publishers, ValueClick Media provides a good platform for any advertiser on any level.

AdOn Network12 Link

The AdOn Network provides innovative ways to target banner ads, one of which is based on a users browsing history.

Project Wonderful13 Link

Use the Project Wonderful search engine to browse an array of publishers to quickly get your banner ads up and running.


Specializing specifically in text and banner ads ADSDAQ gives you quite a few options on how to run, test, and monitor your banner ads.

Fusion15 Link

Fusion is a great ad network within the web design and development genre with three distinctive advertising options.

The Deck16 Link

The Deck is another great ad network to reach the web design and development as well as creative design community.

These are just a few of the many advertising networks available. For a list of more networks please see iMedia Connection Ad Networks17.

Additional Resources Link

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21

↑ Back to top Tweet itShare on Facebook

Shay Howe is a professional web and user interface designer currently living in Chicago, IL. He writes about web design in his own blog over at letscounthedays and would love to hear from you on Twitter.

  1. 1

    Jad Limcaco

    April 2, 2010 2:16 am

    Hey Sachin, thanks for that tip. Google Analytics is so powerful and it has so many neat features. I think I really need to read up on it and do more research. :D

  2. 2

    Very informative article! Well written and full of useful information. Great work.

  3. 3

    Very interesting article!
    It would be great a little roundup of the best advertising networks on the net with pros and cons, similar to the list at the bottom of the article.
    The tip that Sachin gave you it’s amazing…what about writing a small guide (for newbies) on it?!? =D

    • 4

      Jad Limcaco

      April 2, 2010 7:01 pm

      Great idea Paletta. I’ll see what I can do, maybe we might do another follow-up article.

  4. 5

    Very interesting, but I would like to read more about how to attract advertisers to your site.

    • 6

      Jad Limcaco

      April 2, 2010 7:06 pm

      Hey Illie, how’s it going? When are you going to start your new blog? If you want, you can email me any questions you have and I’d be glad to answer them.

  5. 7

    The article sure is interesting but I would have liked to see more about first time bloggers implementing ads on their sites (what’s the best time, how much should you charge etc. etc.). Overall, great info!

    • 8

      Jad Limcaco

      April 2, 2010 7:07 pm

      That would be great Shay. Let me know when you would like to do it. :D

  6. 9

    Nice article :)

  7. 11

    Jad Limcaco

    April 2, 2010 6:50 pm

    Thanks Sid!

  8. 12

    Jad Limcaco

    April 2, 2010 7:00 pm

    Yes, there are a lot more other ways to earn a profit from blogging. I actually read an article on Cats Who Blog about it. But I think it also comes with time. The longer that your blog has been around and the more followers you have, then the more opportunities you will have as well.

  9. 13

    Jad Limcaco

    April 2, 2010 7:17 pm

    Hey Sanket, great observation. Getting your logo in front of people is definitely a good thing. The more that they see your logo, the better.

  10. 14

    Simple. Effective. Thanks for that.

  11. 15

    Great informative article that’s sure to help any new publisher getting into advertising. Thanks!

  12. 16

    Edison A. Leon

    April 3, 2010 3:31 pm

    I simply thank you for sharing, just went need it!

  13. 17

    Really useful post, have found clients asking for banners more and more of late so this is perfectly timed!

  14. 18

    Hey this is a great article – very comprehensive. Kudos, I know this took a long time to create. We included this site in a recent blog post on money earned from using Buy Sell Ads. You can check it out here if you want:

  15. 19

    Excellent article, thanks!

  16. 20

    Thank you for rounding up the impact of different positioning of banners on the page! That is really an eye opener for me!
    In addition what you said about blending in the site visually, I would say, that the opposite can be also true: I check the other advertisements on the site, and I make something what is identyfical, unique and attractive compared to the other banners. Ie. There are banners using stock photos, I use one with typograpy. There are static banners, I create animation etc. What do you think?

  17. 21

    I like this Site

  18. 22

    Yasser Khan

    July 31, 2010 8:12 pm

    Awesome article, and nice use of images with prominent banner effects!

  19. 23

    Great article, very well written and full of useful information on how to approach banner advertisements. Fantastic work.

  20. 24

    This was such an informative and well-written article. Every marketer should do himself a favor and read it! Looking forward to others!

  21. 25

    I would love to see even more specific guidelines and tools. For example, there have to be vector banner templates out there, but I haven’t been able to find any. How big should the text be? What’s the smallest that text should be? There has to be specific tips and tricks for layouts that work. What are the best color combinations? Where are the numbers – even if they are general statistics.

  22. 26

    jeetesh srivastava

    August 29, 2013 6:34 am

    Nice and helpful post


↑ Back to top