Email Width and Height & What to Include Above the Fold

This article was last updated on September 1, 2020

Email width and height have been a subject of debates for many years now. Probably no one would argue that web development has evolved rapidly throughout the course of the last decade. In contrast, not much has changed in the world of email marketing.

This naturally, puts a limit on email design opportunities. The designers of email templates still need to abide by certain size restrictions set by outdated email clients which still have a piece of the pie. Regardless of some brave predictions for 2017, email clients simply won’t conjoin powers to come up with universal rules for email development.

With nothing else left to do but follow the rules, today we’ll talk about email template sizes. These would be email width and height especially in terms of “above the fold” area – the first thing your recipient sees in your email design.

Email Width

Email width is the dimension you need to be the most strict about. Some email clients are evolving and they even support video formats. However, there are still email clients which would cut out email design templates larger than 700px (or even less). We can tell from our experience that such clients are Outlook, Yahoo and AOLmail. Also, recipients opening your message on screens with low resolution may also not be able to see the whole template.

In order to be safe, stick to 600px email width. This is the dimension which operates great on the preview panels and email panes of all email clients. However, the guys from CampaignMonitor have found out that you can stretch the email width to 640px and still be safe. (Research) In addition, the research shows how you can play with the background color to fill the viewable area. Regarding the images you use, stick to the 600px-width rule once again.

Email Height

Unlike email width, email height is a dimension that you can definitely play with. Email width may be fixed but email height can vary from one campaign to another.

Your email template may be very short and concise just to tease the audience. This kind of email template is usually focused on one call-to-action button. It has the purpose to provoke your curiosity and take you to a web page. Just like the following example by Milled.

Other type of email templates are long templates with multiple call-to-action buttons, each leading to different landing pages. Such email campaigns are informative, they give recipients multiple options and contain lots of value. If you’d like to learn more, we have a whole article dedicated to this topic: What’s The Best Email Template Height?

In addition, have in mind that long email templates may make the HTML heavy. This would be a problem since Gmail clips HTML email designs heavier than 102kb (this doesn’t include the images in the template). Want to learn more? Sure: Why is Gmail Clipping My Emails?

Above the Fold

Above the fold is the area which the recipient sees before scrolling when the open your email template. So, how to define how much is the fold? According to TargetMarketing, this area is about 200 to 250 px starting from the top. However, we believe that the best way to be sure what your audience will see when they open you email template, is to test. Learn more about email testing at What is Litmus Email Testing and What are the Alternatives?

So, basically “above the fold” leaves you with little room for improvisation to grab the recipient’s attention. However, it is your duty to make the best out of this area.

One option is to put your main offer or most valuable information in these first 250 px along with the call-to-action button. This will guarantee that all users which click on your email message will see your offer even if they don’t scroll. All additional information can be placed below the fold and the template should end with another call-to-action button. Don’t make the recipient scroll back up. They would rather click back to their inbox.

Here is an example by Animoto. They used the “above-the-fold” area for a compelling copy and a call-to-action button. Moreover, if the user decides to scroll down, there are additional call-to-action buttons for each text section.

However, if you don’t want to clutter your top area too much, try to create tension. If you are witty enough, curiosity will make the user scroll. Plus, this strategy has a solid pro – due to mobile phones the modern user is used to scrolling. And we all know that mobile opens are quite high these days.

Here is an example by Boden. They bet on clever copy to make the recipient scroll down all the way to the bottom.

Summary

Use 600 px fixed email width and experiment with the height of your template. Both short and long email design templates perform well depending on their content and purpose. Regarding the fold, either put your most valuable offer above it, or be clever and provoke the recipient’s curiosity to make them scroll.

Have anything to add to these recommendations?