First of all, you should have an understanding of the responsiveness of emails. With websites, everything is much easier. A layout designer creates a desktop site and, using media queries, adapts it for mobile platforms. Everything is very clear.

Things are different with letters. Dozens of email clients can be roughly divided into several groups:

• Normal email clients, which include most desktop applications and webmouths (Gmail, Yandex, Mail.ru, Outlook.com, Thunderbird, Apple Mail, AirMail)
• Family of desktop Outlook
• Normal mobile email clients (Apple Mail, Android Mail, Yahoo Mail, Spark)
• Mobile email clients that do not support media queries (Gmail, Google Inbox, Yandex, Mail.ru)
• Unicums (Rambler, The Bat !, Lotus Notes, Polymail)

Most layout designers and ready-made templates are able to cover the needs of only the first three groups. The essence of the approach is the same as for the site layout, but there are some nuances of mailers (inline styles, special formatting, table layout).

How can we do well everywhere?

First of all, the Mobile First approach will be extremely useful. Making a desktop email out of a mobile email is several times easier and faster than vice versa.

The layout designer must be able to adaptively layout without media queries. It is difficult, but nothing is impossible. If your layout designer says that it is impossible to make a layout, then ask him to make minor changes to the design layout in such a way that this becomes possible. If he cannot do this, then you are paying money to the wrong person.

How to write a technical assignment for a layout designer, who used to make up only landing pages?

No way. I would not contact a contractor without experience in typesetting letters. Nevertheless, you can order a master letter template from a good specialist, and an inexperienced verstor can already “collect” specific letters on its basis.

Checklist for the layout of letters. How to check if everything is good with us?

1. We buy Litmus.com account for $ 80 per month. It’s worth it. Provides screenshots of emails from most popular email clients. Also on paid Mailchimp accounts there is Leitmus toolkit right inside Chimp. Litmus analogs suck. Dot.
2. We do live tests for Russian email web muzzles (absent in Litmus), and all mobile mailers, of which there are also very few in Litmus. We are looking at the quality of the display of our letters with our pens.
3. It will not be superfluous to look at the headers of letters for the presence of electronic signatures, but this question is already beyond our topic.

Services that help make layout

Each mailing system considers it its duty to make its own email designer. In principle, no one really did anything normal.

• Block editor Mailchimp. 8/10… Covers the needs of the first three categories from the beginning of the article, with a friendly and intuitive interface. Inconvenient restrictions are present.
• Campaign Monitor block editor. 7/10… Almost no different from the Mailchimp editor. The devil is in the details.
• Block editor https://beefree.io/ 8/10… Knows how to make responsive emails without media queries. Comfortable and pleasant. But damp. There are bugs.

All other block editors on the web are garbage that cannot be used.

Templates – should you use them and what are the good ones?

It is simply necessary to use templates. Be it ready-made or written by yourself. There is no point in making every new letter from scratch. Let’s go through the list from simple to complex:

1. Homeless option. http://themeforest.net/category/marketing/email-templates Email templates covering the first three categories of mailers. Average price tag $ 20. Any more or less sane layout designer can modify it to fit your corporate identity.
2. Ready-made Mailchimp templates. Not bad either, but they also can’t cope with mailers that don’t understand media queries.
3. https://github.com/mailchimp/email-blueprints More interesting option. A set of templates for a layout designer is all from the same Mailchimp. It’s still not very smooth with adaptability.
4. https://github.com/dudeonthehorse/kilogram My email layout framework that contains a highly responsive email template without media queries. Designed for coders with an understanding of layout, and not for stupid copying of the code.

Are there any good videos or articles about email layout?

There is actually a lot of material. Nevertheless, there is practically no author’s Russian-language content. Here is a list of useful materials:

• My blog on Habré https://habrahabr.ru/users/dudeonthehorse/topics/ Without a grain of modesty, I will say that the most useful unique content in Runet for typesetting letters, which is based on my many years of experience working with letters
• Hub on Habré, dedicated to the layout of letters https://habrahabr.ru/hub/devmail/
• Pechkin’s blog on Habré https://habrahabr.ru/company/pechkin/ Among the heap of frankly advertising and translated articles, sometimes really useful materials come across. I especially recommend paying attention to the excellent selection https://habrahabr.ru/company/pechkin/blog/275603/
• Nicole Merlin’s blog http://blog.emailwizardry.co/
• Communities https://www.campaignmonitor.com/forums/ and https://litmus.com/community
• Jedi layout https://www.youtube.com/watch?v=TWFYQxevE9k Not the ultimate truth, but deserves attention
• Anton Chirkov’s course on Netology http://netology.ru/courses/adaptivnaya-verstka-email At least give a general idea for the layout designer.

Source: medium.com