Email Design Guide: How To Design an Email, Emails Tips and Examples

Detailed instructions for email design: elements of an email, nuances of design, mapping on different devices, acceptance of a text from a copywriter, page-making check.

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 logo in the header, sometimes there is contact information and a menu. Keep in mind that if you add a menu to the header, it is better to choose only the most important for this particular email items, not all of them.

Here is an example of Amediateka's email header, it only has the logo:

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

Email body is part of the content. It may consist of text or several text chunks, pictures, a call-to-action button.

The information which is mandatory for the footer is the unsubscription link, emails without it will go into spam. Usually a footer also contains contact information, footnotes and links to social media.

Adaptability is the thing that is responsible for the correct display on different screens. An adaptive email looks beautiful on all screens, its content adjusts itself for any screen size. When you develop a layout, you should take into consideration nuance 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, for example, on mobile devices.

There are several variants of adaptive page-making.

To design an email template, a module grid with two, three, or four columns is used. The number of columns depends on the information which should be presented. All the elements of an email, a banner, a paragraph of the text, a snippet in this case may be represented as rectangles. When the screen width gets narrower, the elements just rearrange, adjusting themselves to the size of each other.

If we use such a method, 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.

Mediaquery — is a component of CSS language. This method makes it possible to change the position of objects with the help of media inquiries. It is not the best way to adapt emails, because not all mail clients work with it.

Clients which support and don't support media inquiries:

In the table above we can see clients in which media inqueries are supported. Data is taken from campaignmonitor.com

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

I would also recommend reading "Mobile First" - a book by Luke Wroblewski. It talks simply about websites designs taking into account display on mobile phones and tablets with examples and page making recommendations given. This approach may be adopted to email design as well.

It is easy to mess up with email adaptivity. That is why you should think about it beforehand and then carefully check with a template designer for the proper display on various devices.

For example, in this email tags were supposed to be presented in two columns:

However, as a result the email looked like this:

The thing is that there shouldn't be space in the code between the floats (<div style="display: inline-block">…). In this example space or word-wrap were accidentally added. An indent between the blocks appeared and two columns didn't fit.

They are the pain of any designer. In email design we can use only standard fonts:

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

They are not the most beautiful fonts, but they are well readable and a subscriber will definitely see the entire text in the email. You can't choose fancy fonts as clients often ask to do. 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 dear Arial =) Since they look similar, it won't damage the layout a lot and nothing will shift.

The suggested font size of the main text is 14 px, line spacing — 1,5.

Text color should contrast with the background color. Some designers believe that it is 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. You can read an article in which the author writes about legibility, color contrast between text and background, font evolution in web and provides examples. (https://vc.ru/flood/19580-unreadable-texts)

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.

Design of an email with personal 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 the mail clients support 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 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 you 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 which 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 which are contrast to the background. It is also should be big enough. The minimum recommended height is 35 px. The average width of a point finger is 16-20 mm, it is about 45 px. Fingers are different, but phone producers give their recommendations. In Apple guide 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 accented.

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 ewallet. It was supposed to be one email for three kinds of ewallets 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 ewallets 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.