In this article, we’ll show you the ins and outs of creating email banners. Learn more about the types of email banners, their ideal dimensions, and how to enrich your email design with banners using Stripo.
Banners are an incredible tool to make your emails look more systematized, draw recipients’ attention to the critical elements of your message, and enable you to stand out in your readers’ crowded inboxes. However, an incorrect email banner size can devastate the structure of your content and downgrade your efforts.
In this article, you will learn more about the perfect width and height for a banner image and the fundamental things to keep in mind when creating one for your email marketing campaigns. We will also provide you with useful tips about how to build catchy banners with Stripo within minutes.
What is an email banner?
It is a high-quality image positioned at the top of your message to highlight its main purpose and tone. Banner images can be accompanied by your brand’s name, company logo, call to action, offer, and product photos. You can equip your banner with brief and straightforward copy, such as “15% off on Selected Items” or “Flash Sale for the Weekend” to make the idea of your email as clear as possible.
(Source: Stripo template)
The importance of email banner size
A banner image delivers your UVP (unique value proposition) and brand-associated components, such as your brand logo, CTA, corporate color schemes, and graphics. These features differentiate you from the hundreds of promotional emails flooding your recipients’ inboxes and motivate subscribers to open and read your messages.
An inappropriate email banner size can ruin the entire structure of your content. An excessively wide banner will force your email client to enable the horizontal scroll function, while an undersized banner will make recipients squint their eyes to see your content.
The perfect email template dimensions
The most used email banner size is 600–700 px wide for desktop devices, which ensures proper display across devices. Meanwhile, the height dimensions are often within 350–500 px.
When it comes to mobile devices, there is no ideal banner size, because all phones are different. However, it is desirable for the banner to be displayed completely on the screen, without requiring recipients to scroll. To achieve this, the banner’s height should fit within the visible area of the email. This area is smaller than the device screen due to the presence of the email interface.
Therefore, if you need a fixed size, you can consider the most popular devices today, such as the Samsung Galaxy S21 and S20, with a screen size of 360 x 800, and the iPhone 14, 13 Pro, and 12 Pro, with a screen size of 390 x 844. Subtract the email interface from the height and assume that the available space for the banner is approximately 616 px for Samsung devices and about 650 px for iPhones.
Roman Burdyga,
Following the email banner dimensions we share below will help you create visually appealing and responsive designs for desktop and mobile screens and avoid choosing the wrong email banner size.
It’s possible to use various email banner types within your newsletter to achieve different goals. Now, we will discuss the perfect email banner size for your responsive email body banners, headers, and footers.
Email header banner size
A vibrant and catchy header image will motivate your readers to keep scrolling. You can equip this header with your company logo, brief copy explaining the key purpose of your email, and a CTA. For computers, we recommend that you limit the email banner size width to 600–700 px and limit the height to 90–200 px.
On mobile devices, you should use modern email editors that support responsive images when creating email banners. A responsive approach allows the image to adjust its size automatically depending on the screen size it is displayed on. Responsive images will free you from this headache, as you can’t know for sure on which mobile device your email will be opened, so your main goal is to provide a consistent email experience, and responsive images are the right tool for this task.
In other cases, you can follow the Roman’s advice above.
Here is an email header example that is 650 px (width) by 200 px (height):
Email body banner size
A catchy banner within your email body can convey the central idea of your message without overloading readers with long paragraphs of text. Here, you can reveal more details about your offer and explain what problems a customer can solve by using it.
For desktop screens, we suggest you make a body banner 650–700 px wide and 350–500 px high. On mobile devices, the situation is the same. Consider popular screen sizes, as we mentioned above, or use modern email editors with features that allow you to create dynamic images that adjust themselves automatically.
(Source: Stripo template)
If you need a static image banner, here’s a workaround you can try. Create two separate image banners: one for desktop and one for mobile. These banners can then be displayed on the appropriate devices. This way, it will appear as though the image is adaptive. However, this approach requires extra work for the designer, additional code in the email, and more time for email recipients to download the individual images.
Roman Burdyga,
Email footer banner size
Positioned at the bottom of your newsletter, a footer can comprise your organization’s contact details for any queries, social media accounts, and the Unsubscribe option. These details allow your content to avoid the spam folder and land in the inboxes of your recipients.
Keep your email footers 650–700 px wide and up to 150 px high for desktop screens. On mobile, we suggest sticking to our advice about pre-defined image sizes that match the most popular screen sizes or creating emails with editors that support responsive images to make your life as an email marketer easier. Look at our email message footer example (700 px wide and 150 px high):
(Source: Stripo template)
Email signature banner size
Signatures are also often placed at the bottom of emails and can be made using email banners. The dimensions for your banner signature are pretty much the same as those for the ordinary footer, so you can set them between 650 and 700 px in width and up to 150 px in height for your desktop email version.
(Source: Stripo template)
For mobile, use pre-defined image sizes or a responsive image approach if your email editor supports similar features that allow you to create email parts with dynamic pictures.
What to consider when creating an email banner
Now that you know everything about the ideal dimensions for various email banner types, let’s look at a few more essential things to consider during the design process to make your banners appealing:
Button size
Buttons on email banners should be sufficiently noticeable, so it’s crucial to make sure they don’t blend into the background image and other elements of your message.
(Source: Stripo template)
Text over banner images
A typical email banner comprises an image and text overlaid on top of it. Here, it’s vital to define the proper fonts and color combinations to make your text legible and vibrant. For example, it would be hard to notice your copy if it were written in brown text over a black image. The same goes for light colors: White text over a light gray background is a bad idea.
We recommend you experiment with fonts, colors, sizes, and the positioning of your text to make it noticeable and readable. In the pictures below, you can see that a banner with an illegible font and gray text over a brown background image looks messy, while the first option, with a more readable font and a contrasting color, is much easier to notice.
Image size
It’s also crucial to have a fast loading speed. The less time it takes for your email to load, the better. Be sure to compress your banner images before adding them to your emails to avoid increasing your email banner file size.
When working with Stripo, you can compress all images that you add automatically. Just turn on image compression and pick the percent of compression needed in your Workspace settings.
Device optimization
Email banners with holiday-themed images require device optimization to guarantee your template is accessible and effective across all devices. During the holiday season, when people are in a hurry, they typically use their mobile devices or tablets. During this period, it’s crucial to ensure your template is optimized, along with all CTA buttons and illustrations.
Branding
By creating a holiday banner for emails with branded images, you can increase brand recognition and engage new clients, which are essential for any business. Ensure the holiday banner looks consistent with other brand materials; add the branded template and customize the banner design to fit your brand’s visual identity. Your holiday email campaigns will be easily identified because of this. A logo, typography, and color scheme help businesses build trust and loyalty, leading to increased engagement, sales, and ROI.
Link building
Make sure your holiday banner image links to the landing page, which is necessary. It’s very easy to add a link to any image you need; for example, a product page referral might be a great choice if you’re promoting a particular product. Recipients click and engage with your content directly. This way, you boost your CTR and drive conversions using the same holiday banner.
Assembling a banner with Stripo
By using our editor, you can start creating email banners within a few minutes. We have handpicked a few tips to make this process easier for you:
Preparing your banner
First, you need to add a banner to your email template. We have a dedicated Banner block that you need to drag and drop into your template.
After that, click on the added banner to open this menu. Before you can tweak the dimensions and other parameters, you need to attach an email banner image. You have a variety of options in this regard, from simply uploading an image from your device or using stock images to generating a unique image using our AI Image feature.
For our example, we’ve picked a Photostock option. All you need to do is click on the picture you want (put in a search query in the respective field if you don’t see appropriate images for your design ideas right away), and it will be automatically attached to the banner.
Once it’s done, you can proceed to tweaking the email banner parameters.
Changing the width and height for desktop
To set the correct email banner size, go to the Settings tab. The Size section is all you need to set the needed dimensions.
There are several buttons you’ll need to set the right size for your banner (from left to right):
- makes image fit the size of the container;
- restores actual image size;
- width-tweaking mode;
- height-tweaking mode;
- size-tweaking buttons (work separately for width- and height-tweaking modes).
Just set the right dimensions using these buttons, and you are good to go.
You can also set a Crop Shape in the corresponding section by picking from pre-defined orientations (both vertical and horizontal).
Changing the width and height for mobile screens
To make your email banner display correctly on mobile screens, click on the Mobile View option to open mobile version settings in Stripo.
We have a Responsive image option enabled by default, so in most cases, you don’t have to do anything, as this option ensures that your banner image will automatically adjust itself to the screen dimensions.
You can turn this option off, but we do not recommend it, as once your banner image disabled it will remain static, regardless of the screen resolution at which it is displayed. This can lead to the poor displaying of images and content in your banner.
Changing the Crop Shape is the same as for the desktop version.
Adding images and links
To add a button to your banner, we have an option that allows you to add another image on top of your banner. You can mix and match your relevant background image with other images, creating unique designs for your email or drawing attention to your banner.
To do this, click on the Image option while you are in the Banner block settings.
You’ll see the same menu for adding an image as you saw for the whole banner earlier. Just pick the right option for adding an image to proceed.
Once it is added, your image will appear at the center of your banner, and you’ll see a small menu with options to set the opacity of this image and its rotation, flip it the way you need, and apply visual filters on top of it.
To change the size of this additional image, you’ll need to drag the frame corners, and your image will change its size. You can also drag the image within the banner borders by clicking and dragging the image. You can even rotate it manually by touching the dot above the frame.
You’ve added your CTA image to draw attention. Now, how can you make your banner clickable? All you need to do is set the link in the corresponding field, and once you add it, your whole banner will turn into one big CTA button that transfers the recipient to the page you need.
Adding texts and tweaking them
If you need more options to decorate your banner image, you can add text on top of it. Click on the Text option above your banner.
The text node will automatically appear in the center of your banner, and you’ll see a tab with different text options.
To type your text in, just double-click on the text node to select the default text, and type in your new text.
As for the tweaking options, you have a large variety. You can change the position, size, and rotation manually by dragging the corners of the Text node frame or dragging the entire node itself, as with your image.
As for the text itself, you can do the following:
- select the text font, size, and color;
- choose the text alignment;
- tweak styles, such as bold, italics, underline, or crossed out;
- change the letter case to upper case or lower case;
- set the opacity and rotation and flip the text the way you need.
Here’s what our text node looks like after most of the options have been applied. Tweak texts to meet your email design needs with ease.
Wrapping up
The right email banner size will keep your message structured and draw subscribers’ attention to its central elements. Now that you are aware of the perfect width and height of an email banner and understand how to produce one with Stripo, you are all set to make your upcoming campaign a success!
0 comments