timer ~ 16 min read
rate it
16 August 2021

Email Newsletter Template Size: Element’s Width and Height

Stripo / Blog / Email Newsletter Template Size: Element’s Width and Height

This is a very complex topic and can't be covered in a few paragraphs.

For quite a while, the standard email template width used to be 600 pixels for desktop, 320px for vertical, and 480px for horizontal orientation on mobile devices. The height was unlimited and depended on the content length only. But today, the situation is different.

Let's now talk about the acceptable width of emails, the best width of all email elements, and ways to adjust these elements to multiple email clients, screens, and devices.

What's the best email width?

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 conventional 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 the number of devices was much poorer than now. That was the time when the 600px-width appeared. Since then a lot of things have changed. So today the 600px width is more of a tradition than a rule.

Have a look at this awesome HTML email example with a standard width of 600px:

Width 640px _ M&M's

(Source: Email from M&M's. The width is 600 pixels. Gmail, macOS)

We heard that some email clients don't render correctly emails that are wider than 650px.

I built an email, its width 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 Template Width_740px

(Source: Email from MailNinja. The width is 740 pixels. Gmail, macOS)

There's also a belief that Gmail doesn't show a background image and 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 Template Width_800px _ And Background

(Source: Email from Forbes Daily Dozen. Email width 800px. Gmail, macOS)

Another myth is — the maximum width of emails for Yahoo! Mail should not exceed 650px. However, my email with a width of 860 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 it with our embedded email testing tool that will give you exact pictures of how your email will be displayed in different email clients and on multiple devices.

We've noticed that the average width of emails by famous American brands varies between 640 and 700 pixels.

Email Template Width_640px_by Banana Republic

(Source: Email from Banana Republic. The width is 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.

Setting Custom Width for Your Marketing Emails with Stripo

Set custom width that fits your email design best

What's the best email height?

Of course, the email height is unlimited. You may use as many rows as you want. However, we should always remember, the longer the email the lower the chances 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 you've prepared to share in email. You can't get away from scrolling. The most common length of emails varies from 1 500px to 2 000px. That's usually enough to put all necessary content in one email and easy for users to scroll.

Fun fact: Those emails that belong to the tourism industry are the longest compared to emails from other industries. eCommerce emails are also long enough, despite the fact that product cards are usually very compact and don't need much space, this is because email marketers always promote too many products in one email.

Here is an example of an email with a height of 2 550 pixels:

Email Height of 2500px

(Source: Email from Violet Grey, height 2 500px)

Important to note:

When content blocks rearrange on mobile devices, the length of your emails increases. 

If you believe that your email will be too long on smartphones, you can always hide some email elements with Stripo.

So, how to hide email elements on mobile devices?

  • click the necessary element in an email template to activate its settings;

  • in the settings panel, scroll down to find the "Hide element" option;

  • click "On mobile" icon;

Email Template Dimensions _ Hiding Elements on Mobiles

  • 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

Some email clients like Thunderbird have a preview window with the following dimensions: 600px wide and 300-500 pixels high. They don't show the decreased copy of the whole email but capture an upper part of an email.  

Make sure that the first 300-500 pixels (half of the first screen of your email) have valuable information that will convince users to open and read the email. A good first impression is better than a thousand likes.

Just to let you know, people who use these email clients will not make half of your contact list, so there's no need to change your email width.  

Here is how the preview pane looks like in mail.com email client:

Previewing Emails

(Source: Email from Bored Panda, mail.com)

Email preheader size

Preheader is a line/email element that goes above the template and can also be seen in the "Email preview area" in users' inboxes. We'll talk about the former here. It comprises a short intro message that appears along with an option to view the email in the browser or open its web version if there are any problems with email rendering. Some brands place very important information, like notifications about free shipping, in it. 

Email Preheader Size

(Source: Email from Adidas)

Because this field is rather technical than contextual, you shouldn't make it large or place any additional elements in it.

The size of the preheader field varies from 50px to 65px high. The preheader width inherits the width of the entire email.

When building this email element, you will need to add a link to the "Web version" of your email.

So, how do you get a link to a web version of your email with Stripo?

  • once your email is built, go to the Preview mode;

Email Template Width_Preview Link

  • in a new window, click the "Copy" button;

Email Template Width_Getting the Web Version Link

  • done — the link has been saved to your clipboard.

7 min read

38771 views 3.4

Preview and Send Test Email in Stripo Read

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 email preview area in Inboxes only. 

Email Size

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 email header size 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. In addition to this, you choose the style and color scheme that fits your brand identity.

Here are a few examples of a good email header design:


(Source: Email from Bentalls)


(Source: Email from GeekBrains)


(Source: 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. 

HTML Email Width Best Practice_Hiding Menu Elements

For more information on how to build an email header with Stripo, please refer to our blog post.

Join Stripo

Email banner size

A banner is where you may use all your creativity and 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.

Newsletter Banner Size

(Source: Email from BHLDN)

Here 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 by 300px and 600px by 400px — are the most popular email banner sizes. A lot of email designers experiment here, although the width is limited by the email ad size, the length may vary.

Important to note:

With Stripo, you can choose your banner shape, which is called — "Orientation". It can be vertical where height is longer than the width, square, and horizontal where width is bigger than the height. 

By choosing any, you will not have to set any dimensions, as the width inherits its size after the emailing template size, and the height does depend on the chosen orientation.

Email Template Width_Banner 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 on its size.

If the CTA copy is short, be sure to use some whitespace to make your button look wider. In Stripo, it is called "Internal padding."

Email Width for Buttons_Setting Witespace for Buttons

Don't worry. Due to our unique button layout, this whitespace is clickable :)
Readers do not need to click on the button text only, 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 any other element when reading your emails on mobile devices.

Sometimes it's hard to find a button or read its CTA because it is small in size, and its font is hardly legible.

So, how do you make your button's font large and full-width buttons 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.

Standard email width for buttons

Set custom width for your buttons on mobile devices

16 pixels is the most common size for button texts. 

Here is an example when contrast comes to play:

Banner with call to action buttons for email marketing campaigns

(Source: Email from Jobvite)

Here is one more widely used example of a button — a button over a banner:

Button over a banner in a newsletter template

(Source: Email from Forbes)

How to locate a button over banners, read in our "Build banners" blog post.

Email image size

If we are talking about banners, it is important to mention that they will inherit their width after the newsletter width. 

If we are talking about the product cards, there are absolutely no standards set for the email image size.

However, there is one email image size best practice: Make sure the height is proportional to the 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 maintained.

Email Width_Editing Images Width

Join Stripo

In Stripo, you can crop and edit images with our embedded photo editor "Pixie" to set the necessary image size for emails. To enter the editing mode, you need to click the "Edit image" button next to the image in the settings panel. 

Email Width_Editing Images

Important to note:

Please remember to compress images otherwise your email will be too heavy; this might have a negative impact on the loading speed for mobile devices. You may do it with Tiny.png or any other special tool of a kind.


(Source: the TinyPNG website, homepage)

Content block size

Content block, aka product card, normally consists of text, image/photo snippet, and a 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, under, or above images. It is totally at your discretion.

staggered-order of content blocks

(Source: Email from the White Room)

A number of content blocks

We dare to say, "Less is more." You can use pictures but don't overload your email with photos that don't bring any helpful info or have no relation to the email's subject.

Don't try stuffing one email with all your products on your websites, like new arrivals or sale proposals. It's better to add only the best offers and provide a link to the website. 

Template Width _ Content Blocks in Emails

(Source: Email from Madewell)

It's better to make the content area no bigger than 900px long. That's enough for three rows of product cards. 

However, if you feel like adding a bigger number of product cards in your emails — you may use image carousels, accordions, or even 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. 

I prefer laconic footers that contain the info that should be there 100%. The сlassical footer should contain contact info including your legal address, the unsubscribe links, social media icons, and the reason why you are reaching out to recipients. That's all, so the standard 600px by 200px footer dimension is more than enough to place all this info.


(Source: Email from All Good)

Please refer to the email footer design blog post for more information on email footers. 

Mobile-friendly design

Of course, the mobile email width does depend on the screen of a smartphone — and it varies from smartphone to smartphone. But you may set special mobile styles for all elements of your email — and that they will differ from the desktop ones.

To enter the settings mode, please click the "Appearance" tab in the settings panel, then click the "Mobile formatting" 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.

For detailed information on setting custom sizes for desktop and mobile screens, please refer to our "Mobile-friendly email design" blog post.

Email Template Width_Desktop View

(Desktop device)

Email Template Width_Mobile View(Mobile screen, full-width button)

Set custom width of emails for mobile and desktop screens with no coding skills
Join Stripo

Total email size, aka email weight

If your email weighs a lot you don't have any guarantees that it will not be clipped in such email clients as Gmail and Yahoo! Mail. Both Gmail and Yahoo Mail weigh the size of the HTML code!! of your email and clip 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 are some extra characters that will be automatically added to your email code when you're creating an email template. You may remove them manually and reduce the email size greatly or just choose the editor that does not add any extra characters to your emails. Stripo is one of them, and it provides pure HTML code without any system characters. 

How to weigh your email:

You may weigh your email with the mail-tester tool. It's free.

Or you can download your email template as the HTML file from Stripo and see its properties or info (Windows/macOS respectively).

Downloading Emails as HTML Files

If the size of your file exceeds the claimed 100 kb, you might want to optimize it before you export this template to your ESP:

Minimizing HTML Code of Your Emails

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 element alone. The 600-640px width is the most popular among brands.

The height depends on the content length but should not exceed the 2 500px height. 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 for email elements dimensions so you may experiment with forms and sizes.

Set custom width and height to all email elements. Build unique emails in no time

Data Knowledge 5 months ago

Hola! es muy útil y de gran ayuda aclarando muchas dudas esta información; Pero me gustaría que profundizaran en relación al tema del texto de vista previa de la comunicación que se hace, este ¿se puede editar y hacerlo personalizado? o simplemente es el texto que va como pre-encabezado... ¡Gracias!

Hanna Kuznietsova commented to Data Knowledge 4 months ago

Hola, Gracias por su pregunta. Lo siento por esta respuesta tardía. En cuanto a la personalización en el preencabezado del correo electrónico... Si hablamos de direcciones por nombres, entonces sí, puedes hacerlo con Stripo o con tu ESP. Si estamos hablando de una personalización más profunda, como algunos datos personales sobre los usuarios (el número de su pedido o la oferta basada en el historial de compras de los usuarios), le sugerimos que pregunte a su ESP si tienen soporte para ello. Deseándole feliz y eficaz correo electrónico. Gracias.

Fernando Be 1 year ago

¡Muchas gracias, información solvente y utilísima!

Hanna Kuznietsova commented to Fernando Be 1 year ago

Fernando Be, Muchas gracias por sus comentarios de apoyo.

Duke Duke 2 years ago

Hola! una consulta, que código tengo que agregarle al código para ocultar bloques en un dispositivo móvil?

Hanna Kuznietsova commented to Duke Duke 2 years ago

Hola, Duke Duke. Gracias por su pregunta Si desea ocultar algunos elementos para dispositivos móviles, simplemente haga clic en el icono Ocultar para dispositivos móviles en la barra de herramientas. https://prnt.sc/rqad55 En caso de preguntas adicionales, envíenos un correo electrónico support@stripo.email Estaremos encantados de ayudar ?

Duke Duke commented to Hanna Kuznietsova 2 years ago

Hola! escribí al mail de soporte y me dijeron que no me pueden responder, solo en inglés o ruso. lo que quisiera saber es como agregar esa opción directo desde el código, o si tienen un ejemplo de como quedaría en el código esa funcionalidad

Hanna Kuznietsova commented to Duke Duke 2 years ago

Hola ... En el código, cambia así: Debe seleccionar el bloque / contenedor que desea ocultar en el móvil. Después de eso, abra el editor de código. Luego inserte tr class = esd-mobile-hidden especialmente para la unidad deseada. (Ver captura de pantalla https://prnt.sc/rrbe6p) La siguiente clase debe estar cerrada: https://prnt.sc/rrc9zd Por lo tanto, puede ocultar varios elementos de la carta utilizando nuestro editor de código. Desafortunadamente, no podemos decir si este código es universal o adecuado para otros editores de cartas.

Manuel Garcia 2 years ago

Muy util, toda la información. muchísimas gracias.

Hanna Kuznietsova commented to Manuel Garcia 2 years ago

Manuel, Muchas gracias. Estamos muy contentos. Me alegra estar de servicio ?

Lorena Barahona G. 2 years ago

Hola, fantástico, ha sido muy útil como información. Gracias

Hanna Kuznietsova commented to Lorena Barahona G. 2 years ago

Lorena, Muchas gracias Estamos muy contentos Si tiene preguntas, por favor hágalas. Estaremos encantados de responder a todas sus preguntas.

Philippe Saudemont 3 years ago

Bonjour. Je pense qu'il y a une erreur sur la troisième ligne, ce n'est pas pour largeur ordinateur 60 mais 600 pixels. Cordialement.

Hanna Kuznietsova commented to Philippe Saudemont 3 years ago

Bon après midi Oui, c'est une faute de frappe. 600 pixels pour l'ordinateur. Merci beaucoup d'avoir remarqué et d'avoir dit. Passez une bonne journée

You might be interested in

previous next
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they had....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s