10 recommendations on html-layout of emails
The first recommendation: forget about block layout. The entire layout should be on the tables. At the same time, without extreme necessity - they are also better not to use. You should also get rid of the idea of ​​semantics, abbreviated css-rules, validation, floating blocks - and so on. The most common postal service in the Russian Federation at the moment ( mail.ru ) does not understand styles at all (css). Any style tags / attributes are replaced with xstyle and do not work. Generally all.
So, in fact, with the layout of html for mailing, you need to mentally move into the 90s of the last century and boldly use all the common techniques of that time.
For those who are not familiar with them (as I was) - I remind you:
once again - layouts on the tables (no css positioning, no floats, clears, etc.), and mail.ru automatically adds quite impressive padding for all td , this should also be taken into account(for example, if one the picture is cut into pieces and pushed into different cells - it will be impossible to achieve their seamless connection) ... but, praise the gods, we can use a class from the styles of mail.ru itself that nullifies paddings, it's called pad_null ! thanks, rybyakov !
')
for those cases when the styles will still be understood - there is one more restriction: all styles must be inline (i.e. be in the style attributes):
horizontal indents, in theory, were made in the old days with the help of additional table cells ... however! Normal web services (such as gmail , yandex and rambler ) will not understand the favorite design of many in the past:
the middle cell will stretch to 100% (despite nowrap ), and the left and right cells will disappear (i.e., their width will be zero), so the horizontal indents will have to be set using css (and for the combination “ mail.ru + rubber design ", apparently, there are no options - only fixed sizes of all cells);
to create vertical indents, it is necessary to use, oddly enough - pictures (!), i.e., really, make an “empty” picture (better not 1 × 1, but at least 10 × 10, so that the letter does not suddenly appear in the folder with spam) and by setting the desired height for it to form the corresponding indent (we also put the picture in a div , of course, I think, why):
It should be remembered that the units of measurement ( px ) in the attribute value are not specified - in accordance with the standards (thanks, alemiks );
To change the headset / font size / color, you will have to set ALL these parameters each time using the archaic font tag ( every time - in general for any text inside any block tags and everything ):
if you want to change the color of the link, the font tag is located inside a ;
via links - do not forget to add the target attribute (yes, not valid) with the _blank value (so that your site does not try to open directly in the mail client window) and if you are used to put a grid for empty links ( # ), do not be surprised that gmail and yandex will not count such links as links - in other words, it’s better to set real addresses right away;
in order to make a rectangular block with text filled with some background color, you will have to make a table, a row in it, a cell in it and a bgcolor attribute for a cell, no more options ... besides, when specifying any color in hexadecimal format use abbreviated notation (for example, #FFF instead of #FFFFFF ) - the color specified in this way is automatically transformed to black;
in spite of the fact that in any tutorial on html of those most beautiful times, it was told how to wrap text around a picture (without any css) - using the img tag attributes, namely, align , vspace and hspace - we cannot use this either :) some mail clients (and among them, for example, the bat ) will ignore these attributes, while float: left will work in them crookedly (or not at all) - the conclusion: again, we are saved by the tables;
because in fact, we cannot prescribe the address of the images in the background - we will need to include all the decoration images using the img tag and better reset the line spacing to prevent unwanted (and incomprehensible) indents in the bat :
and know that transparent pictures (even gifs) of the bat are flooded with black;
... or rather its absence - to test the mailing, I, to my regret (and surprise), didn’t find anything better than outlook express - it allows you to easily create html-letters based on a template (Message → Create using → Select form ...), but I will be grateful to the habrasoobshchestvu for advice on this part ... and indeed for all :)
My article is the first. Those. My first article on Habrahabrr, but, of course, not the first research in this area, useful links are these:
And what I wrote does not pretend to be a research role, but everything is supported by personal experience. Any opinions and additions, as I said, are welcome.
PS : if someone is interested in accurate (and up-to-date) data on individual mail clients and web services, I can continue in further publications.
So, in fact, with the layout of html for mailing, you need to mentally move into the 90s of the last century and boldly use all the common techniques of that time.
For those who are not familiar with them (as I was) - I remind you:
1) layout
once again - layouts on the tables (no css positioning, no floats, clears, etc.), and mail.ru automatically adds quite impressive padding for all td , this should also be taken into account
')
2) css
for those cases when the styles will still be understood - there is one more restriction: all styles must be inline (i.e. be in the style attributes):
< div style ="..." > ... </ div >3) padding-left, padding-right
horizontal indents, in theory, were made in the old days with the help of additional table cells ... however! Normal web services (such as gmail , yandex and rambler ) will not understand the favorite design of many in the past:
< table cellpadding ="0" cellspacing ="0" border ="0" width ="100%" >
< tr >
< td width ="10" nowrap ></ td >
< td width ="100%" ></ td >
< td width ="10" nowrap ></ td >
</ tr >
</ table >the middle cell will stretch to 100% (despite nowrap ), and the left and right cells will disappear (i.e., their width will be zero), so the horizontal indents will have to be set using css (and for the combination “ mail.ru + rubber design ", apparently, there are no options - only fixed sizes of all cells);
there was a thought to use the corresponding tag that has left default “ dd ” indent for creating left indenting with pure html means ... however! outlook 2007 , which renders html-pages with the help of the microsoft office word engine (!), starts to be terribly buggy, so the option disappears;
4) padding-top, padding-bottom
to create vertical indents, it is necessary to use, oddly enough - pictures (!), i.e., really, make an “empty” picture (better not 1 × 1, but at least 10 × 10, so that the letter does not suddenly appear in the folder with spam) and by setting the desired height for it to form the corresponding indent (we also put the picture in a div , of course, I think, why):
< div >< img src ="padding.png" alt ="" border ="0" height ="10" ></ div >It should be remembered that the units of measurement ( px ) in the attribute value are not specified - in accordance with the standards (thanks, alemiks );
5) font
To change the headset / font size / color, you will have to set ALL these parameters each time using the archaic font tag ( every time - in general for any text inside any block tags and everything ):
< font face ="tahoma,sans-serif" color ="#000000" size ="2" > </ font >if you want to change the color of the link, the font tag is located inside a ;
6) links
via links - do not forget to add the target attribute (yes, not valid) with the _blank value (so that your site does not try to open directly in the mail client window) and if you are used to put a grid for empty links ( # ), do not be surprised that gmail and yandex will not count such links as links - in other words, it’s better to set real addresses right away;
7) colors
in order to make a rectangular block with text filled with some background color, you will have to make a table, a row in it, a cell in it and a bgcolor attribute for a cell, no more options ... besides, when specifying any color in hexadecimal format use abbreviated notation (for example, #FFF instead of #FFFFFF ) - the color specified in this way is automatically transformed to black;
8) pictures in the text
in spite of the fact that in any tutorial on html of those most beautiful times, it was told how to wrap text around a picture (without any css) - using the img tag attributes, namely, align , vspace and hspace - we cannot use this either :) some mail clients (and among them, for example, the bat ) will ignore these attributes, while float: left will work in them crookedly (or not at all) - the conclusion: again, we are saved by the tables;
9) pictures in the design
because in fact, we cannot prescribe the address of the images in the background - we will need to include all the decoration images using the img tag and better reset the line spacing to prevent unwanted (and incomprehensible) indents in the bat :
< div style ="line-height:0;" >< img src ="border.png" alt ="" ></ div >and know that transparent pictures (even gifs) of the bat are flooded with black;
10) programs and tools
... or rather its absence - to test the mailing, I, to my regret (and surprise), didn’t find anything better than outlook express - it allows you to easily create html-letters based on a template (Message → Create using → Select form ...), but I will be grateful to the habrasoobshchestvu for advice on this part ... and indeed for all :)
My article is the first. Those. My first article on Habrahabrr, but, of course, not the first research in this area, useful links are these:
- CSS support in the Runet mail systems (although the data, for example, by rambler is outdated);
- A Guide to CSS Support in Email: 2007 Edition (in English)
- How to write a letter in HTML format (translated)
And what I wrote does not pretend to be a research role, but everything is supported by personal experience. Any opinions and additions, as I said, are welcome.
PS : if someone is interested in accurate (and up-to-date) data on individual mail clients and web services, I can continue in further publications.
Source: https://habr.com/ru/post/60420/
All Articles