Parameters of an Email and Its Elements

We receive dozens of emails every day, they are full of colors and variety of offers. We note an attractive newsletter design in some of them, read something interesting in other messages, and some of them we don’t even open at all.

We can see a multitude of different email examples and templates today, and each of them is much better than other. The further search for fresh ideas develops, the more difficulties, surprises and troubles arise, so it’s not easy to find solution and even to create email itself. So where to start?

Something about the standards

The universal width is 550-600 px range but now we can see even 900 px. Why is this so important and where do standards come from?

More than 10 years ago Microsoft Outlook was the most popular email service, and standard monitor screens had a low resolution. Marketers had to adapt to these limitations. Since then, 600 px rule had come and spreaded all around the world.

But much has changed since then:

• 97% of screens has 1024×768 px resolution or higher

• 1366x768 is the most popular resolution at the moment

• 53% of emails are opened on mobile devices - and only 26% on iPhone

Because of such statistics, we face the revolution in email marketing - a revolution in newsletter design. Emails are becoming far more like mini-websites. The most effective email campaigns in the world are full of large, bright full-width images. How do marketers implement all that?

600px is width when email is correctly displayed because few people will use the horizontal scroll that appears if message is too wide. Users prefer habitual actions. Don’t forget about smartphones and tablets which adapt emails in their own way. This width will protect you from many troubles and make your email to be displayed just as you planned.

What width is optimal to be your email campaign dimensions? Many marketers raised this issue just to get confusing answers that seem to be relics of the past. Let's analyze everything in detail and look at all possible options.

Width

To make a decision it’s important to take into account different email services, devices, screen sizes, types of template.

Email services are not using the full-screen mode of messages displaying. A lot of space is filled by menu, advertising, navigation items which make their specific limitations. So if you want your email to be well-displayed in email client, you can make it 550-640 px. If you want to go further and make email wider - just welcome, but remember that in many email clients background may be not displayed, or horizontal scroll is added to view the whole content. Just test your email before sending via services like Litmus or Email on Acid which will give you a certain idea how it will be displayed in different email clients.

It’s important:

• For email with over 640 px width, Gmail will display only background if user stretches his browser wider than 1200 px

• In Yahoo Mail you can view email with maximum 650px width

• For Outlook 2007, maximum is 600 px

• For Outlook 2013 - 550 px

Mobile devices have 320 px limitation for vertical view, and 480 px for horizontal.

If your newsletter design is adaptive, it means that width will differ for certain devices. Therefore you need to take into account the maximum screen resolution for each model.

To select these sizes, you need to rely on the following facts:

• What email clients your subscribers use to open emails?

• Is your email adaptive for each email client, or it’s too wide and a horizontal scroll appears?

It often happens when companies that make experiments with 640, 700 or 960 px email width are using adaptive templates, so width is automatically adjusted for recipient's email service and device.

Another companies prefer mobiles initially, so their email campaign parameters are targeted on these devices.

For example, Nike arranges mailings with the same newsletter design for all devices:

In turn, Victoria's Secret designed an universal structure with 520 px width:

We don’t recommend you to bother this method. Something may be correctly displayed on a smartphone or tablet screen, but in desktop version it seems strange and weird. For example, Victoria's Secret newsletters design is often being broken due to width experiments. Use adaptivity to fit all devices.

Height

Messages height is not limited, it depends on content volume - but let's think about recipients. The longer is email, the less likely that it will be read to the end; chances that subscriber will click website link and buy something are even lower. So explain your main idea in the very beginning.

Total webpage height is 960 px which is usually not enough to add the whole info in email. The most commonly used length varies from 1500 to 2500 px. It’s usually enough to place content and make message easily scrolled by users.

But Gmail crops email when it’s too long. As we already know, there is unsubscribe link at the bottom; user may not notice it, so he or she most likely will complain spam.

Size

Size is among the crucial email campaign parameters: there are no guarantees that your email will be correctly displayed in Gmail and Yahoo! Mail when it’s too massive. Both Gmail and Yahoo Mail reduce email size when it overpasses these values:

• 102 kb size limit for Gmail

• 100 kb for Yahoo! Mail

The rest don’t reduce the sent message. 100 kb limit is often too small, and it’s not enough to make an email template. Size often depends on email editor you use. There is usually an additional code that will be added automatically when you create your newsletter design template. You can remove this code manually and significantly reduce your email size, or simply choose an email editor that is able to do this.

Preheader

Preheader is an item that contains info appearing right below the subject line and may really motivate to open inbox message. So add the really important info to make user read the whole content.

In the email itself this field is rather technical, you shouldn’t make it too large or place any extra items there. Optimal height should be 50-65 px.

If there is no preheader in your newsletter design, anything may come to your email randomly - from Alt Text below the first picture to some technical data.

Let's take a look at some successful examples of email header where preheader doesn’t attract extra attention but at the same time it’s quite informative:

Subject line

The most common block height (if there’s no menu or massive logo) is 70 px. When there is menu bar, subject line is 150 to 200 px high. Subject line height over 300 px isn’t suitable to view.

There are thousands of possible newsletter design ways but people choose the one that fits the corporate style of company's website, supports mobile extension, and at the same time is user-friendly. Classic options are logo and website categories, but sometimes menu is transferred to email footer to save the precious first screen.

For example, some popular cases of its use:

Banner

The most common used images are 640x480 px. You can find a lot of examples with these email settings in Pinterest, Google or any other search engine. It's better to choose a high resolution image, a bit larger than it will be displayed in email. This way, adaptivity won’t reduce the quality and email doesn’t lose its quality.

Many designers make experiments with banner sizes because length may differ. Width is limited only by the size of template you choose.

An example of a successful brand:

The body of a message

This block contains info email is opened for. The maximum length of text content should be about 500-600 px. It’s enough to emphasize any topic of 5-7 sentences.

Length of the text. The common recommendation is 45-75 characters for one line. If you use for mobile version the same font as for desktop then about 45 characters per line is enough, and 75 characters when maximum template width is 600 px.

Email is not a place where one can read an article with long stories or explore a new field of knowledge. Write text if you are sure that it will be useful for your target audience, but stick to one topic. Email with multiple topics has low chances for high conversions.

You are free to use as much text as you need without affecting the total size of email. But remember: the longer content you use, the less likely that users will read it to the end. It’s better to publish an intriguing short description with invitation to read all on your website; all in all, the goal of any business is to sell, isn’t it?

Products location. The optimal way is to place three products in one line, so it’s much easier for clients to view them.

There is an unwritten rule in email campaign parameters: to show no more than 6-9 recommended products in one email. Don’t be aggressive marketer with too many offers. No one likes annoying promos. It’s better to say less. And the best solution is to publish hottest offers and add the website link.

If you use a large image, there is no guarantee that it will have a good quality and optimal file size. For example, with adaptive template images quality isn’t changed (no matter what pics you uploaded to email), so summary size will be huge enough to affect the download speed.

Check the pics filesize. The bigger is image size, the longer it will be downloaded. About half of users won’t wait, so you lose clients. Simplify the message viewing by reducing image in our email editor. Click the link for detailed user guide how to work with images block..

Make content blocks length up to 900 px. It’s enough for three different info blocks. Every time you add a new one, ask yourself does new info fit your message and is it really crucial.

Let’s look at product cards positions in newsletter design from some companies:

Call to action.  It's not only successful headlines and pics but also buttons. They seem to assist reader with his next step. The main requirement for CTA button is to be noticeable, but it also has to fit the email design. There are no size limits. The clearer call to action you add, the more conversions you get.

Footer

Companies often design their messages footers with menu and full address, so they are larger than standard versions of this item.

Some marketers always try to follow the "40% pics and 60% text" rule, so they add privacy policy statements or any other additional info to email. This is a common practice for foreign companies, but this info is relocated to the bottom for the convenience of users because not everyone reads it but only those who are really interested.

Another option for footer design is to add the company full address. Don’t expect that someone will send you a real message or visit your company after receiving newsletter. The best way is to add the link to "About" page where all this info will be explained full.

We advise you to use concise footers with the most necessary info only. Classic footer should contain contacts, unsubscribe link and social media icons. The standard size is 600x200 px. This is more than enough to place all the mentioned info.

Summing up

600 px rule is still actual but it’s not a strict requirement anymore, so you can apply it depending on your preferences. There are no more limits that determine settings of email elements. The most important thing is to use the content that is really useful and relevant for your audience.

As you can see in this article recommendations and examples, modern marketers are engines of revolution in email marketing - they are still continue to break the limits in emails design, so can you.

We are proud that our clients may become leaders of this progress using our adaptive email editor. Standard our templates are designed for 600 px (desktop version) and 320 px (mobile), one can created it in several simple clicks without any HTML skills as well as to process the mobile layout of each particular email.