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.

A 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.

Adaptability is responsible for the correct display of an email on different screens. An adaptive 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. If any difficulties arise, it is better to consult with template designers: they will tell you how to arrange elements for the proper display of important information.

There are several variants of adaptive 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, adjusting 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, 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.

We would also 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 email adaptivity. That is why you should think about it beforehand and then 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.

Fonts are the pain of any designer. We recommend using only standard fonts in email design:

— 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 tires one's eyes. However, this is a controversial statement.

Use several text styles to arrange accents: the main heading, the main text, a link, a footnote. It is important not to 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.

Decorative fonts are better not to be used in the text or used in small numbers because they may be added only in the form of a picture. It happens with banners and decorative headings. It is risky because pictures may not download, they will increase the size of an email and it will take a long time to open.

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

As you begin making email designs, take into account the content. If it is a personal email, don't forget to add who you're addressing.

Emails should not be only a picture. First of all, they may fail to be displayed. Secondly, such a letter is difficult to be made adaptive, though it is made faster.

In this example, the email is made as pictures and they did not download:

You should not also overdo it with background images. Not all email clients support the display of a background as a picture, for instance, this email, when opened with Outlook, has a grey fill instead of a background picture.

Email design should correspond with the website or the corporate style to make it easier for a recipient to recognize you.

An email is not a souvenir photo, 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.

Again, watch the size of the GIF to be no more than 1 Mb, otherwise, no one will appreciate your efforts because the picture will just not download. Sometimes when you open a promo email 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 through that you will see it on a Retina display device. For the layout not to be blurry we double its size, making the content width, not 600px but 1200 and the text, not 16px but 32.

An email is prepared for a particular purpose: purchase, subscription confirmation, feedback, subscription in social media… The whole content of an email should be aimed at the target action being performed by a recipient.

There is usually a button that leads to the target action. As it is the most important element of an email, it should be noticeable. First of all, a button should look like a button. When a recipient looks at it, he should understand that it can be pressed and a particular action will follow.

Secondly, a button should be noticeable. It is better to use colors that contrast the background. It is also should be big enough. The minimum recommended height is 35 px. The average width of a pointing finger is 16-20 mm, it is about 45 px. Fingers are different, but phone producers give their recommendations. In Apple's guide, the touch area is 44 px, Microsoft recommends 34px. If buttons are smaller, it is more difficult to press them and perform a target action.

First of all, when we start making a design, we study a client's business: its peculiarities, advantages over competitors, corporate style, website, and previous email campaigns if any. We also look at the statistics: which previous campaigns worked better, which ones worked worse. Sometimes a client has a guideline for emails, it is a perfect variant. In most cases it is necessary to develop a design 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. The basis for a design template is a website.

When the text is ready, the designer defines the structure of an email and singles out the main units. The copywriter should also mark subtitles, meaningful chunks split, lists. If the structure is not vivid, you should discuss it with the copywriter and define the structure together. If you have any questions, they should be asked at once: what shall be illustrated, what the main message is, what shall be accentuated.

Always ask questions. It can't be that everything is clear. Even if it seems that it is clear, specify with the manager and the writer if you understand the task correctly.

Meticulous task specification sometimes leads to unexpected decisions. For example, once we were to send a guideline for working with an e-wallet. It was supposed to be one email for three kinds of e-wallets with a guideline for each one.

We sketched out a layout, showed it to the manager. The email turned out to be long and uninformative. Text chunks of different size, no illustrations.

As a result, we sent an email designed as a presentation. We got it, the goal - to help the subscribers to figure out how e-wallets work - was achieved and the email design was not affected. The client was satisfied.

Design, first of all, is a target achievement. That is why the role of a designer, no matter how he designs an email campaign or a website, is to understand the problem and to offer a solution.

When we get all the answers, we start building the template according to the chosen structure. At this stage some difficulties may emerge: it may happen that there is too much or, vice versa, too little text, paragraphs in the text are uneven, headings are too long, the banner is posted improperly.

Address the writers. If the text is already agreed upon, there are two variants: go on working or try to agree upon the changes in the text with the client. If you give well-founded reasons, the client, as a rule, does not object.

Handing the layout over to the template designer and checking the page making is the next step.

Then, the layout is ready. The manager is happy, the client has agreed upon it. It is high time to hand the work over for the page making. However, the work of a designer isn't over here.

You should always control the page-making. Take the time to look through the page-making or ask to send you the text. It happens that a ready-made email slightly differs from the layout.

When you make sure that the email is made in the way it was supposed to be and is displayed correctly on all the devices, it may be sent.