Banner Advertising for Beginners: Everything I Wish I Knew When I Started
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Sponsor OWD on GitHub
Take a break with a 3D game built on Netlify!
Click here to kickstart your project for free in a matter of minutes.
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:
- The Path To Advertising Nirvana
- Why Web Designers Should Not Use Ad Blockers
- Successful Strategies For Selling Ad Space On Low-Traffic Websites
- Online Advertising And Its Impact On Web Design
Popular Ad Sizes and Positions
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
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
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.
| Rectangles | |
|---|---|
| 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 |
| Skyscrapers | |
| 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 Guidelines.
Banner Ad Best Practices
Have a Strong Heading
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
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
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
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 color by using bright colors and an instinctively clickable shape.
Limit One Offer per Ad
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
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
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
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
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
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
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 Adwords
Display ads on websites within the Google Content Network based on keywords and demographics.
Yahoo! Advertising
Very similar to that of the Google Content Network, Yahoo! Advertising allows you to place your banner ads on websites across their wide network.
BuySellAds
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.
Adify
Choose from one of many, many different advertising networks from Adify to find your specific niche market.
Commission Junction
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 Media
With a huge network of ad publishers, ValueClick Media provides a good platform for any advertiser on any level.
AdOn Network
The AdOn Network provides innovative ways to target banner ads, one of which is based on a users browsing history.
Project Wonderful
Use the Project Wonderful search engine to browse an array of publishers to quickly get your banner ads up and running.
ADSDAQ
Specializing specifically in text and banner ads ADSDAQ gives you quite a few options on how to run, test, and monitor your banner ads.
Fusion
Fusion is a great ad network within the web design and development genre with three distinctive advertising options.
The Deck
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 Networks.
