Верстка email

Нужно сверстать письмо для рассылки. 

Изображения письма по ссылке https://take.ms/mTMwB

Письмо должно быть адаптивным (важно, чтобы ок отображалось и на десктопе, и на мобильных устройствах). 

2. Технические требования к верстке

2.1. Все файлы в кодировке UTF-8

2.2. Использовать  <meta http-equiv=»content-type» content=»text/html» />

2.3. Структура файлов: index.html + *.jpg/gif/и тд, т.е. картинки в той же папке

2.4. Картинки должны называться только латинскими буквами, без пробелов. Пробелы можно заменять нижним подчеркиванием. Не допустимо использование других символов ( пример: можно atlanticheskiy_okean. Нельзя: atlanticheskiy okean или atlanticheskiy-okean

2.5. Имена картинок не должны совпадать, даже если разные по типу (img.jpg и img.gif,  так делать нельзя)

2.6. Верстка только табличная

2.7. Css прописывается только инлайн стилями ( style=»font-family:verdana; font-size:14px; color:#333333″)

2.7.1. Лучше всего прописывать общий стиль для <td>

<td style="font-family:verdana; font-size:14px; color:#333333" > </td>

2.7.2. Стараться не использовать тег <p> — делает слишком большие разрывы между строками.  Лучше всего для форматирования текста использовать теги  <span>  , на крайний случай <div>  и в них же указывать стиль текста ( если он разнится от прописанного стиля в <td>)

<tr>
<td width="382" style="font-family:verdana; font-size:14px; color:#333333">Текст для <span style="font-family:verdana; font-size:18px; color:red">примера</span></td>
</tr>

2.8 Не использовать отступы padding:0px; margin:0px — все выравнивание делать с помощью таблицы/колонок ( половина почтовиков игнорирует эти теги, по тому ваш текст может быть впритык к рамкам) . То же относится к атрибутам cellpadding,  cellspacing.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="260">
<tr>
<td width="9" style="font-size:1px" height="5">&nbsp;
</td>
<td width="242" style="font-size:1px" height="5">&nbsp;</td>
<td width="9" style="font-size:1px" height="5">&nbsp;</td>
</tr>
<tr>
<td width="9">&nbsp;</td>
<td width="242" style="font-family:verdana; font-size:14px; color:rgb(51,51,51); ">Текст для пример</td>
<td width="9">&nbsp;</td>
</tr>
</table>

2.9. Нельзя использовать внешние css

2.10. Лучше стараться не использовать style=”background:url(…);” (задний фон письма)  так как не все почтовики выводят этот атрибут. Желательно чтоб картинки выводились с помощью тега img (вставка изображения), и в таком случае обязательно использовать для тега img атрибуты width, height, border<img src=»…» width=»…» height=»…» border=»0″ alt=»» />

2.11. Применяйте функцию alt-text для изображений.

2.12. О теге font нужно забыть вовсе.

2.13. Код не должен отбиваться табами, так как некоторые почтовики превращают отступы (/t) на &nbsp

2.14. Старайтесь делать переносы строк.

2.15. Имейте ввиду что при использовании gif  png прозрачные точки , в The Bat могут быть заменены черным

2.16. В ссылках используйте атрибут target= “_blank”, чтобы страница не загружалась в отдельном окне с письмом.

2.17. Если вы все же решили сделать рассылаемое письмо с помощью картинок то необходимо каждую с частей загнать в табличку в соответствии с желаемой картиной.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="font-family:verdana; font-size:1px; text-align:center;">
<tr>
<td width="600" style="font-family:verdana; font-size:14px; text-align:center;">Название рассылки</td>
</tr>
<tr>
<td width="600" style="font-family:verdana; font-size:1px; text-align:center;"><img src="\wablon\1.JPG" width="600" height="120" border="0"></td>
</tr>
<tr>
<td width="600" style="font-family:verdana; font-size:1px; text-align:center;"><img src="\wablon\1.JPG" width="600" height="120" border="0"></td>
</tr>
</table>

2.18. Старайтесь не делать белый текст ,  так как при получении письма этот текст будет невидно ( картинки зачастую подгружаются уже после нажатия ссылки для отображения графики)

2.19.  Крайне желательно для текстового блока использовать общепринятые шрифты. ( пункт 1.2)

3.  Тестирование

Проще всего тестировать письма путем отправки письма на gmail и  на mail.ru. Gmail шлет html письма в неизменном виде.  Как показала практика, таким путем можно обнаружить максимум ошибок.