As advertising evolves for a digital era, more brands are moving away from giant billboards and vinyl banners in favor of digital marketing platforms. One common tactic is posting banner ads on websites and social media platforms, which are more cost-effective and can reach a broader audience.

But with a different medium comes unique challenges — as it turns out, there are many banner sizes to choose from and even a worldwide bureau standardizing them. To optimize your banner designs, you’ll need to follow a few best practices that can help you navigate these recommendations.

Banner advertising: The basics

Banners are a type of display advertising that consists of a rectangle filled with text, a call to action (CTA), and sometimes an image. Readers typically see these banners in a website’s headers or margins. 

The ads aren’t necessarily related to the site they’re on, although they can be. Web publishers build blank spaces into their layouts so other companies can rent them to advertise. To make it easier for designers to create banners for multiple sites, publishers and designers use standardized sizes established by the Interactive Advertising Bureau (IAB).

The IAB standard ad sizes: Desktop and mobile

Among its many guidelines and regulations, the IAB sets standard banner sizes for desktop and mobile banners. They also set banners’ maximum file size, CPU load, and number of allowable file requests. Here are the most common banner ad sizes. 

Desktop banner ad sizes

Desktops have plenty of space on the screen, so the IAB has established many options designers can use. Here are the most common desktop banner sizes and their official IAB names:

• Leaderboard (728x90 pixels) — A wide horizontal banner that developers usually place above the navigation menu or between sections on a page.
• Super leaderboard (970x90 pixels) — A long, flat banner that stretches across the page horizontally.
• Billboard (970x250 pixels) — A large, wide rectangle that offers ample space for images, headlines, and multiple calls to action.
• Medium rectangle (300x250 pixels) — A small but noticeable banner that gives just enough space for a headline and a CTA.
• Skyscraper (120x600 pixels) — A tall, thin ad that stretches vertically along the left or right margin of a page.
• Portrait (300x1050 pixels) — A tall rectangle with a portrait orientation that offers ample space for large image ads.

Mobile banner ad sizes

Designers have to get creative using the limited space on mobile screens. To make ads more consistent across devices, the IAB has set the following standard banner sizes for mobile screens:

• Medium rectangle (300x250 pixels) — A standard banner that’s the same size on desktop but takes up much more of the screen on mobile.
• Mobile small banner (120x20 pixels) — A small rectangle that’s just large enough for a CTA button.
• Mobile medium banner (168x28 pixels) — A noticeable banner size that can fit some text alongside a CTA button.
• Mobile large banner (216x36 pixels) — A large banner for image ads that need more space to clearly display a graphic.

Top tips for choosing the right banner ad size

The shape and size of your banner ad help determine where it can appear and on which devices. For example, a tall, thin banner might work great for a desktop site, but you probably won’t find a good place for it on a mobile page. Here are a few tips to consider when selecting banner ad sizes.

Consider device requirements

First and foremost, think about where you want your banner ad to appear. If you want it on mobile and desktop sites, make two different versions: a billboard or leaderboard that uses the space available on a desktop site and a medium mobile banner that fits nicely onto a smaller screen. Alternatively, you can make one medium rectangle (300x250) that responds to any device.

Match your messaging to the size and shape

Use the width and height of your banner ad to your advantage. If you have enough space for an image ad, find a visual that fills the banner and leaves enough space for clever messaging and a CTA. This tactic is great for showcasing a new product design or creating a consistent brand image. 

If the ad is smaller, make the CTA button the focus instead. Compact banners don’t give you room to explain your brand, so snappy, action-oriented language may encourage readers to click and explore your longer-form content.

Adapt to the platform

Consider the types of sites where you’re placing banner ads and experiment with ways to play to their strengths. For instance, if you’re renting spaces on an online dictionary’s page, a portrait banner works well in the side margins, offering a tall, eye-catching space for vertical content. But if you’re advertising on a tech blog, a leaderboard is your best bet because it fits neatly between headings in the article.

Align with your budget

Larger banners tend to cost more, as do ads placed on high-traffic websites. Determine how much you’re willing to spend and plan your banner ads to make the most of every dollar spent. 

A small banner on a popular social media platform like Facebook or Reddit often costs more, but it may outperform a large billboard ad placed on a site with less traffic. Still, those smaller sites could be worth your time if you cater to their niche market because you’ll be reaching your target audience directly.

5 banner ad design best practices

Once you select the size and shape, it’s time to design the actual content in your banner ad. Consider the following five best practices to help you optimize your banners for maximum visibility and engagement.

1. Evaluate the context

Consider where you’re inserting your ads into the user experience. If readers are in the middle of a critical or engaging task like signing up for a service, don’t use banner ads on that page. This interruption could pull them away from important actions, or they may ignore the banner if they’re engrossed with what they’re doing. Instead, wait to place CTAs in more natural breaks, such as at the end of the article or on related content pages, where people are more receptive and likely to engage.

2. Personalize your banner ads

With the power of automation and cookies, you can tailor banner ads for users’ interests, location, and demographics. For example, if you run a site that offers travel packages, use geofencing to advertise for plane tickets that depart from the nearest airport. This localized advertising style is more likely to suit your users’ specific needs and interests, encouraging them to click on your ad.

3. Establish a visual hierarchy

Start with the most prominent element, like the focal point of an image, and use the golden ratio (1:1.618) to size your CTA button, text, and graphics relative to that starting size. This strategy will create a clear, eye-catching visual hierarchy.

4. Keep it simple

Avoid cluttering the ad with text, CTAs, and images. Remember that your banner will appear when users are doing something else, so there’s very little cognitive load available to interpret your ad. Readers may gloss over a busy image with too many words because it fails to quickly communicate a clear message. 

5. Perform A/B testing

The best way to validate your banner ad designs is to test them with real users. Use an A/B testing tool to test your ads with different audiences. Then, analyze the results to discover which combinations of colors, sizes, and CTAs work best. Update your designs if necessary, and document all your findings so you can apply the lessons you learned to future marketing campaigns.

Drive more conversions with Webflow

Choosing the right banner ad size is just the first step in creating an effective digital advertising strategy. The true power of banner ads lies in their ability to drive qualified traffic to your website when properly designed and strategically placed. Well-crafted banners with clear messaging and compelling visuals can significantly improve click-through rates and introduce new potential customers to your business.

By combining effective banner design with a thoughtfully created website experience, you can create a seamless journey that turns ad clicks into meaningful conversions. Start by implementing the best practices outlined above, and continuously test and refine your approach to maximize your return on investment.