Email banners have emerged as vital tools for conveying your message and establishing your brand identity from the moment your recipient opens your email. But what are the optimal email banner dimensions and how do you design your email so it displays perfectly on every device and screen? Join us as we delve into the realm of pixels, proportions, and precision, and uncover how the right email banner dimensions can transform your email into engaging works of art.
What is an email banner?
An email banner, often referred to as an email header or email header image, is a graphical element placed at the top of an email template or message. It is one of the first visual elements that recipients see when they open an email, and it typically serves as an introduction to the content of the email. With the right email banner the heavy lifting is done for you, so let’s make sure you get it right.
Email banner size and why it matters
If you’re not yet sold on the magic of a good ol’ email banner, here’s the scoop. By including one in your next marketing message, you can skyrocket your click-through rates by up to 10%. And with all that potential, it’s a no-brainer that you’ll want to optimise your email banner to look good across all types of screens and devices.
While it may take a little extra time, getting your email banner dimensions right for your audience can really give your next marketing campaign an edge. Not only does it set your business up for marketing success, it serves the practical purpose of enhancing the readability of your message.
Still not convinced? Here’s what happens if you don’t consider your email banner size.
Email banner dimensions the wrong way
Oversized banners
When your email banner exceeds the optimal dimensions, it may appear too large on smaller screens, leading to distortion and a cluttered appearance. Too wide and your emails might trigger horizontal scrolling on mobile devices… a sure fire way to spoil the overall user experience.
Undersized banners
Undersized email banners are another thing to be wary of. When email banners appear too small, they often appear pixelated, unclear and frankly, a little unprofessional. All in all, this spells trouble for any email marketing campaign.
Good news is, these mistakes are pretty avoidable, and to show you how we’ve included a brief guide to the correct email dimensions below.
Dimensions for different email banner types
There’s a couple of things you need to know before choosing your dimensions for your banner. The first is that you need to optimise your banners for both mobiles and desktops. This comes after a Litmus test found that 43% of emails are opened on a mobile phone device ahead of being reopened on a desktop later in the day. The second is that depending on what marketing tools you use, optimising for a broad number of screens might mean uploading a couple of sizes of your banner image yourself. At Vision6 we have some incredible pre-built templates to start you off on the right foot.
Pro-tip: if you ever come across that old 600px rule, just disregard it. Our smart technology has developed lightyears since then and it’s ancient history now! So, instead let’s focus on what really works in this fast-paced digital world.
Email header size
When it comes to making your email header it might help to think of it as the face of your email. It’s the first thing that your customers are likely to see so you want to keep it light on information and bright on design.
A good rule of thumb is to use no more than 200px for the height of your header. To be more specific, desktops allow for anything between 650px to 700px for the width and 90px to 200px for the height.
If you have a lot of customers opening your marketing messages on their mobile phones, the optimal size for your banner is 350px for the width and 100px for the height.
Pro-tip: Aim to use the first 350px for the most valuable information….You might consider building brand recognition in the header by giving your logo pride of place or to really drive clicks, give your CTA the centre stage.
Email body banner size
When it comes to email body banner sizes, there’s no one-size-fits all answer. While you might have some creative leeway when designing your body banner, you should aim for to keeping it between 650px to 700px for width. This ensures your banner fits well on both desktops and mobile devices.
Next, keep the height relatively small, around 100px to 200px. This way, your banner won’t dominate the email, allowing recipients to view the rest of the content without endless scrolling.
Email footer size
If you’ve done the header and body part of your email banner right, your customers probably won’t pay too much attention to the footer. That’s not to say it doesn’t matter, in fact it’s quite the contrary. A good email footer can be used to tie up any of the legal loose ends you might have.
For example, it’s here where your customers will find the unsubscribe link, how to contact you and anywhere else they can find you.
In terms of dimensions anywhere between 650px to 700px width and up to 150 px height for desktops is good; and for mobile device screens 350px width and 100px height is recommended.
Email banner design best practices
Now that we’ve sorted the dimensions, let’s dive into the design best practices to make your email banners truly stand out.
Banner Content
From eye-catching visuals to compelling text, the skies the limit with what you put in your email. You might think about showing off your reviews or including some testimonials. Either way here’s a couple of tricks to have up your sleeve:
- Limit size: in our fast-paced digital world, brevity is key. A good rule of thumb is a 50-75 character limit of compelling copy. By being tough on this point, you can get to the heart of your message quickly while bringing your audience along with you.
- Make use of whitespace: Avoid the temptation to overcrowd your email banners with excessive content and graphics. Embrace whitespace around your text and images to create a visually appealing and uncluttered design.
- Ensure readability: Choose fonts and font sizes that are easily readable on various devices. Generally, a font size of 14-16 pixels is ideal for the main text in your banners. It’s also a good idea to pick a contrasting font colour, not just to make it pretty, but to make it easier for vision impaired users to navigate your message.
- Keep it Responsive: Your subscribers may access emails from different devices, so test your banners across various platforms to ensure a seamless user experience. A responsive design guarantees that your email banners look flawless on desktops, tablets, and smartphones alike.
Email banner file size
When we talk about email banner file size we’re really talking about the amount of storage an email takes up. A large email banner file will have a slow load time which will likely spend your recipients attention and prompt them to abandon your email altogether.
It’s also important to note that different email service providers have caps on email file sizes before directly sending them to spam. As long as you’re keeping your email banner file size under 100-150 KB you’re on the right track.
Pro-tip: When using graphics keep the file size small and stick to standard web image formats like JPEG or PNG and consider compressing your banner images to reduce file size without compromising quality. You can do this in platforms like canva.
Email-safe fonts
Stick to web-safe fonts to ensure your banners appear consistently across all email clients. Popular choices include Arial, Helvetica, Times New Roman, and Georgia. Avoid using obscure fonts that might not render correctly.
Email testing
When in doubt, test, test, test. Testing your emails before you send them out to your subscriber base is really the only way to be confident about how your emails will look in recipient inboxes. Performing email testing across different devices and email clients ensures that your banners get the look across all your recipients.
Email template dimensions
Email width size
Like we mentioned, gone are the days of strictly adhering to the 600px rule. Modern email clients have evolved, and now you can experiment with wider email templates for a more immersive experience. Consider increasing the width to 700 or 800 px, allowing more content to fit without sacrificing aesthetics.
Email length size
No one likes a long, rambling email so consider keeping your email length between 1500 px to 2000 px. Not only will it keep your audience engaged but it’ll give them every opportunity to make good use of your call to action button.
Email button size
For call-to-action buttons the main criteria is to make it pop. Depending on the dimensions of your other email features, a large button is likely to encourage more clicks. Opting for a size of at least 44×44 pixels is not a bad place to start.
Conclusion
Being a savvy marketer, you can now take advantage of a nifty email banner to not only keep things legit but also build trust with your audience. It shows you’re all about playing fair and sticking to ethical practices, not to mention keeps your emails looking fresh and cool. By optimising your email templates, you’ll elevate your email marketing campaigns to new heights!
