It was already almost 10 years ago when I first had to deal with editing an HTML email. Back then, I had no idea what it was exactly and what could go wrong if I changed some parts of the code.

I'm not a software developer or a site builder, just an online marketer who needs to take care of many things - sometimes overwhelmingly too many - on his own.

Do you know the feeling, when you make minor text changes to your HTML email template and everything breaks?

I bet you do, if you ever needed to modify an HTML email using a classic WYSIWYG editor or the HTML itself.

Thankfully, these days there are great email builders out there that take care of the code editing part for you, but it's still essential to know what's behind the scenes.

This article - and others in the series too - guide you through the ins-and-outs of email design and help you understand the limitations of HTML email.

Let's start with a short, to the point lesson about email history, then dive into various email width and size limitations all backed with tests and actionable advice.

Glance into email history

Email is roughly as old as the Internet itself. Both started their roots in the 1960's and it took them quite a while to reach regular people. They spread hand-in-hand to simple households in the 1990's.

IRC, some websites and email. That was Internet for all of us back then.

Evolution of email clients

There were a couple of companies fighting for early email and internet users, and they all started to develop their own email clients and rendering engines separately.

history of email clients

Yahoo, Hotmail, Microsoft and the rest were in a fight for market share so they were not interested in developing email standards together.

Unfortunately the situation is quite similar these days, but at least we can see the light at the end of the tunnel.

There are NO email standards

Due to the different interests, priorities, and policies of the big players in the email industry, there are still no email standards.

W3C is an international organization fighting for the standardization of the World Wide Web, but unfortunately not for email.

There's an ongoing community effort - Email Standards Project - which aims to help designers and email developers understand email rendering differences, but they don't have real influence to rendering policies of the different providers.

Fortunately there are good signs, and the whole email industry is going under modernization:

  • In 2015, Yahoo started to support responsive email design.
  • Litmus and Microsoft announced a partnership to improve email rendering of Outlooks
  • Gmail started supporting display: none in August 2016, and announced that they'll finally extend their CSS support, so responsive emails will work seamlessly in Gmail and Inbox soon

The trend is absolutely positive. Hopefully in a couple of years the email industry will be less segmented, and email coding will have similar rules as HTML5.

But let us stay in the present now, and look at the current limitations of HTML email designs.

Is there a standard email width?

Unfortunately, the short answer is NO. There are various widths companies use from 600 px to 700 px, but there are some who are continuously experimenting with even wider layouts.

Let's have a look at a few examples for different widths with Litmus tests, and a short summary of the results.

600 px email width

If you are from generation Y or before, you remember those days when screen resolutions were even under 1024 px, right?

That's when email marketing and HTML based emails were born. Feels like a prehistoric time, as I'm holding a phone with crazy 1440x2560 resolution :) in my hand.

screen resolution statistics from 1999 to 2011

Image source: nngroup.com

When and why did email coders start using 600px wide emails?

The use of 600 px width dates back to those years when only special ones had screens with a higher resolution than 1024.

There was no Gmail! Hotmail and Yahoo were the most popular web based email clients and Outlook was the standard desktop email client for most (just like it is now).

Email developers had to choose a width which can fit into all sorts of different (small) screen sizes, and 550 - 600 px seemed to be the way to go.

"It was largely down to the viewport size in the predominant email clients of the day, eg. Hotmail/Yahoo minus the page furniture and Outlook with it's three column view. Emails used to be a touch narrower too - around 500-550px"

Elliot Ross, Action Rocket

Since then screen resolutions increased a lot, but still 600 px width remained the best practice. Why?

Screen resolutions are significantly larger, but you still cannot be sure that your email will be displayed in it's full width.

If you are using Outlook in three column view (most people do), the message area will be very limited.

Outlook 2007 screenshot

On the most common 1366 x 768 resolution in Outlook 2007, only roughly 600 px remains for the message to display.

Outlook 2013 screenshot

In Outlook 2013 with the same resolution, this area is even smaller - around 550 px.

Since people can adjust the width of each column, everybody will have their own configuration. Unfortunately none of the Outlooks support responsive email design, so even your responsive email templates won't resize to fit into the available space.

The situation is quite similar in Yahoo's webmail, which doesn't support responsive email design either and on top of the three columns even includes advertisements on the right.

"One email client that comes to my mind where you will have issues if you go much wider than 600px is Yahoo Mail. They have those ads on the right which limit a lot the email real estate. I think you can go max 650, everything else will be cut off in Yahoo."

Vic Dinovici - Sr. Email Marketing Developer at Ariad Communications

I took this screenshot on my MacBook after sizing down the Chrome window to 1366 px. The email displayed with 650 px width, which is much better than in Outlook, but still.

On the screenshot you can see our "email tech" related newsletter from EDMdesigner.com. This responsive email template is optimized for 600 px width.

Here you can see a complete Litmus test with one of the free responsive newsletter templates that you can use in Chamaileon.

Who is using 600 px as the default email width?

Most industry leaders are still using 600 px as the default width for most of their (responsive) email templates.

  • Mailchimp
  • Campaignmonitor
  • Getresponse
  • Litmus - I have to add that sometimes they use really fancy things like full-width background images or even HTML5 animations in their emails.

Although both mobile and desktop resolutions are getting bigger, 600 px is still considered as the safest responsive email width.

Alternate email widths

For some designers and online marketers it feels like a huge limitation, so they are continuously experimenting with different sizes.

It would be impossible to check all the different sizes in this article so we'll only show a couple of examples for you with screenshots and Litmus tests.

640 px

There are a couple of big names among email developers who optimize their email messages for 640 px, so this is the first alternate width we are testing.

"...we go for 640px wide quite a lot, as up until recently it made math/retina images easy to think about for 320px wide iPhone screens. 640 also seems to work nicely with some of the common font sizes to give a nice type measure."

Elliot Ross, Action Rocket

It took a while to find appropriate responsive email templates to test but finally using Beetle.email, I found a couple of nice newsletters like this one from Gap.com.

gap responsive newsletter template

Based on the Litmus test, 640 px width seems to be working well in most important email clients. I have to add that in Litmus previews Yahoo Mail shows in full screen mode, but I tested this one with my own Yahoo mail, and it fits like a charm.

gap responsive newsletter template in yahoo mail

Knowing that Gmail will support responsive email design soon, properly coded mobile-friendly email templates - like this one - will work there too.

650 px

I chose to test 650 px since it seemed to be the maximum width that fits into Yahoo mail on 1366 px resolution. I'll send this email to my Yahoo inbox too, to see the three column view.

The next piece is a newsletter from Graphics.com a website which brings you daily graphics, design and visual culture news, articles and inspiration.

graphics responsive newsletter template

Here you can check out the Litmus test and below is a screenshot from my Yahoo Mail.

graphics responsive newsletter template in yahoo mail

It shows that the right side of the message is already cut, and some kind of extra white space was added to the left of the template. That white space wasn't present in the Gap.com example though.

Let's check out another - unfortunately not responsive - newsletter from CheatSheet. The content of this email template is exactly 650 px wide, but they have a huge promo image on the top with 970 px width.

cheatsheet newsletter template

The Litmus test already shows some nasty things in Yahoo Mail, but when I check it in my inbox on 1366px, it looks okay.

cheatsheet newsletter template in yahoo mail

When I move the browser window to my full HD extra screen, the template looks quite bad, just like in Litmus.

Both of these more or less 650 px wide templates had a couple of issues in Yahoo Mail. I don't think these problems are caused by the 650 px width, but rather the improper HTML coding.

If you have a beautiful 650 px wide responsive email in template "in your drawer" please send it to me (rolandatchamaileon_io). I would like to include an excellent example in this article.

Above 700 px

Based on the previous tests, I'm 100% sure that 650 px+ email templates won't fit into the screen on Yahoo Mail on the most popular 1366x768 resolution. But anyways let's run some tests to see the pain.

Note: Hopefully Yahoo Mail - just like Gmail - will support responsive CSS soon, and there won't be any issues with wider templates either.

I took the next newsletter example from Asos.com. It is a fresh, trendy website for fashion lovers. They seem to be fans of modern and minimalist designs, both on their website and in their email designs as well.

asos responsive email template

Their mobile-friendly newsletter template has a surprising width of 728 px (although there are images with 729 px width).

asos responsive email template in yahoo mail

The Litmus test shows that the template breaks in Yahoo Mail, the header image and menu become left aligned, the right side of the template cannot fit into the message area, and the email is truncated as well.

Let's check out another example responsive email template from
Econsultancy.com.

econsultancy responsive email template

Their Daily Pulse newsletter is 750 px wide and some parts of the template even extend this width by 6 pixels to add a little spice to the picture.

econsultancy responsive email template in yahoo mail

No surprise here. Econsultancy's email is also cut in Yahoo Mail on 1366x768 resolution, but at least not truncated like the previous one. For the full Litmus test click here.

Conclusion

If many of your email subscribers are using Yahoo Mail or Outlooks, I would advise you to stay under 650 px width or just simply use the most accepted 600 px width - as we and other industry leaders do.

HTML size and email weight matter too

Do you remember the Asos.com example from above? That message was truncated in Yahoo Mail, because the email HTML size hit Yahoo's email HTML size limit.

gmail clips emails

Both Yahoo and Gmail clip too long HTML emails as well. Gmail's official size limit is 102 Kb. Yahoo seems to have a very similar limitation in place, but I couldn't find the the exact size limit in any official documentation.

"From my experience it is 100kb. I did read it sometime, somewhere in the past. I always suggest to stay below 100kb and you'll be fine in both Gmail and Yahoo."

Wilbert Heinen, Senior Campaign Developer at E-village.nl

If you have a really long newsletter with a complicated layout and responsive email code, you might sound the alarm. To avoid the clipping of your message at least send a test email to a Gmail account.

Note: The size (weight) of your email HTML is not influenced by the content images, since images are not attached to the email template, they are downloaded from an external link!

How to optimize your email load time?

If you keep the size of your HTML under 100kb it doesn't necessarily mean that your emails will load fast, especially if they contain tons of images.

  • Use as few images as possible - Every image you include in your email template will be downloaded from your server one by one. So if you have 20 images, that means 20 requests to the server.
  • Reduce the size of your images - Use 72 dpi. Don't use larger images than the width of your template (600 px in most cases). Use an image optimizer tool like Shortpixel (they have a WP plugin which is free up to 100 images/month), JPEGmini or tinypng to remove unnecessary bits from your files.
  • Use a fast image hosting provider - Most likely you will host your images with the ESP you are using, but if not, make sure that you have fast enough servers that can handle image downloads at scale.
  • PNG for simple images, JPG / JPEG for photographs - In case of JPG / JPEG you can reduce the quality of your images to 70-80%.
  • Minify your email HTML - But make sure that all the line lengths and CSS related properties untouched.

I couldn't find any free online tool which would help you simulate email load times on various internet connections but if you know Chrome developer tools, you can follow Mark Robbins' advice.

I use chrome dev tools, here's what to do.

  1. Open the email in Chrome

  2. Right click and select inspect

  3. Click on the network tab

  4. In the top right corner you'll see 'No throttling' click that and select an option.

  5. Refresh the page and watch the email load slowly.

I tend to look at 'Regular 3G' as a good guide but you can also do some research into your target audience and adjust the setting accordingly.

Mark Robbins, Rebelmail

Here's a great animated GIF from CSS tricks (Thx @Mark for reffering), that shows the above steps in visual way.

download speed testing with chrome developer tools

If you want to become a pro in testing load times with the Chrome developer tools check out the official documentation from Google. I love that you can create your own speed profiles.

For those who don't want to spend time with the Chrome developer tools, here's a little illustration showing the load times of a 1 MB email over mobile networks.

time to load a 1 MB email on various mobile connections

I took into account the "typical download" speed provided by Kenstechtips, not the theoretical maximum of 2G, 3G or 4G networks and haven't calculated with the response time of your image hosting server.

There's a significant difference between average network speed available in Chrome developer tools and the data published on Kenstechtips. I'm still trying to figure out which data is more valid, but actually it will differ by region.

People are quite impatient today when it comes to web browsing. They start dropping out from a site if they need to wait over 1.5 sec - at least that's what Hubspot Academy uses as the benchmark for the ideal load speed.

But how do they behave when they are using their mobile device, and especially reading emails on it? I don't have the answer yet, but will do my best to get it for you (I opened a question on UX.stackexchange.com).

Based on the previous calculation I would advise you to keep your email size under 1 MB, preferably around 500 KB to provide appropriate loading experience even for those who are reading your emails on the go, with limited download speed.

Summary

I hope this article helped you to understand the basic width and size limitations of HTML email design.

Since this one was a quite long article here are the key learnings for you:

  • Keep your email width under 650px. Stay at 600 px for maximum safety.
  • Limit the size of your email HTML at 100 KB to avoid message clipping in Gmail and Yahoo.
  • Use few images, optimize them and keep your email size under 1 MB.

The next article in the series will focus on other technical limitations of HTML email templates, like background images, fonts, video, etc.

Don't forget to subscribe to our newsletter in the footer below, so you won't miss an update.

If you have any questions or ideas to share please tell me in a comment.

Author
Roland Pokornyik

Roland Pokornyik

CEO / Co-founder @ Chamaileon.io & EDMdesigner.com