Optimal email banner size and design tips

Every marketer knows that branding, visually engaging branding, matters. In a recent HubSpot survey, 20% of marketers reported to see a direct correlation between their design choices and an increase in email engagement.

In email marketing specifically, one of the first design elements a recipient views is your banner, making it crucial to grab the attention of the reader at first glance. An email banner should effectively convey your message, resonate with your audience, and be responsive regardless of what device your recipient uses to view your emails.

Let's discuss email banner best practice to follow that will ultimately lead to improve results of your email campaigns.

What is an email banner?

An email banner is a strategic design element element that appears at the top of your emails to catch the immediate attention of your reader. Sometimes called an email header, your banner is where you’ll introduce the main purpose of your email, like that amazing sale you’re advertising or the product launch of the century, and reel in customers’ so they scroll through the rest of the email.

Your email banner is your chance to make a fantastic first impression. Let’s explore the best email banner sizes and best practices to keep in mind.

Ideal email banner sizes

It is an outdated solution to automatically set all email banners to a width of 600px. With screen sized of both mobile and desktop devices varying so widely, it's important to ensure your email banner size is responsive for optimal viewing experience.

• For desktop users, a banner 650-700 pixels wide and 90-200 pixels tall is ideal
• For mobile users, the ideal banner is 350 pixels wide and up to 100 pixels tall

These updated dimensions follow responsive design best practices allowing email banners to render properly in a variety of email clients and devices.
Responsive design allows your email design to automatically adjust to the screen size of a customer’s device.

PRO tip: using an email design template that is already built to be responsive makes following this best practice a breeze.  

Impact of email banner size on campaign performance

A banner that’s poorly sized could become distorted when customers open it in their Gmail, Outlook, or whatever email platform they use.

This makes your email look less professional and it can also be harder to read so it doesn’t get your message across as well. A poorly sized email banner can also affect the user experience. If the banner is too wide, for example, it forces customers to scroll horizontally and it doesn’t allow them to see the entire banner in one view.

Not only do these issues affect the overall experience customers have with your email but they can also squander the excellent engagement opportunity that a well-designed email banner can be. According to Opensense's data, email banners can have 5-10% engagement rates,  a significant enhancement compared to the average click-through rate of 1.4% in emails.

Best practices for email banner design

Your banner size is an important part of designing an effective email banner, but it’s one of many. Check out these best practices to make your email banner even more powerful in garnering the engagement of your recipients.

• File size: Any image in your email, but specifically your email banner, should be of high-quality. The ideal image should be download as a PNG at a resolution of 72dpi at 40kb or below.
  ‍
• Inverted pyramid: This "rule" in email design relates to adding the most important information at the top, working your way down to the least important information. When designing your email banner, make sure it clearly communicates the most important message in your email.
  ‍
• Brand consistency: As important as it is that your email banner makes a positive impression and communicates the main purpose of your email, it also should align with your brand. Make sure the design uses your brand colors, logo, or other aspects that make it consistent with your brand’s visual identity.
  ‍
• Text: Your banner needs to communicate your message, but less is more. Keep your copy sparse so it isn’t visually overwhelming and so the focus stays on your core intention. Ideally, 45-75 characters on a line is the sweet spot.
  ‍
• Email-friendly fonts: Make sure you use email-safe fonts that render reliably on major email platforms.
  ‍
• Accessibility: You want your banner’s message to reach as many customers as possible, and that includes customers with disabilities. Make sure to include accessibility features like using alt text so viewers with visual impairments can understand your message and using color combinations that viewers with color blindness can see.

• Interactivity: Your email banner doesn’t have to be just a plain image or text. Consider making it interactive, such as with a GIF or a video that grabs your viewers’ attention.
  ‍‍
• Testing: You can follow all the rules for proper email banner size and design, but it’s still important to test it in action to make sure it shows up the way you want it to. Always send yourself a test email and see how that test email looks on different devices and platforms before you send it to your subscriber list.

For inspiration, check out these excellent email banners. This one from Beefree's template catalog clearly communicate the purpose of the email, remains consistent in branding throughout and plays with visual and text hierarchy to guide the reader's eye.
‍

This other email banner uses a navigation bar to keep the reader in the brand's ecosystem allowing readers to learn more about the marketing agency.

This simple, yet effective email header communicates clearly the purpose of the email using imagery and text and has a clear CTA to lead the reader to complete the desired action without needing to scroll.

Common mistakes in email banner design

When creating a strong email banner, it’s just as important to avoid doing the wrong things as it is to do the right things. Watch for these common pitfalls in email banner design:

• Over-designing: Your email banner is prime real estate in your email, so of course you want to make the best use of that real estate. If you try to cram too much into that banner, though, you may lose your core message entirely because viewers don’t know where to look. 
  ‍
• Hard-to-read fonts: Your email banner is a wonderful place to get creative and build visual appeal, so of course you want to use fun design elements and fonts.
  But at the end of the day, the purpose is to send a message, so make sure the ornamental fonts you use are still clear enough that they’re easy to read.
  ‍
• Lack of responsive design: We’ve touched on this above but it’s also a common misstep that’s worth mentioning. Considering that 46% of emails are opened on mobile devices, every email and banner you create must be responsive to maintain its visual quality on any email platform.