Верстка рассылки e-mail одним изображением

Дизайнеры рисуют отличные картинки для e-mail рассылок. Но, что бы правильно разослать и проставить ссылки, их приходится резать на куски, верстать в таблицы, подгонять все элементы. Непрофессионалу сделать это сложнее втройне. Гораздо удобнее отправить картинку целиком, аккуратно разметив ссылки в html. А если рассылка в основном одинакового формата, написать один раз html разметку и менять только ссылки оказывается удивительно удобным.

К сожалению, верстка e-mail — особая наука. Тут нельзя использовать css, нужно аккуратно использовать стили и фоновые изображения. А готовый макет письма требует теста на всех популярных бесплатных почтовых сервисах, т.к. одно и то же письмо может прекрасно отображаться в почте Яндекса и не работать в Gmail.

Поэтому, одним из протестированных шаблонов я решил поделится со своими читателями.

Код шаблона e-mail рассылки:

<table background="_Ссылка на изображение_" height="_высота изображения_"; width="_ширина изображения_"; cellpadding="0" cellspacing="0"> 		 	 
  <tbody> 
    <tr> 			
      <td style="height: 150px;" colspan="3"> 
        <a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:150px;"></a>
      </td> 	
    <tr> 			
      <td style="height: 430px;" colspan="3"> 
	<a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:430px;"></a>
      </td>
    </tr>
    <tr> 			
      <td style="height: 475px;" colspan="3">
	<a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:475px;"></a>
      </td>
    </tr>
    <tr> 			
      <td style="height: 150px;" colspan="3">
	<a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:150px;"></a>
      </td> 		
    </tr>
  </tbody>
</table>
<div style="text-align: center; color: white;">
  _Текст к письму, для отображения в заголовке в списке писем_
</div>

<tbody>

<tr>

</td>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

</tbody>

</table>

_Текст к письму, для отображения в заголовке в списке писем_

</div>

Описание тегов:

Некоторые параметры в HTML коде заменены на заменены на описания, что-бы вы не забыли подставить свои значения.

Основное изображение:
_ссылка на изображение_ — ссылка на основное изображение вашей e-mail рассылки
_высота изображения_ — высота изображения в пикселях, например, «1400»
_ширина изображения_ — ширина изображения в пикселях, например, «700»

Разметка ссылок:
_гиперссылка_ — собственно сама ссылка, в формате «http://www.ablex.ru»
_описание гиперссылки_ — надпись, которая будет отображаться при наведении на часть картинки, с этой ссылкой.
Например:

Размер блока ссылки

<td style="height: 150px;" colspan="3"> 
  <a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:150px;"></a>
</td>

</td>

Здесь так же нужно заменить параметры «height». В описании каждой части таких параметра 2. Один в теге «td», другой в теге ссылки «a». Это одинаковые значения. Их необходимо заменить под размер той части изображения, где нужна отдельная ссылка.
Пожалуй, это самая сложное. Я использую для этого режим «просмотр кода элемента» в броузере Google Chrome. При редактировании в нем параметров они сразу отображаются на экране. Потом, подобранные параметры переносятся в основной макет.

Ваш текст в заголовке, рядом с темой письма

И наконец,
_Текст к письму, для отображения в заголовке в списке писем_ — текст, предназначены для отображения после темы, в списках писем. Например, так он отображается в Gmail:

Текст вставлен в письмо и отображается белым шрифтом (т.к. атрибут display:none в e-mail не работает), поэтому в большинстве случаев при просмотре самого письма не виден. При желании, можно так же задать мелкий, едва заметный шрифт для этого текста.

Работоспособность

Шаблон проверялся, хорошо отображается и работает в yandex почте, gmail, mail.ru и других популярных почтовых сервисах.
На его примере можно создать другие, более сложные шаблоны, с разбивкой на блоки по вертикали и горизонтали.

Таким образом, научившись пользоваться разметкой единого изображения для отправки по e-mail можно сэкономить много собственного времени и времени дизайнера, не нарезая изображение на куски. Кроме этого такой подход защищает от ошибки «неполной прогрузки» письма. Когда, например, почта Яндекса по каким-то причинам помещает в собственный кеш и исправно показывает половину изображений вашей рассылки, а вторую половину не отображает. И других редких, сложных и странных ошибок. Кроме того, если вы используете постоянно один и тот же формат рассылки, с помощью однократно подготовленного шаблона подготовка к рассылке ускоряется в разы.