10 html layout guidelines for emails

    Recommendation one: forget about block layout. All layout should be on the tables. At the same time, unless absolutely necessary, it is also better not to use them. You should also get out of your head ideas about semantics, abbreviated css-rules, validation, floating blocks - and so on. The most common mail service in the Russian Federation at the moment ( mail.ru ) does not understand styles (css) at all. Any style tags / attributes are replaced with xstyle and do not work. That's all.

    So, in fact, with the layout of html for mailing, you need to mentally move to the 90s of the last century and boldly use all the common tricks of that time.

    For those who are not familiar with them (as I was) - I recall:

    1) layout


    once again - a layout on the tables (no positioning by css, no floats, clears, etc.), moreover, mail.ru automatically adds pretty impressive paddings for all td , this should also be taken into account (for example, if one the picture is cut into pieces and shredded into different cells - it will be impossible to achieve their seamless connection) ... but, praise the gods, we can use the class from the styles of mail.ru itself , zeroing out the padding, it’s called pad_null ! Thanks, rybyakov !;

    2) css


    for those cases when the styles will nevertheless be understood - there is one more limitation: all styles must be inline (i.e., be in the style attributes ):
    ...


    3) padding-left, padding-right


    horizontal indents, in theory, were done 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 design beloved by many in the past:

      
        
        
        
      


    the middle cell will stretch to 100% (despite nowrap ), and the left and right cells will disappear (that is, their width will be zero), so the horizontal indentation will have to be set using css (and for the combination “ mail.ru  + rubber design ", apparently, there are no options - only the fixed sizes of all cells);

    there was an idea to use the corresponding tag with the left default indent to create the left indent using pure html - dd ... however! outlook 2007 , which renders html-pages using the engine from microsoft office word (!), starts to get scary, so the option disappears;


    4) padding-top, padding-bottom


    to create vertical indents you need to use, oddly enough - pictures (!), that is, really, make an “empty” picture (it’s better not to 1 × 1, but at least 10 × 10 so that the letter doesn’t 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 units of measurement ( px ) are not indicated in the attribute value - in accordance with the standards (thanks, alemiks );

    5) font


    to change the headset / font size / color you have to set ALL these parameters each time using the archaic font tag ( every time - generally for any text inside any block tags and that's it ):
    текст ссылки

    if you need to change the color of the link, the font tag is located inside a ;

    6) links


    still by links - you should not forget to add the target attribute (yes, invalid) with the value _blank (so that your site does not try to open directly in the mail client's window) and if you are used to putting “for the time being” in the empty links ( # ), do not be surprised that gmail and yandex will not count such links as links - in other words, it’s better to immediately set real addresses;

    7) colors


    in order to make a rectangular block with text filled with some background color, you have to make a table, in it a row, in it a cell and for the cell - the bgcolor attribute , there are no more options ... in addition, when setting any color in hexadecimal format, you can’t use an abbreviated record (for example, #FFF instead of #FFFFFF ) - the color set in this way is automatically transformed into black;

    8) pictures in the text


    despite the fact that in any html tutorial of those same beautiful times it was told how to wrap text around an image (without any css) - using the attributes of the img tag , namely align , vspace and hspace - we also cannot use this :) some mail clients (and among them, for example, the bat ) will ignore these attributes, while float: left will also work crookedly in them (or not work at all) - conclusion: again we save ourselves with tables;

    9) pictures in the design


    because in the background the address of pictures we prescribe, in fact, can not - all presentation drawings have to include using the tag img better reset spacing to prevent unwanted (and obscure) indentation in the same the bat :

    and know that transparent bat images (even gifs) the bat fills with black;

    10) programs and tools


    ... more precisely, its absence - for testing the newsletter, I, unfortunately (and surprisingly), did not find anything better than outlook express - it makes it easy to create html letters based on the template (Message → Create using → Select form ...), but I will be grateful to the habrasociety for advice on this part ... and indeed on all :)




    My article is the first. Those. my first article on Habrahabr, but, of course, not the first research in this area, useful links - here:



    And what I wrote does not pretend to be a research, but everything is backed up by personal experience. Any opinions and additions, as I said, are welcome.

    PS : if someone is interested in accurate (and modern) data on individual email clients and web services - I can continue in further publications.

    Also popular now: