Email Template Size: Element’s Width and Height
It is one of the biggest posts we have ever made because two sentences and even two paragraphs are not enough to shed the light on the entire topic. The standard HTML email template size for width is 600 pixels for desktops as well as 320px for vertical and 480px for horizontal view on mobile devices. The height is unlimited and depends on the content length. That’s all!
A few years ago the 600px width was a must-use standard and had no alternatives. At the moment, 600 px is the most popular width for email design but the standards became flexible.
Before thinking about template dimensions you should define which type of email design to use.
The fluid design uses an approach based on percentage ratio for email sizes due to maximum width and height of various email clients. The email elements are correlated with each other in the same way. It allows you to use any width and it will be automatically adjusted to those that email client has. Fluid design is the best practice for a content-heavy email creation.
Define maximum width that you allow because the email will be adjusted to the full available width and that could be too much for comfortable reviewing. Exactly this technique allows maximum 960px emails be represented in a proper way through different clients and devices.
Actually, you may use this technique for 600px wide email design, just set the maximum width as 600px for all over widths use 100% or a proper value using percents. Anyway, it works great and you shouldn’t miss a chance to use it and test it.
Starbucks prefers fluid design for email mailouts:
Scalable or Mobile Friendly Design
Scalable email design is the one that works well on both desktops and mobile devices. The scalable design is more often called a mobile friendly. According to statistics, in 2018 up to 77% of emails are being opened via mobile devices. That’s not a little so making your email templates mobile friendly is a must do rule.
The scalable design doesn’t use media queries or percentage as responsive and fluid designs do. The scalable design is more about readability and clickability. If you use simple one column layout and adapt quite large fonts and big enough clickable elements plus spaces between text lines, you already have a scalable design.
Creating a responsive email template is always more time spent but the result worths the efforts. The concept of responsive email design stands on using media queries and fluid cell grid which allows adjusting email size to all screen sizes that could be used.
Media queries define a screen size and use a scope of rules declared for these dimensions thus you may change font size, color, content hierarchy or even layouts, show additional text or hide a piece of content. For example, 3 column template for desktops may be easily scaled down into 1 column template for mobile devices.
Responsive design as a technique appeared in late 2001 as a web concept, later it was successfully caught on while designing email templates. For example, Yahoo mail started to adopt responsive emails in 2005.
According to the fact that not optimized for mobile screens, emails have lower conversion rate on average 28% because the clickable elements become hard to reach and people are more often make mistakes. Those who make responsive design while setting up email marketing campaign are more likely to succeed than others. It’s the point to choose one.
What Width Should Email Have?
There is an article at Litmus blog which claims that 600px email width is a myth but they don’t provide compelling facts to prove that. Some companies use less than 600px width for emails, so what? Some companies make experiments and use 640px, 700px or maximum 960 email width but, of course, they use responsive templates so the width automatically adjusts due to email client and device that email recipient use.
We agree that now there are more options than only a 600 width but it remains the most optimal but how did this width appear? Why is it exact 600px?
A long time ago the screen resolution was far from perfect. A number of devices was much poorer than now. That was the time when 600px width appeared. Since then a lot of things have changed but the width of 600px was a nearly an implicit standard which has become a basis of an email design and its presentation without long discussions or any doubts.
So 600px width is more a tradition than a rule and it gives you 100% that it will be displayed properly. Not bad, isn’t it? Look what an awesome email template could be created with an ordinary 600px width:
At the same time, there is a plenty of email clients that don’t render properly emails wider than 650px. The Gmail client doesn’t show a background color if you make it wider than 640px but the mailbox width itself has more than 960 pixels.
In Yahoo Mail you may view email in 650px maximum width. For Outlook 2007 this value is 600px and Outlook 2013 has a 550px width.
If you decided to choose another width than 600px, just test your email before sending via such services as Litmus or Email on Acid that will give you exact pictures how the email will be displayed in different email clients.
What Height Should Email Have?
Of course, the email height is unlimited. You may use as much space as you need to show all the content you have but remember that the longer message is, the fewer chances to be read until the end an email has.
The total height of a web page is 960px which usually is not enough to introduce the info for email. You can’t get away with scrolling. The most commonly used length for emails varies from 1500px – 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. E-commerce 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 widely used 2550 height:
As you can see, 4 different content blocks are easily merged into easy to scroll dimensions.
Many email clients such as Outlook, Apple Mail, Thunderbird have a preview window which has a limited size – 600 px 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 have a valuable information that will push users to open and read an email. A good first impression is better than thousand likes.
Such an amount of email clients it is not even a half of your email database so it’s not the reason to ruin the email template design and to move to the top all the call to action elements of the whole text. Usually the header and a banner or a half of the last one fall within a preview section.
Here is how the preview pane looks like in mail.com email client:
Preheader is a preview line where only short intro message appears and an option to view email in a browser or as a web version if there are any problems with email review. According to the fact that this field is more technical than contextual, you shouldn’t make it large or place there any additional elements.
The sizes of the preheader field vary from 50px to 65 px for height. The width is commonly 600-640 px due to template dimensions.
Here is how standard preheader looks like in the Stripo editor. You may change the preheader message but watch out if it is not longer than 75-140 symbols:
Here are few more examples of a preheader:
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 header that increases 300px is not convenient for review.
There are hundreds and thousands of styles that are used for email header design, but choose the one that user-friendly and simultaneously mobile friendly. Except this, choose the style and color scheme which is able to underline the brand identity and doesn’t break into pieces the user experience.
Here are few examples of a good email header design:
A banner is a place where you may implement your creativity and you shouldn’t be tied up with sizes. The less content you put in there, the better results you get. The more clear call to action you place there, the more conversions you get.
You shouldn’t save space between text lines and you may experiment with font sizes but it’s better to use short and catchy sentences. The most popular banners have a picture on a background and are situated just after header or even as its extension.
Some banners are animated. If you have chosen an animation as a stylish trick of your email marketing campaign, be sure that it is optimized enough by size. The more your email weights, the longer time will your users wait to load it up.
The most common are 600px x 300px and 600px x 400px sizes for banners. A lot of email designers experiment with banner sizes, although the width is limited to 600 px standard email template size, the length could be different and varies from the background image dimensions.
Any banner can’t go without buttons that are widely used to grab user attention.
Here are few examples of creative and informative banners:
Here is the animated one:
There are no rules due to email button dimension standards. The common requirement is that a button should stand out in a contrast from all the other email elements but, at the same moment, organically match the email design.
It’s more important to take care of your mobile audience and make the buttons as large as it is possible to press the button by a thumb and not to hit all over elements.
Sometimes it’s hard to even find a button because it is really small and featureless and when it comes to pressing it, no one does it. The size of 46px x 46px is the minimal for thumb hitting. The same rule works for social media icons size.
Although there are no standards for buttons it’s better to use the same sizes that are used in a web design because users are more likely to conceive those things that are common to them. The most common button sizes are:
- 175px x 35px
- 120px x 90px
- 120px x 60px
- 88px x 31px
It’s better to choose one of them but that’s not a must-do rule. Take as a premise your email design concept and move to its improvement. More crucial is to situate button properly in an email body. Make a/b testing with different variants in order to achieve the best conversion rate.
The default button size at Stripo email editor is 235px x 55px but you may easily change the size and color if you need to.
Here is how Grammarly uses buttons in their mailouts:
Here the example when contrast comes to play:
Here is the one more widely used example of a button for banner:
Here is the animated button pattern:
According to the fact that the width will be 600px – 640px for the whole email template the image width is not an exception. Therefore the height is a proportional adjustment to the stated width, the most used image dimension is a 640px x 480px format. There are tons of images with this size in stocks or in Pinterest or you may find enough pictures with these dimensions using a Google search or any other search engine you would like to.
If you use an image with other dimensions there are no guarantees that they will be displayed properly and have an optimal weight. For example, you may think that if you use a responsive template no matter what images you load up into an email, they will be automatically adjusted to the proper dimensions but you don’t mention the fact that image quality will be not changed so the total size will be big enough to impact the loading speed.
Imagine that you want to add a 3264px x 2448px image to your email. Its weight will be approximately 2,5 MB which is equal to 12 seconds loading speed time for the ordinary internet connection. That’s too long to wait for email recipients because the rest email elements have their weight too. Maybe a half of the users will not wait so you will miss the customers as well. Reduce images in order not to ruin the user experience and as a sequence an email review process.
You may create separate email version for mobile devices with the 320px width and use JPEG pictures instead of PNG because they have a smaller size than the same resolution and size PNG pictures. Although, the image quality will be worse.
One more good idea is not to include as many images to the mobile template as you have for the desktop version. It will simplify the scrolling which could seem endless in many cases for mobile users. The loading speed will increase too in this case.
Content Block Size
The maximum length of the plain text content without interrupting it with images should be approximately 500px-600px long. That’s enough to highlight any topic with 5-7 sentences. The most appropriate for reading is a text line with no more than 75 symbols which is average for the 600px template width.
Actually, email is not the place to read long storytelling article or investigate a new hot topic research. That’s a place to get conscious with a short content which has only one topic and intent so that’s why writing each sentence ask yourself if it is really informative and necessary. You may shorten your text in such a way greatly.
The text is not a size heavy element, so according to the email size optimization you may use as much text as you need without influencing the total email weight but the longer content you use, the fewer chances it has to be read by users.
If you have many images and much less text for them, there is an option to situate the images and their description in a staggered order even in the one column template. This trick will save a lot of space and avoid unnecessary scrolling.
Here is an example where it was made perfectly:
A Number of Content Blocks
There is no need to make a content block because everyone from your industry used to make it. If you don’t have enough info to place there, don’t make needless efforts to make a long email with variative blocks. If you have the only one intent to be highlighted (you should have exactly the one) there is no need to duplicate the info or say the same things but in other words within one email.
It’s better to say less than 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:
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 you add a new block ask yourself if that info is suitable and a must-have.
Actually, some companies make footers with a menu 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 large enough.
I prefer laconic footers which contain the info that should be there with 100% probability. The сlassical footer should contain contact info, unsubscribe option and social media sharing icons. That’s all so the standard 600px x 200px footer dimension is more than enough to place together all this info.
One more striking point of the email footer design is how to place the long company address in such a small area as a footer. First of all, don’t think that someone will send you real letter or visit your company after receiving the email. In my opinion, the best choice is to give a link to “About Us” page where this information is highlighted in a full grade.
Here is an extraordinary email footer with cute social media icons design:
I think, that Bored Panda made the best footer which contains all necessary information:
Here is an expanded footer example:
Read more about 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!
Total Email Size
If your email message weighs a lot you don’t have any guarantees that it will be displayed in a full size especially in such email clients as Gmail and Yahoo! Mail. Both Gmail and Yahoo Mail scale down email size if it increases these values:
- The size limit for Gmail is 102 kb;
- For Yahoo! Mail the limit is 100 kb.
All other email clients don’t scale down the message you send. Often 100kb limit is too small and not enough for making an email template which shows all the product or topic preferences.
The email size often depends on email editor you use. Usually, there is an extra code that will be automatically added while 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 do that. Stripo is one of them, check this out creating any template you need or want.
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 200px height in the best case. The more images you adopt, the more crucial is to use image compressor. Sometimes you need email HTML to be optimized too.
There are no exact rules that will dictate you the 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 up and text you write. We wish you best of luck in email creation process, by the way, you may start creating your own unique email template just right now using Stripo email editor.