Email Design Guide: How to Design an Email, Email Tips, and Examples

Looking for an ultimate email design guide? In this article, we're breaking down the basics of email design. You'll learn about the main components of an email and the ways to make the best of them and create engaging emails every time. You'll also find out that there's more to the process of creating an email than you might think.

The structure of an email is practically the same as the structure of a typical web-page:

There is usually a topic of the email and a link to the web-version in the prehead.

Web-version is added in case pictures won't download or a user wants to share this email without forwarding it.

Usually, there is a company's logo in the header, sometimes there is contact information and a menu.

Here is an example of Amediateka's email header: it is simply the logo.

And here is United Colors Of Benetton's email: it has both the logo, the information about the loyalty points, and the menu.

Email body may consist of text or several text chunks, pictures, a call-to-action button, etc.

An email footer must contain the unsubscription link; emails without it will go to spam. Usually a footer also contains contact information, footnotes, and links to social media.

A responsive email looks beautiful on all screens because its content adjusts itself for any screen size. When you develop a layout, you should take into consideration the nuances of page-making and layout rearrangement. There are several variants of responsive page-making.

You can use a module grid with two, three, or four columns to design an email template. The number of columns depends on the information you want to include. All the elements of an email — a banner, a paragraph of the text, or a snippet may be represented as rectangles. When the screen width gets narrower, the elements just rearrange so that they adjust themselves to the size of each other.

In this case, when the screen gets smaller, the pictures in the email get smaller, too, and the front size remains the same. Pay attention to the fact that if you use some unconventional font, you will have to make it as a picture, but then a long heading will become unreadable.

Media queries are components of the CSS language. In our case, they will help us change the position of objects in an email. However, it is not the best way to adapt emails because not all email clients support this method.

According to Campaign Monitor, the following email clients support media queries:

In most cases, we use the first two methods: block adaptation and scale adaptation. A template coder decides which method to choose depending on a ready-made template. If there is an opportunity to rearrange the elements, we do it, and if there isn't, we stretch and zoom out pictures depending on the screen size. Sometimes we can tell the coders what method exactly they should use.

If you're interested in the topic of responsive design, we highly recommend reading "Mobile First" by Luke Wroblewski. The author tells about mobile design taking into account display on mobile screens and tablets providing examples and design recommendations. The author's approach may be applied to email design as well.

It is easy to mess up with responsive email design. That is why you should think about this apect beforehand and ask the coder check whether an email is properly displayed on various devices.

Let's look at the following example: in this email, the tags were supposed to be presented in two columns.

However, the email turned out to look like this.

The thing is that there shouldn't be spaces between the floats in the code (<div style="display: inline-block">…). In this example, someone added a space or
word-wrap. As a result, an indent between the blocks appeared, so the two columns didn't fit.

Email fonts are the pain of any designer. We recommend using only standard fonts for your email marketing:

— Arial
— Comic Sans MS
— Courier New
— Georgia
— Impact
— Tahoma
— Times New Roman
— Trebuchet MS
— Verdana

These are not the most beautiful fonts, but they are reader-friendly, so a subscriber will definitely see the entire text in the email. By the way, standard system fonts for Android and iOS are Helvetica and Roboto. That is why they can also be used, in which case they are replaced by our favorite Arial :) Since they look similar, it won't damage the layout and nothing will shift.

We recommend using the font size of the main text being 14 px, the line spacing — 1,5.

The main idea is that the text color should contrast with the background color. Some designers believe that it's better to use dark grey (for instance, #333333) to the white background because reading 100% black text is harder for the eyes. However, this is a controversial statement.

Use several text styles to arrange accents: the main heading, the main text, a link, a footnote. Don't overdo it: a large number of fonts and colors makes the perception worse. Decide beforehand how many text styles you should have and stick to it. It is optimal to have three or four: the heading, the main text, text in the footer or footnotes, and links.

The optimal width of an email template is 600 —700px, including indentation. Why 600px? It is mainly connected with the window size of email clients and with responsive page making. The most common screen width of mobile phones is 320 px.

The main tip: your email mustn't contain a picture without any text: first of all, pictures may fail to load. Also, although such an email can be designed faster, it's difficult to make it responsive.

Look at the following example: in this email, pictures simply failed to load.

Also, don't overdo it with background images as not all email clients support the display of a background as a picture.

An email is not a souvenir photo, so you do not need a high-quality picture here. That is why you should optimize pictures for the web, otherwise, they will be heavy and will not display. To reduce image size we use CompressPNG (you can also compress jpg or pdf there) or IloveIMG.

Sometimes, if you open a newsletter on your iPhone or Mac, the image is a little blurry. It does not mean that the pictures are of a low quality; the designer just didn't think
that you will see it on a Retina display device. To avoid such situations, you can double the size of email content: make the width of pictures 1200px instead of 600px, and the width of the text 32px instead of 15px.

Each email is designed with a purpose: purchase, subscription confirmation, feedback, etc. The content of an email should persuade the recipient to perform a target action. In most cases, you should design a button that contains a call to action inviting the user to perform it.

First of all, the button should be designed in such a way that the user understands they can click it. Secondly, the button should be noticeable: use colors that contrast the background and make the button big enough. The minimum recommended height is 35 px. The average width of an index finger is 16-20 mm that is about 45 px. If to be more particular, in Apple's guide, the touch area is 44 px, and Microsoft recommends 34px. In any case, if your button is smaller, it is more difficult to click it and perform a target action.

Before designing an email, we study the client's business: its peculiarities, advantages over competitors, corporate style, website, and previous email campaigns if there are any. We also look at the statistics: which of the previous campaigns worked better and which ones worked worse. In most cases, it is necessary to develop a master template — it is an email with all the elements which may ever come in handy. In the future, these elements may be used to make emails.

When the text is ready, the designer defines the structure of an email and singles out the main units.

When you design an email, always ask questions. Even if it seems that everything is clear, you still should ask the manager and the copywriter whether you understand the task correctly.

Meticulous task specification sometimes leads to unexpected decisions. For example, once our team had to design an email with guidelines for working with an e-wallet. It was supposed to be one email for three kinds of e-wallets with the guidelines for each one. The designers sketched out a layout and showed it to the manager. It turned out that the email looked too long and uninformative: there were text chunks of different size and no illustrations.

As a result, we designed an email similar to a presentation: we understood that this form was perfect for helping the subscribers figure out how e-wallets work. The main thing is that the client was also happy with this email.

This story showed us that the main task of a designer to understand the problem and to offer a solution.

When we get all the answers, we can start creating the template according to the chosen structure. You may face some difficulties at this stage: for instance, too much or too little text, headings are too long, or incorrect banners.

If the text is already agreed upon, you have two options: go on working or try to discuss changes in the text with the client. If you give strong reasons, the client, as a rule, won't mind any changes.

When the email design is ready, the work of a designer isn't over here. You should always control email coding: sometimes a ready-made email slightly differs from the layout. When you make sure that the email looks good and is displayed correctly on most devices, it may be sent.