23 September 2020
This is a very complex topic and it is impossible to cover it in a few paragraphs.
The standard email template width was 600 pixels for desktops, 320px for vertical, and 480px for horizontal view on mobile devices. The height was unlimited and depended on content length. A few years ago the 600px width was a must-use standard and had no alternatives. But the standards have changed.
Let’s now talk about the acceptable width of emails, the best width of all email elements, and how to adjust these elements to multiple email clients, screens, and devices.
What’s the best width for email newsletters?
There is an article on the Litmus blog that claims that 600px email width is a myth. We totally agree on that as now there are more options than only a 600px width, yet it remains the standard size for email newsletters. But how did this width appear? Why is it exactly 600px?
A long time ago the screen resolution was far from perfect. And a number of devices were much poorer than now. That was the time when the 600px-width appeared. Since then a lot of things have changed but the width of 600px has become a basis of an email layout.
So 600px width is more of a tradition than a rule and it gives you 100% that it will be displayed properly. Not bad, isn’t it?
Have a look at this awesome HTML email with an ordinary 600px width. It could be really spacious, with plenty of columns and useful information:
(email from M&M’s. The email width is 600 pixels. Gmail, macOS)
We heard that there are some email clients that don’t render correctly the emails that are wider than 650px.
I built an email, the width of the content part was 860 pixels. It worked well across all major email clients, though its background was not displayed in Outlook.com.
And the email below, which I received from a famous brand, is proof that 600 px is just an average size of an email, but not a mandatory one:
(email from MailNinja. The email width is 740 pixels. Gmail, macOS)
There’s also a belief that Gmail doesn’t show a background color if your email template size width exceeds 640 pixels. However, numerous tests with our email testing tool and multiple emails that I open in my Gmail account prove the opposite — emails render perfectly well and even backgrounds render well, too.
(email from Forbes Daily Dozen. Email width 800px. Gmail, macOS)
Another myth is — in Yahoo! Mail you may view the email in 650px maximum width. However, my email with a width of 810 pixels was full size in this email client.
If you decided to choose a width that differs from 600px, just test your email prior to sending with our embedded email testing tool that will give you exact pictures of how your email will be displayed in different email clients and devices.
We’ve noticed that the average width of emails by famous American brands varies between 640 and 700 pixels.
(email from Banana Republic. Email width 640px. Gmail, macOS)
So, how to set an email template width with Stripo?
By default, it is already 600 pixels!!
But if you’d like to set your own one, you need to:
click the Appearance tab in the editor;
then click the General Settings tab;
set the necessary width.
Set custom width that fits your email design best
What’s the best height for email newsletters?
Of course, the email height is unlimited. You may use as many rows as you need to show all the content you have. But remember that the longer the email is the lower are the chances that it will be read till the end.
The total height of a web page is 960px which is usually not enough to introduce all the info that you’ve prepared to share in email. You can’t get away from scrolling. The most common length of emails varies from 1500px to 2000px. That’s usually enough for content and easy to scroll for users.
It’s an interesting fact that those emails that belong to tourism topics are the longest compared to emails from other industries. eCommerce emails are long too, despite the fact that products’ cards are usually very compact, marketers always publish too many products within one email.
Here is an example of an email template with a height of 2550 pixels:
(email from Violet Grey, height 2500px)
As you can see, 4 different content blocks are easily merged into an easy-to-scroll email.
Important to note:
On mobile devices, due to blocks rearranging, the length of your email templates increases.
If you believe that your email will be too long on mobile devices, you can always hide some elements with Stripo.
So, how to hide email elements on mobile devices?
click the very element in email template to activate its settings;
in the settings panel, scroll down to find this control;
done. The chosen email element/elements will not be displayed on mobile devices that support media queries.
Enable/disable certain elements on mobile devices
Email preview dimensions
Many email clients like Outlook, Apple Mail, Thunderbird have a preview window which has a limited size – 600px wide and 300-500 pixels high. They don’t show the decreased copy of the whole email but capture an upper field of an email with an appropriate to preview window size.
Make sure that the first 300px-500px has valuable information that will push users to open and read an email. A good first impression is better than a thousand likes.
People who use these email clients will not make half of your contact list so there’s no need to change your email template size.
Here is how the preview pane looks like in mail.com email client:
(email from Bored Panda)
Email preheader size
Preheader is a line/email element that goes above the template. It comprises a short intro message which appears along with an option to view the email in the browser or as a web version if there are any problems with email rendering. Some brands place very important information, like notification about free shipping, in it.
(email from Adidas)
According to the fact that this field is rather technical than contextual, you shouldn’t make it large or place there any additional elements.
The size of the preheader field varies from 50px to 65 px high. The width inherits the size of the email template dimensions.
When building this email element, you will need to add a link to the “Web version” of your email.
So, how to get the link to a web version of your email with Stripo?
once your email is built, go to the preview mode;
in a new window, click the “Copy” button;
done — the link has been saved to your clipboard.
7 min read
Preview and Send Test Email in Stripo
You’ve built an email and are ready to send it out to recipients? We strongly recommend that you send a test email to yourself to make sure that it looks exactly as you wanted both on mobile and desktop devices, with no rendering issues.
Important to note
we provide a certain number of test emails daily, according to your plan. Please, visit this page to check out the number of test emails available for you;
you test not only the…
Important to note:
We are now talking about the preheader as an email element. Yet, there is the preheader text, which you can set with Stripo btw. The preheader text is shown in the preview mode only.
The preheader element is displayed in the email, as well.
Email header size
The most common height for a header that doesn’t contain a menu or a massive logo is 70px. For those who have a menu bar, the header may be 150px-200px high. The height of the header that increases 300px is not convenient to read.
There are hundreds and thousands of styles that are used for email header design, but you should choose the one that is user-friendly and mobile-friendly simultaneously. Apart from this, choose the style and color scheme which is able to highlight your brand identity and doesn’t break into pieces in users’ Inboxes.
Here are a few examples of a good email header design:
(email from Bentalls)
(email from GeekBrains)
(email from SEMrush)
Important to note:
Normally, an email menu contains 3-5 tabs. If you add more, please be sure to hide the extra ones for mobile devices.
For more information on how to build an email header with Stripo, please refer to our blog post.
Email banner size
A banner is a place where you may implement all your creativity and you shouldn’t be tied up with sizes. The less content you put in there, the better the results you get. The clearer call to action you place there, the higher conversion you get.
(email from BHLDN)
You shouldn’t save space between text lines; you may experiment with font sizes. The most popular banners have an image as a background and are located just after the header.
The best size for email banner
The following dimensions — 600px x 300px and 600px x 400px — are the most common newsletter banner sizes. A lot of email designers experiment here, although the width is limited by the email template size, the length could be different.
Important to note:
With Stripo, you can choose your banner shape. It is called — orientation. It can be vertical where height is longer than the width, square, and horizontal where width is longer than the height.
By choosing any, you will not have to set special parameters, as the width inherits its size after the email template size, and the height does depend on the chosen orientation.
Horizontal is the most popular type of orientation for banners.
For more information on how to build banners with Stripo, please refer to our “How to Create Banner with Stripo Email Builder within Minutes” blog post.
Email button size
There is no standard email width for buttons. The common requirement is that a button should contrast to all the other email elements but, at the same moment, organically match the email design.
To make your button noticeable and clickable, you should work on its design and work on its size.
If the CTA copy is short, here comes the whitespace to the rescue to make your button wider. In Stripo, it is called “Internal padding”.
Don’t worry. Due to our unique button layout, this whitespace is clickable 🙂
Readers do not need to click on the button text. They can click wherever they want.
It is also very important to take care of your mobile audience and make the buttons as big as possible to enable readers to click the button with a thumb and not to click all other elements when reading your emails on mobile devices.
Sometimes it’s hard to even find a button or to read its CTA because it is small in size and its font is hardly legible.
So, how to make your button’s font large and make buttons full-width on mobile devices?
To set a larger font to CTA buttons on mobile devices, you need to:
go to the “Appearance” tab;
enter the “Mobile view” section;
set necessary button text size;
and toggle the “Full-with” button.
Set custom width for your buttons on mobile devices
16 pixels is the most common size for button texts.
Here the example when contrast comes to play:
(email from Jobvite)
Here is one more widely used example of a button for banner:
(email from Forbes)
How to send a button over banners, read in our “Build banners” blog post.
Email image size
According to the fact that the average email width is 600px – 640px for the whole email template the image width will inherit its sizes — when we are talking about banners. There are tons of images with this width in stocks or on Pinterest. Stripo also provides over 10 000 free images in its bank.
As for the product cards, there are absolutely no standards set for the email image size.
Therefore, the height is a proportional adjustment to the stated width. Once you’ve uploaded your image, you may change its width — and its height will be changed proportionally; i.e. the width-to-height ratio will be saved.
In Stripo, you can crop and edit images with our embedded photo editor “Pixie” to set a necessary image size for emails. To enter the editing mode, you need to click the “edit” button next to the image in the settings panel.
Important to note:
Please remember to compress images otherwise your email will be too heavy and it will take a while for the email to load on recipients’ mobile screens. You may do it with Tiny.png or any other special tool of a kind.
(TinyPNG website, homepage)
Content block size
Content block normally consists of text, image/photo snippet, and button.
We have previously discussed the sizes of images and buttons. As for the text, there are no limits as it always inherits the width of email rows or containers/blocks. You can place copy over images, under or above images. It is totally at your discretion.
Here is an example where it was made perfectly:
(email from the White Room)
A number of content blocks
We dare to say, “Less is more”. Use pictures but don’t overload your email with photos that don’t provide any useful info and don’t have any relation to the email’s topic.
Don’t try to stuff in the one email all products that you have on your website as new arrivals or sale proposals. It’s better to publish the best offers and provide a link to the website in the main menu and in a footer. There is a rule to make no more than 6-9 shopping cards in one email like it was made here:
(email from Madewell)
It’s better to make your content blocks no longer than 900px long. That’s enough to make 3 different informative blocks. Every time when adding a new block ask yourself if that info is suitable and a must-have.
However, if you feel like adding a number of blocks to your emails — you may use image carousels, accordions, add videos that might be more informative than even hundreds of photos.
Email footer size
Actually, some companies add menus to footers so they are bigger than classical variants of this element. Some companies provide the full address with a zip code and so on so forth so their footers are big enough.
I prefer laconic footers which contain the info that should be there 100%. The сlassical footer should contain contact info, the unsubscribe links, social media icons, and the reason why you are reaching out to recipients. That’s all so the standard 600px x 200px footer dimension is more than enough to place all this info.
(email from All Good)
Read more about the email footer design you may in the article from our blog. Don’t hesitate to share it with your friends and colleagues if you like it!
We want to remind you that you may set special parameters for all elements for the mobile view — they will differ from the desktops.
To enter the settings mode, please click the “Appearance” tab in the settings panel, then click the “Mobile view” section.
Here, you can set special individual parameters for:
- the text size of the items for the “Menu” block;
- font size for headers;
- font size for footers;
- font size for content elements;
- font sizes for headings 1 — 3;
- alignments for your headings;
- button text size;
- and set if you want your buttons to be displayed on mobiles full-size or not.
(Mobile screen, full-width button)
7 min read
How to Create a Responsive Email Layout
Responsive email design, also known as the adaptation of emails for mobile devices or mobile-friendly email design, is no longer a unique feature, but part of mandatory functions. That is why when building a newsletter email with Stripo, you are welcome to use our library of pre-built email templates as they all are fully responsive. This means that all the newsletters, based on them, will render correctly on every device.
But sometimes it happens that you need to solve an untypical problem to enable your email to render in a…
Total email size
If your email weighs a lot you don’t have any guarantees that it will be displayed in a full size especially in such email clients like Gmail and Yahoo! Mail. Both Gmail and Yahoo Mail weigh the size of HTML code!! of your email and clips the email if the size exceeds these values:
the size limit for Gmail is 102 kb;
for Yahoo! Mail the limit is 100 kb.
The email size often depends on the email editor you use. Usually, there is an extra code that will be automatically added while you’re creating an email template. You may delete this code manually and reduce the email size greatly as a consequence or just choose the editor which does not any extra characters in your emails. Stripo is one of them, and it provides pure HTML code without any system characters. Check this out by creating any template you need or want.
How to weigh your email:
You may weigh your email with mail-tester. It’s totally free.
Or you can download your email template as the HTML file from Stripo and see its properties or info (Windows/macOS respectively).
If the size of your file exceeds the stated 100 kb, you might want to optimize it before you export this template to your ESP:
Weigh your emails prior to sending them out to recipients
To sum it up
We have analyzed the width and height of an email template in general and each separate element particularly. 600px width is not only safe and reliable in use with a 100% correct presentation through all devices and email clients but also it is the most familiar for users.
The height depends on the content length but should not exceed 2500px height in the best case. The more images you add, the more crucial it is to use an image compressor. Sometimes you may need email HTML code to be optimized, too.
As we can see, there’s no such thing as the best size for email newsletter, and no exact rules that will dictate you to set certain email elements dimensions so you may experiment with forms and sizes but don’t make the template too uncommon and weird for users. Just fulfill your creativity in images you pick and text you write. We wish you the best of luck in the email creation process.
Setting width and height to all email elements. Build unique emails in no time.