How to make up letters for the most common mail services?

D

Dmitry2017-04-17 13:34:50

HTML

Dmitry, 2017-04-17 13:34:50

Googled, everywhere it says that you need to typeset tables. But everywhere the phrase *so that it works everywhere* is mentioned. And if you need only for the most common, is it possible to typeset in blocks? What materials on this topic are better to read and where?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

M

Maria Denisova, 2017-07-16
@letehaha

Not very long ago I wrote such a mini-guide for mailing layout.
It is best to type the mailing list with pens in the .html file first.
From the article of the last edition of 2015, the file preparation is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#ffffff" style="padding:0;margin:0;">
      …
  </body>
</html>

Source https://mindbox.fogbugz.com/?W95
Then we forget about the tag <body>, its parameters will be ignored by mail services (at best), we forget about the block layout and the existence of the tag in general <div>, we return to 1996-98 and remember the tabular layout.
Of course.. You can use div, but is it worth it? Considering that somewhere they will be ignored. Although there is a trick - wrapping the image in a div tag so that outlook would not make extra indents for it. But in my opinion it is better to set the picture to display: block;
We mentally (or graphically) divide the entire design layout into cells of one table, or into nested tables, as far as the imagination suffices.
In order to set the background for future mailings, it is better to use a table with one cell, 100% wide, inside which the main mailing table should be laid out.
We also forget about header styles through the tag <style>- only inline styles.
It is important to remember that some mailers remove all styles that are registered after the invalid one in it (Yandex) or even remove the entire style attribute if at least one invalid style is registered in it (gmeil).
For more information about style processing by mail clients, see here: habrahabr.ru/post/146414
Be sure to view the table of style perception by mailers here: https://www.campaignmonitor.com/css/
This set of attributes was remembered purely and trigubo.
Forget about beautiful design fonts and use standard safe ones: www.wearymax.ru/webmasters/fonts It's better not to use the and
tags . All text is set via . Background images and more Forget about background-image if we want Outlook users to enjoy the beauty too. If, nevertheless, background images are needed and there is no way without them, then you need to assign an alternative background color. For the img tag, do not forget to prescribe the following attributes:<p><font><span>
And best of all: style=" line-height:0; display: block "
For pictures, display: block prevents Outlook from padding them.
The align, vspace and hspace attributes should not be used for this tag at all.
Pictures (in my opinion) are better to load at absolute addresses from the server. But it's better to read about options for loading images in this article: habrahabr.ru/company/sibirix/blog/114472
No abbreviations for HEX colors, only six values!
The background color is best set with the background="" or bgcolor="" attributes, there are some bounced mailers that will ignore the background set by the style (but not many, so.. ).
There is such a statement that it is recommended to set vertical indents not by empty cells with a prescribed width, but by inserting zero (transparent) images into them. It is advisable to at least 10px by 10px, and set the width of the desired indent for the pictures themselves. Others say that it's bad, because the bat, for example, fills transparent images with black.
I don't use pictures for indents. Just cells with a given height. While everywhere worked.
Horizontal indents must be set by table cells with a rigid, clear fixed width.
Forgot about float. It is banned and will be ignored by most mail services.
In principle, one of the articles says that we can (already now!) Use padding and its derivatives for indents inside cells. This works for the most popular email clients. But still, given the majority of Runet articles, it is better to use with caution. (But I use it!)
Do not forget to prescribe target="_blank", do not forget that the src attribute should not have the # value.
We always set the color, font, font size line-height, -webkit-text-size-adjust:none(this property prohibits increasing the font size for iPhones and iPads).
We forget about the "Anchors".
At the moment, there are no normal tools for simple testing of mailing lists.
Or maybe there are, but everything is paid and I personally have not figured it out.
Examples can be seen here:www.cossa.ru/digdog/48567
The simplest and most correct solution is to find a service for sending messages for free, create accounts for ourselves on as many mailers as possible, and send mailing lists to all addresses for your loved one. Then we look, we test, we enjoy.
And we ourselves are trying to understand where we messed up, and we are looking through articles because of what such a jamb can emerge.
I chose https://sendpulse.com/ru/
Here is the mailing list archive.sendpulse.com/bd6092af/?_ga=1.158251578.12...
After registration, you must first go to the Address Books section, add all your addresses .
Then click "Create Newsletter" and select "Import Template". You can simply import the html file right away, or insert the template with code (only the mailing table). Or, the coolest of all, you can import the archive directly, directly with pictures and enjoy.
This is a rough summary of all the articles I've read and my personal experience.

M

Mikhail Lyalin, 2017-04-17
@mr_jok

only test yourself on the "most common"