5 rules for the layout of email-letters from Pechkin

Today we would like to talk about the basic rules of HTML layout in emails. As you know, there are many mail clients in the world:

• web versions of mail providers (Gmail, Yandex, Mail, Yahoo, etc.)
• desktop email clients (Outlook, Bat, Thunderbird, Mac Mail)
• mobile mail clients (Blackberry, Android, Iphone, Ipad, etc.)

Unfortunately, there is no mandatory standard for the layout of letters that would be universally supported by all clients. Some support CSS3, some do not, some tags and attributes are supported, some are not, not to mention the fact that HTML and CSS support is changing even within the same email client from version to version. The latter is especially noticeable in the example of Outlook (from Express and 2003 to Outlook 2011).

What do you need to know for those who are going to type in HTML-code for email-letters?

1. Table layout.

Mounting up old school tables and forgetting about block layout, you will definitely save yourself from problems with old email clients. Also, do not forget that the web version of the mail providers can open in a variety of browsers, it is possible, even in IE 6.0. Tables will help you to be neat and beautiful everywhere the same.
')

2. Use universally-supported attributes for HTML tags.

3. Use universally supported CSS properties

4. Use CSS strictly inline.

Forget block css at the beginning of the document. Only inline styles. Of course, this can cause hemorrhoids when manually putting the html document in order, but Pechkin offers an automatic CSS-inliner to eliminate such problems, as part of the Pechkin project. Laboratory. This tool also defaults to the 2nd step of creating mailings in our service.

5. It is advisable to use the width of the entire document in 600px.

Set a maximum width of 600 pixels and protect yourself from angry reviews about horizontal scrolling in your subscribers' email clients.

Using these 5 rules will allow you to create a universally displayed HTML-version of your letter, which means that all your subscribers will be satisfied with its appearance without exceptions!

This material uses Pechkin.Lab services, where you can find tools to automate layout, create text versions of letters and other things that we use in the email marketing service Pechkin-mail.ru .