Layout mailing - what do we have?

Good day.

The image is honestly borrowed from Dribbble.com

A little less than two years have passed since the publication of my first topic on the topic. What happened during this time? Mail.ru, Rambler, Yahoo and Yandex together shoveled their mail interfaces, and as a result - parsers of letters that brought pleasant emotions, because many nasty bugs were fixed. Gmail began to support background images. Well, thanks to the development of the mobile platform market, media queries come to the rescue.
')
The meaning of the post - to summarize the method of writing letters for today's realities, while not forgetting about the fossil customers.

And yes, there are almost no pictures in the post. For pictures I ask in the reviews css3 features.

At the moment, I am engaged in the layout of letters, rather as a hobby, so there was no time for testing opera mail, sparrow and other “seemingly popular” clients. It will be about the following:

- All versions of MS Outlook
- Mail.ru
- Rambler mail (in the new interface bugs are not excluded)
- Yandex Mail
- gmail
- Yahoo!
- Thunderbird since version 2.0
- Hotmail
- Windows Live Mail
- Apple Mail from version 3
- AOL Mail
- Lotus Notes 8-8.5.
- theBat! meticulously not tested, but especially no complaints

Wrapper (letter wrapper)

<table width="600" align="center" bgcolor="#eeeeee" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> //  </td> </tr> </table> 

When specifying a fixed width for the table, we use the align attribute for the necessary alignment. No margin: auto; will not pass.

Next, set the color. We specify the color background through the bgcolor attribute and in full hexadecimal format, without cutting it to three characters after the lattice. You can, of course, set the color with the help of the style attribute, but why cut off the very ancient customers.

On the graphic background, I still strongly recommend to score. After all, you can always draw a letter layout so as to execute beautiful elements by inserting an img tag into the corresponding cell of the table.

Collapse treats spaces between cells in Outlook Express, therefore we indicate this value for all tables in the layout.

Indentation

Since hedery styles are still carved by many mailers, we only use inline ones. But here it is not so simple. We forget about padding and margin.

Cellspacing

It works extremely clumsily in Yandex mail and thunderbird. Other clients did not even check. Always set this attribute to a value of zero.

Cellpadding

Here he is - the best friend of the maker. Works like clockwork everywhere!

Spacers

If cellpadding is not enough to implement and the table is more complex, spacers come to the rescue. To do this, take a transparent gif of 10 by 10 pixels. Although if you care about the old versions of theBat !, then the color of the spacer should match the background color of its placement, because theBat! able to fill transparent pixels with black.

There is a legend that spam filters react poorly to single-pixel images, so I superstitiously stopped at the size of 10x10. For inserted spacers, you need to specify an empty alt attribute, otherwise the file name in the small unloaded image will glow, which can ruin the layout.

I will give an example of a working code with struts and without.

 <table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cc 1px solid;"> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> <tr> <td width="100" height="100"></td> <td width="100" height="100"></td> <td width="100" height="100"></td> </tr> </table> 

In this case, we get a gap of 20px between the pictures and 10px between the extreme images and the outer walls of the table.



But what if we need an indent of 10px both between cells and at the borders? Cellspacing in classic HTML does the job, but it was not there. I will not beat the heel in the chest, proving that specifically in this case there will be bugs, but they have been observed in such cases, and therefore I propose the following solution.

 <table cellpadding="10" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;"> <tr> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> </tr> <tr> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> </tr> <tr> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td></td> <td width="100" height="100"></td> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;" alt=""></td> </tr> </table> 

Images

Pictures are inserted into letters in two ways: sending along with the letter in an attachment or a picture to lie somewhere on the remote server, and the layout to them is simply indicated in the layout. The difference is that as far as I know, the attached pictures are automatically downloaded in the client, even if they were disabled in the settings. I can be wrong. If so, then this is a bad background, I think. This is at least unpleasant when it happens not according to yours (on the part of the recipient), and of traffic.
If the pictures are somewhere far away and they are disabled for the user in the settings, you need to follow a few simple tips:

- If a picture carries a meaning (for example, it is a logo or an important image), then it needs to specify the width via the width attribute, height respectively via height, title - at your discretion, alt - in order to give a description of the not loaded image, and interest the user to upload her.

- If the picture does not carry the meaning, but is an ornament (shadow, ribbon), then we simply do not ask anything of the above. The user will not see it until it includes all the images in the letter. Applicable provided that the lack of dimensions does not destroy the layout. Otherwise sizes should be indicated.

There is one more thing. If the picture is located inside the table cell, then it may appear lower indent a few pixels. It is treated in two ways:

- wrap the image in a block
- set the style attribute for the image with the display: block value;

This crutch makes the image a block element. Can be regarded as a minus. But in my practice it did not get sideways. Sometimes this indent doesn't interfere.

Purely theoretically, a block wrapper for a picture can be replaced with a span with zero line-height, but this has not yet been tested.

Formatting

As I already wrote, using paragraph tags is not the best solution for displaying accurately in all clients. Although it can be used if a couple of extra indents is not critical. Some old clients set default spaces for paragraphs in their own way, and cut margin and padding. That is why the following quote two options for the implementation of the paragraph.

Paragraphs with a clear interval in pixels

 <table cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> </td> </tr> <tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td> </td> </tr> <td height="20"><img src="blank.gif" width="20" height="20" alt="" style="display:block;"></td> </tr> <tr> <td> </td> </tr> </table> 

Paragraphs with an interval in line-height

 <span style="line-height:1.5em;">   <br><br>   <br><br>   </span> 

The line-height property does not work in all clients, but there is nothing to worry about. The one-and-a-half spacing looks very good for text and is adequately perceived by “normal” mailers. Well, if any client cuts this property, then nothing. There are reasons for you to choose one way or another. The amount of code or the same display.

Font size and color

I used to use a clean html construct with a font tag and attributes of face, color and size. It works. But he refused for the following reason. Sending letters to the mailing system used the tinyMCE editor for the source code of the letter. This notorious editor interrupted all the font on the span with curved styles.

So I came to the point that you need to use span instead of font, and specify inline css styles through the style attribute.

Everything is fine except for one tiny BUT. Ancient clients, as well as being configured to disable css, have not seen all of our beauty. And to hell with them. If a person does not need a design, there is no need to impose it.

Here, actually all. I will remind you only about specifying the full hexadecimal color format for the job in css. Although you can get by with its direct name, for example black.

Links

Short and simple.

- Set the target attribute with the _blank value for all links except mailto: (not critical for them).
- Zero border for image links
- Specify important! color for links to avoid changing the color to hover and active (this is what Yandex mail is doing, at least)

Mobile platforms

Yes, it is possible, and even necessary, to use media_queries! Typically, this is used to hard set the width of the wrapper of our letter. After all, with rubber mock-ups, everything is bad enough, because Max-width, for example, does not work everywhere. Many mobile mail clients regularly support media_queries, so feel free to experiment.

What to read

If anyone missed, I provide links to previous publications on the topic.

- Layout of mailing lists
- Usability Mailing
- Layout mailing: view from the inside
- Layout mailing: debriefing
- Crutches at layout of mailings
- Mailing - a little about stupid
- Mailing: Down with crutches!
- Mailing lists: written kitchen
- FAQ on layout of mailings
- Beautiful and effective email marketing
- Layout of HTML letters: think like a bug