Banner ads are graphics-dynamic or static-that are used to bring visits to a given landing page. Starting from this definition we can reason about how to optimize this indispensable path to activate different digital marketing processes.
In summary, if you want to bring the audience arriving on the website to a sales, booking or quote request page, you should consider placing banners in different areas. The real problem with this solution concerns the graphic congestion that a web banner can cause.
Just think about this: there is a specific Google penalty dedicated to interstitial ads, a particularly invasive type of banner that takes up the entire page. Clearly we are talking about an extreme condition, but it is certainly true that when you choose to use banners to drive traffic to certain resources you need to evaluate several aspects. For example? Here’s what you need to know.
What is a banner ad?
By this term we mean a graphic – in some cases animated – advertisement found on a website. Basically, it is the element of online advertising that allows linking the user to a commercial destination. This is done through a link that functions as a hyperlink.
Above you can see two examples of banners on the Search Engine Journal site located in two different positions of the above-the-fold. The purpose is to promote a good or service. Some banners on mobile do not have links to pages inside or outside the domain but initiate a call to a number.
On a website I can put a banner directed to an internal or external page. In the latter case, it will be appropriate to include a nofollow attribute to prevent Google from assuming a buying and selling of advertising links, an eventuality that could be a source of SEO penalization.
To read: what is and what is the purpose of data storytelling
Banner types, shapes and sizes
As you can well imagine, there are different shapes and types of advertising creative to be added on the website or blog to achieve the goal. That is, to attract user attention and clicks.
The goal is to drive traffic to the right pages, and to do that you have to choose how and where to place banners according to different needs. Let’s start by distinguishing banners from a graphic point of view.
Location
We can talk about sitewide solutions that are placed in common areas of the website – mainly header and sidebar – and those internal to content or editorial that are included in web pages.
Then we have the pop-ups that invade the reading and use of the web page by forcing the user to take an action to close the window and continue browsing. Obviously, we are talking about an increasing level of invasiveness where the user experience is likely to register a step backward.
Form
There are different types of banners, and the distinction is also defined by shape. That can be square and rectangular, with different shapes ranging from the Skyscraper (very tall rectangle that takes up the entire vertical area of the page) to the Leaderboard that performs the same function horizontally.
Everything changes, however, if we talk about mobile banners that are slightly different also because we have to consider that the space of screens is very small. So it is right to preserve the UX.
Size
To address the issue of the size of banner ads on websites, one must consider the Interactive Advertising Bureau (IAB), a standard that has created and consistently updated the official sizes of the main banner ads. Which are gathered in this list:
- Medium Rectangle: 300 x 250
- Square Pop Up: 250 x 250
- Vertical Rectangle: 240 x 400
- Wide Rectangle: 336 x 280
- Rectangle: 180 x 150
- Banner: 468 x 60
- Half banner: 234 x 60
- Micro bar: 88 x 31
- Button 1: 120 x 90
- Button 2: 120 x 60
- Vertical banner: 120 x 240
- Square button: 125 x 125
- Leaderboard: 728 x 90
- Skyscraper wide: 160 x 600
- Skyscraper: 120 x 600
These measurements, taken from Wikipedia, are in pixels and can be managed so that banners can be added to the various sections of the pages. The goal is to assess the right internal balances, both in terms of aesthetics and functionality. Always having conversions as a reference.
How to create an effective banner?
There is a real art to making a winning banner. Not only from a graphic point of view but also to make it easy to click on. There is nothing worse on a website than an advertising element that takes up space but is not clicked on and used by the audience. The goal is always the same: to drive visits to landing pages or product sheets. How does this happen?
Aim for persuasion
To make an effective creative you need to leverage a good combination of visual and copy. First you need to add a reason for people to click, pushing toward the value proposition. That is, what adds the real benefit to the action. In addition, it is important to add a call to action.
This means using a graphic button with a call to action. Usually, following the basic principles of persuasive marketing, it is useful to create short, direct CTAs with imperative verbs.
Pay attention to the SEO of banners
Of course, these graphic elements must also comply with the rules of search engine optimization. As suggested, remember to add rel=”nofollow” if you point to external URLs because they may be recognized as part of a link scheme to improve the ranking of other sites.
Be sure to post images in a lightweight format appropriate to the needs of a fast-paced website. Also, take care of the text alternatives for SEO optimization of the images you post online.
Be careful, the alt tag is used to give a description with meaning to the images and the decorative ones can also have no text but it is always necessary, for structured code, to put the alt tag element=”” empty. Remember, too, that the alt tag does the same function as anchor text for the link.
Don’t forget about Core Web Vitals.
The pleasure of bringing potential buyers to your sales pages should not overshadow one of the key principles of UX: care for the Core Web Vitals, or the elements of the page experience that influence user activity. In addition to speed, you need to take care of some aspects that connect to design.
Banners are also involved in this optimization process, which you can start with a good analysis with PageSpeed Insight. First, make sure the banners are in a lightweight format.
Check that the responsiveness is good as the user interacts with the link. And that there are no graphical jolts when loading the page such that there are problems in terms of cumulative layout shifts. This shift is also achieved by indicating the size of the HTML-side visual.
Simplicity always wins
Needless to say, a banner must not be a collection of (often confusing) messages that confuse the user. You need to be straightforward: colors that contrast with the simple, good-sized font, simple and direct invitations, call-to-action on buttons that help people understand that there is a need for a click. also beware of animations: they attract the eye but risk confusing and weighing down.
Place in the right place
There are shared standards and rules for using these advertising elements on a desktop and mobile web page. Our goal is to find the right solution. This means analyzing the results and deciding based on empirical observation. Just like you do in a Deming cycle.
Basically, you use a format and test it. If it works you perfect it otherwise you change it and try a different solution. In these cases, it is critical to use tools like Google Analytics with related tracked links and heat map tools like Hotjar and CrazyEgg to understand whether the visual is being clicked or ignored.