Email banners: Types, sizes, and how to create them in minutes

It is difficult to imagine a modern promo newsletter email without a well-designed banner. Neglecting this element or designing it poorly may cause recipients to overlook the rest of your email. In fact, you have surely seen thousands of marketing emails with both good and bad banners.

The banner is the first element your recipients see. Therefore, it should be catchy, evocative, and emotionally appealing. Getting the right size for your banner is essential to ensuring that it fits well within your overall email design.

This article reviews the most popular types of banners, discusses the best design practices, and shows how to easily implement your ideas with Stripo.

Key takeaways

1. The ideal banner size is usually 650-700 pixels wide and 90-200 pixels tall for desktop, and 350 pixels wide and up to 100 pixels tall for mobile devices.
2. Dark mode is tricky when it comes to email banners, as it may alter text, background colors, and transparent elements. Banners created as a single image, however, tend to stay intact.
3. Email banners are usually harder to build for Outlook because they require thorough coding to achieve a good look, responsive behavior, live text over banners, and background-image banners in general.

What is an email banner?

An email banner is a special newsletter element that usually appears at the start of the email right after the header. In most cases, it spans the full width of the email and consists of imagery and supporting text.

The main purpose of an email banner is to draw attention and convey important information quickly through powerful visuals and impactful copy. It tells the story, promotes products, teases events and issues warnings, and serves as a useful addition to any email design.

(Source: Email Love)

Header banner vs. signature banner

Regular banners are fairly straightforward, but there are also header banners and signature banners. Even though they may sound the same, their overall looks and placements differ.

Header banners, as the name implies, are the first thing recipients see and usually replace the top header stripe with a full-fledged banner — there are no separate menu buttons or logo stripes, just the banner itself. It has everything you may need, such as your brand logo, impactful copy, attention-drawing imagery, and a CTA button, which makes it both visually appealing and useful in terms of clicks.

(Source: Email Love)

Meanwhile, the signature banner is placed near your email signature, usually directly below. Its main purpose is to promote content subtly (due to its compact size) in regular emails and to establish continuous brand visibility.

(Source: Mysignature.io)

Why email banners matter

Email banners may have a simple structure; however, their benefits for email marketing are undeniable. Banners promote your products and events, inform recipients about various updates and important aspects of your business, showcase your successes and case studies, and drive sales and brand visibility. With just three elements — image, text, and CTA — the range of possible designs and adaptations for any situation and business is limitless.

Types of email banners by purpose

Email banners may look like a simple attention-grabbing element, but they can serve several distinct purposes depending on how they're designed.

Promotional banners

Promotional banners are the most common type. The standard design includes the product image, short copy emphasizing a killer feature, description or benefit, and a CTA button to encourage recipients to buy. The good thing about this type of banner is that you can use it to promote virtually anything you want.

(Source: Email Love)

Seasonal and holiday banners

Holidays and seasonal events are real treasure troves for any marketer, and banners are your primary tools for drawing attention to these occasions. Banners of this type usually have a festive design with elements relevant to the occasion. For example, a typical Christmas-themed banner may feature snowflake design elements, images of gifts, and text that draws attention to your overall content or simply wishes readers a happy holiday. These banners focus on drawing attention to the event, but you may also add various CTAs or promote holiday-themed products or services.

(Source: Email Love)

Hiring banners

These banners have limited applications, as their purpose is to inform recipients about potential job opportunities. Their function is to communicate the essential details of the job offer — nothing more, nothing less.

(Source: Stripo template)

Social proof banners

In terms of numbers, 97 percent of purchase decisions are influenced by customer reviews. You can incorporate social proof into your email banner — such as a customer video testimonial or screenshots of reviews — to make your products or services even more appealing.

(Source: Email Love)

Corporate branding banners

These banners focus on making your brand and its distinguishing features stand out. Incorporate your brand colors, fonts, mottos, and imagery associated with your brand to increase visibility and recognition.

(Source: Email Love)

Ideal email banner sizes

Now, let’s talk about banner sizes. They take up quite a lot of space in your email design, so it's important to understand how much: 

• desktop: 650-700 pixels wide, 90-200 pixels tall;
• mobile: 350 pixels wide, up to 100 pixels tall;
• signature banner (footer): 600 pixels wide, 150 pixels tall;
• file size: around 40 KB, in PNG format.

Email banner design best practices

To make your banner visually appealing and impactful, consider the following design approaches.

Keep it on-brand

Creating an on-brand email banner is actually fairly straightforward. First, use the brand colors associated with your business. You can incorporate them as font colors, background colors, or design elements. Next, choose the font or fonts you want to use. Most businesses have associated fonts, so using these fonts is a sure way to create an on-brand email banner. Also, don’t forget about your logo and related design elements (such as PlayStation's gamepad button icons).

(Source: Email Love)

Color, contrast, and readability

The colors used in your banner are about both visual appeal and readability. You can use bright colors to attract attention, but that attention will be wasted if the banner's visuals become a blur that's difficult to read.

Readability is affected by the background colors, their contrast, how they appear next to each other, the fonts, their size and color, and the overall arrangement of banner elements. To ensure that your banners are not only easy to read but also accessible, we recommend using contrast checkers to evaluate how each color combines with others to create a clean, legible banner.

We also recommend using our Accessibility Checker, which identifies accessibility issues and offers solutions to maximize the readability of your banners and emails.

(Source: Email Love)

Typography that survives every inbox

To begin, adding text on top of banners is not always a great idea. Depending on the fonts you choose, this text may cause problems, as custom banner fonts are often unsupported by email clients. As a result, they will be replaced by standard fonts such as Arial or Helvetica.

To avoid this kind of trouble and keep your design vision intact, add your copy directly to the image. Render all the necessary text so that the picture and the copy form a single unit. This is a sure way to keep your banner copy intact across all email clients.

(Source: Email Love)

Visual hierarchy and one clear CTA

To make your email banner even more attention-grabbing and impactful, you must apply the proper structure. Email banners typically follow a clear hierarchy. For example, going from top to bottom, you might see a company logo or a product name. Right below is a short, catchy text outlining product benefits, an event description, or a message. After that, it is wise to add a button with a similarly impactful call to action. And last but not least, the image itself appears. It must be relevant, clear, and harmonize with the message in the banner copy and the rest of the email.

(Source: Email Love)

How to create an email banner in Stripo step-by-step

Creating banners with Stripo is quite easy. Our special block allows you to design beautiful banners in a matter of minutes. 

Drag the Banner block into your email

First, add a banner to your email template. Drag and drop our dedicated Banner block into your template.

Upload your image

After that, click on the added banner to open its settings menu. Before tweaking the dimensions and other parameters, attach an email banner image. You have several options: uploading an image from your device, selecting a stock image, or generating a unique image using our AI Image feature.

For this example, we picked a Photostock option. All you need to do is click on the desired image (or enter a search term if you don’t see suitable options right away), and it will attach automatically to the banner.

Once the image is attached, you can proceed to tweak the banner's parameters.

Tweak image size

To set the correct email banner size, go to the Settings tab; the Size section contains all the controls you need.

The following buttons (from left to right) allow you to set the right size for your banner:

• fits the image to the size of the container;
• restores the actual image size;
• enables width-tweaking mode;
• enables height-tweaking mode;
• size-tweaking buttons (apply separately to width and height modes).

Set the appropriate dimensions using these buttons, and you're good to go.

You can also set a Crop Shape in the corresponding section by choosing from predefined orientations (both vertical and horizontal).

Meanwhile, to make your email banner displays correctly on mobile screens, click the Mobile View option to open the mobile version settings in Stripo.

The Responsive Image option is enabled by default, so in most cases, no further action is needed — it automatically adjusts the banner image to fit different screen sizes.

You can turn this option off, but we do not recommend doing so because the banner image will remain static regardless of the screen resolution on which it is displayed. This may result in a poor image and content display in your banner.

Changing the Crop Shape works the same way as it does in the desktop version.

Add images, texts, and links

To add a button to your banner, use the option that allows you to place another image on top of the banner. You can mix and match your background image with additional images to create unique designs or draw attention to your banner.

To do this, click the Image option while you are in the Banner block settings.

You’ll see the same image-selection menu used earlier for the banner itself. Just choose the appropriate option and proceed.

Once added, your image will appear at the center of the banner, along with a small menu offering options to set the image's opacity and rotation, flip it as needed, and apply visual filters.

To change the size of the additional image, drag the frame corners. You can also move the image within the banner borders by clicking and dragging it. You can even rotate it manually by dragging the dot above the frame.

You have now added your CTA image to draw attention. To make your banner clickable, simply add a link in the corresponding field. Once the link is added, the entire banner becomes one big CTA button that directs recipients to the desired page.

If you need more options for decorating your banner image, you can add text on top of it. Click the Text option above your banner.

The text node will automatically appear in the center of your banner, and a tab with different text options will appear.

To enter your text, just double-click the text node to select the default text, and then type your new text.

For tweaking options, you have a wide range. You can change the position, size, and rotation manually by dragging the corners of the text node frame or by dragging the entire node, as with the image.

Regarding the text itself, you can do the following:

• select the text font, size, and color;
• choose the text alignment;
• apply styles such as bold, italics, underline, or strikethrough;
• change the letter case to uppercase or lowercase;
• set the opacity, rotation, and flip the text as needed.

Structural banner types you can build

1. Banners with a single image and your value proposition

This is the most common type of banner in promo emails. You can use it to announce a site-wide sale or to promote a single product. The choice depends on you.

(Source: Email Love)

2. Banners with two images

Two-image banners are pretty rare, but you can use them to promote multiple product variations (such as colors, flavors, or designs) and make them visible to your audience.

(Source: Email Love)

3. Framed banners

Frames are used either to separate two images within a banner or to emphasize the banner’s call-to-action.

You can use our frame or upload your own. Any photo editor offers a wide selection of frames. Uploading custom frames allows you to create more unique newsletters. 

Please note: When uploading an image that has already been framed with a third-party tool outside of Stripo, you cannot make further changes to it within Stripo or any other template builder. Frames are also uploaded as additional images.

(Banner without frames)
(Source: Stripo template)

(Banner with frame)
(Source: Stripo template)

The first banner looks fresh, but the value proposition is easy to overlook; the second looks more refined, stressing the text. The chances of overlooking the offer are very low.

4. Banners with a CTA button

Adding a CTA button is another common approach. It's an effective choice if you want your banner to be both visually stunning and functional.

(Source: Email Love)

5. Banners with additional transparent images

Newsletter design is a flight of imagination. You can add anything you like. Seasonal images, for example, can match the holiday spirit. Transparent images allow you to make subtle changes to your newsletter without changing the overall design.

(Source: Email Love)

6. GIF-animated banners

GIF-animated banners are a complex subject, and we have already discussed why we should use them in email newsletters. GIF animations draw attention to your value offer and demonstrate a wider range of products on a single screen.

(Source: Stripo template)

7. Banners with videos

When used correctly, videos build stronger emotional connections with recipients. Videos are also useful when your value proposition is too big to express in words or when you need to demonstrate exactly how to use your tool.

Videos placed on the first screen function as email banners. Use them in your email campaigns whenever necessary. In our “How to add video in emails,” we explain how to embed videos in emails with Stripo quickly and easily.

(Source: Stripo template)

8. Banners with an AMP carousel

This type of banner is, in fact, a compilation of three to sixteen banners displayed on a single screen. The user's need to click the Slide button encourages engagement and interaction with your audience.

(Source: Stripo template)

Although it may sound complex, the Stripo editor has a dedicated Carousel block that allows you to create carousels without any technical knowledge. Just add the images you want to feature in this email element, and you are good to go. For more about carousels, see our Help Center article.

Make banners work everywhere: mobile, dark mode, and email clients

Banners may seem like a straightforward email element that you can design, add to your email, and forget about. However, making them work across various mobile devices, dark mode, and different email clients is a big part of creating a flawless email.

Responsive behavior on mobile

Making your email banner look good both on desktop and mobile is tricky. You have several possible options to achieve this:

• create a banner that scales down proportionally to fit the screen width. But keep in mind that text inside the image may become hard to read;
• design your layout to stack vertically, with all elements (text, buttons, and images) stacking one below the other; 
• create a separate mobile banner and display it instead. 

These three ways share common design principles that simplify the overall creation process: Keep your message short and centered, prioritize readability over appearance, and conduct thorough testing.

Discover more about how you can make your email banner (and the entire email) responsive in our dedicated article: 

How banners render in dark mode

The behavior depends on the type of banner you use, so we'll consider each one below.

Image banners

This banner type usually stays intact, no matter what mode they are displayed in. Email clients recolor the background of the entire email while the banner image itself stays the same. This applies to all formats (JPG, PNG, and GIF). The only problem that may arise is that an initially bright banner image will appear even brighter against a dark-mode background.

Live-text banners

Here’s where all the nuances begin. If your banner uses HTML text, background colors, and buttons, dark mode may change those colors. Some clients change white backgrounds to dark, black text to white, or adjust brand colors. As a result, readability may improve, but the original design may also change.

Transparent content

Because transparent logos, images, and various elements are essential to many banner designs, they deserve special attention. In general, transparent content can look bad if it was initially designed for a specific background color. For example, a dark logo on a transparent background is likely to simply disappear when the email is opened in dark mode.

To avoid these issues with banners in dark mode, here are some tricks you can apply:

• avoid pure black or pure white in banner designs, as both invert when switching modes;
• design CTA buttons with high contrast, in both their background and text;
• create separate light- and dark-mode versions of your content;
• use live-text, but check thoroughly how colors change in dark mode.

The easiest way to check how your email will look in dark mode is to preview it. Stripo has a comprehensive Preview feature that allows you to check both the desktop and mobile views of your template.

In addition, dark mode preview is available with a single click.

Outlook, Gmail, and Apple Mail differences

In addition to responsiveness and dark mode, differences in how your email banners render in popular email clients (Outlook, Gmail, and Apple Mail) can present a bit of a headache. These differences are important to consider when designing banners, so let's discuss them briefly.

The main rendering issues in Outlook are as follows:

• Outlook doesn't handle responsive content very well;
• Outlook supports fewer custom fonts;
• Outlook requires careful coding of inline styles for responsive behavior, live text over banners, and background image banners in general.

Gmail performs much better, though it has its own nuances:

• Gmail clips large emails, so the file size of your banner is extremely important;
• you need to keep an eye on dark mode and how it changes text and background colors;
• custom font support is satisfactory, but there's always room for improvement.

Apple Mail is generally the least accommodating of the three. The only recommendation worth noting is to use a separate @media attribute (prefers-color-scheme: dark) for a more user-friendly dark mode experience.

Image vs. live-text banners and why they affect deliverability

When designing your email banner, you have two approaches: image or live text. This is the difference between them:

• an image banner contains all graphics, text, and even CTA buttons as a single image;
• live-text banners incorporate HTML text placed over an image or background color.

Although image banners help maintain a consistent appearance across all email clients, they also have a number of downsides that may affect email deliverability:

• emails with more images and less text appear more suspicious to the spam filters, which can't fully read the content within images;
• if your image is blocked, recipients will see a blank banner instead of your offer and may throw your email into the spam folder due to the broken appearance;
• image banners present accessibility challenges, as screen readers can’t read the copy in the banner;
• large image files slow down email loading.

We are not telling you to fully abandon the idea of using image-based banners in favor of live-text ones. Live-text banners also have their fair share of inconveniences, as they are harder to design perfectly across all email clients.

We advise you to keep a balance across your emails, as the banner is just one element. For text-heavy emails, use an image-based banner. Conversely, live-text banners are a good choice for short emails with a low text-to-image ratio.

Accessibility for email banners

Accessibility is a cornerstone of any email; around 2.2 billion people worldwide have near or distance vision impairment. This represents 27 percent of the global population, so the chance of having people with visual impairments in your audience is quite high.

As with any part of the email, your banners should also be accessible, so consider the following:

1. Use live text when possible to make your email banners readable by screen readers and translation tools and scale better on mobile.
2. Always add alt text that clearly explains exactly what the banner conveys. This is especially important if the banner only contains an image, or if important text is drawn on the banner rather than being added as separate text above it. 
3. Design for mobile readability by ensuring that banner text remains legible on small screens.
4. Incorporate animations and GIFs carefully — avoid fast or flashy motion. The best banner animations are smooth, brief, and not essential for understanding the message.
5. Maintain color contrast across all banner content. WCAG recommends a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text.

Important note: You can test your email banner readability directly in Stripo using our Accessibility Checker, which tests your entire email for various readability and accessibility levels and identifies issues and suggested fixes.

Read more about email accessibility and its best practices in our special article: 

Test and measure your banner

Before considering your banner finished, there is always room for testing and finishing touches.

Preview and test rendering 

For each banner you create, preview it to see how it looks. Most importantly, conduct a live test render. Send a test email with the banner to your own inbox or to colleagues' inboxes across various email clients. See how your banner looks, check it on mobile screens, and identify any imperfections before sending it to your recipients.

In addition, it would be wise to test your email in Email on Acid, which shows how your email will render across dozens of email client versions, hundreds of mobile devices, and light and dark themes.

Stripo offers direct integration with Email on Acid. Find out how it works in our special article: 

Make it clickable and track performance

Apart from its visual appeal, your banner should be functional, so making it clickable is a good idea. To do this, add a link to the image to make the entire email banner clickable. If your banner uses text over an image, you can add links to individual text elements, such as the CTA button.

This approach will direct your recipients to the appropriate links on your website and enable you to track banner activity and effectiveness.

Wrapping up

Email banners are reliable tools for drawing attention and conveying messages through visuals and impactful text. They allow you to make your emails feel unique and maintain brand consistency in your designs. Although banners may seem straightforward to create, there are pitfalls in the design process. We hope that this article will provide the techniques necessary to avoid these challenges and create the perfect email banner your newsletter deserves.

FAQ

1. What size should an email banner be?

The ideal email banner size for desktop is 650-700 pixels wide by 90-200 pixels tall. A mobile banner size of 350 pixels wide and up to 100 pixels tall is recommended. Signature banner size should be 600 pixels wide by 150 pixels tall, and the overall file size should be kept at around 40 KB in PNG format.

2. What should I put in an email banner?

Your main banner content should include a clear image, impactful text to draw attention, and a CTA button.

3. What is the difference between a header banner and a signature banner?

A header banner typically begins the email and replaces the usual headers with menus and other buttons. Signature banners are placed near the end of the email, and their purpose is to promote content subtly and maintain a visible brand identity.

4. How do I make an email banner clickable?

Just add a link to your banner image to make the entire banner clickable. You can also add links to live texts overlaid on banners.

5. Why does my email banner look broken on mobile?

There are many reasons for this. For example, your email may display the desktop banner, which can result in unreadable text or weird banner dimensions. Or the image you used may have a ratio that is not mobile friendly. Furthermore, some email clients (e.g., Outlook) do not handle live text over backgrounds well.

6. Should I use an image or live text for my banner?

Image banners maintain their look, no matter what, but they may affect deliverability. Live text banners are easier to create but are more difficult to design consistently across all email clients and modes. The choice depends on your design vision, time constraints, and capabilities.