Limitations of HTML Email Design - Email Width and Size

It was already almost ten years ago when I first had to deal with editing an email design in HTML. 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 up by tests and actionable advice.

A glance into email history

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

IRC, a few websites, and email. That was the Internet for all of us back then.

Evolution of email clients

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

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 any real influence to rendering policies of the different providers.

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

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

The trend is overwhelmingly 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 600px to 700px, 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 summary of the results.

600px email width

If you are from generation Y or before, you remember those days when screen resolutions were even under 1024px, 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 1440×2560 resolution 🙂 in my hand.

Image source: nngroup.com

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

The use of 600px 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-600px 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 its three column view. Emails used to be a touch narrower too — around 500-550px.”

Elliot Ross, actionrocket.co

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

Screen resolutions are significantly higher, but you still cannot be sure that your email will be displayed in its full width.

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

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

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

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, dinovici.com – Sr. Email Marketing Developer at Ariad Communications

I took this screenshot on my MacBook after sizing down the Chrome window to 1366px. The email displayed with 650px 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 600px width.

Who uses 600px as the default email width?

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

• Mailchimp
• Campaignmonitor
• Getresponse
• Litmus — I have to add that sometimes they use fancy things like full-width background images or even HTML5 animations in their emails.
• And most free responsive email templates obey the “600px rule”.

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

That’s why in Chamaileon we use the 600px email width standard for every email template. This way you can design templates faster, without adjusting them manually.

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.

640px

There are a couple of big names among email developers who optimize their email messages for 640px, 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, actionrocket.co

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.

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

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

650px

I chose to test 650px 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.

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

It shows that the right side of the message is already cut, and some 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 650px wide, but they have a huge promo image on the top with 970px width.

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

When I move the browser window to my full-HD second monitor, the template looks pretty bad, just like in Litmus.

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

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

Above 700px

Based on the previous tests, I’m 100% sure that 650px+ email templates won’t fit on the screen on Yahoo Mail on the most popular 1366×768 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.

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

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.

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

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

Conclusion

If any of your email subscribers are using Yahoo Mail or Outlook, I would advise that you stay under 650px width, or just use the most widely-accepted 600px 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 HTML email size hit Yahoo’s size limit.

Both Yahoo and Gmail clip too long HTML emails. Gmail’s official size limit is 102 Kb. Yahoo seems to have a very similar limitation in place, but I couldn’t find 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, but rather 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 (600px 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 (Email Service Provider) 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 referring) that shows the above steps in a visual way.

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.

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 it will actually 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 I’ll do my best to get it for you. (I posted a question on UX.stackexchange.com).

Based on the previous calculation, I would recommend that you 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 quite a long article, here are the key takeaways for you:

• Keep your email width under 650px. Stay at 600px, for maximum compatibility.
• 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 that you won’t miss an update.

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