Верстаем письмо в ХТМЛ
Бывают ситуации, когда надо красиво и предсказуемо сверстать письмо. Например, ответное письмо при регистрации на вебинар или отклик на вакансию или небольшая рассылка, когда не нужны платные сервисы емаил рассылок.
В чем проблема
Интерфейс почтовых клиентов не позволяет тонко настроить типографику письма, задать точный кегль, интерлиньяж, отступы. Приходится мириться с тем, что есть, использовать базовые шрифты и размеры. В некоторых программах типа Thunderbird можно прописывать стили письма, но этого все равно недостаточно.
Как решить
- Подготовить шаблон письма в ХТМЛ
- Создать новое письмо в gmail
- Открыть инспектор кода
- Удалить тег < br > и вставить на его место код письма
Готовим шаблон письма в ХТМЛ
Я взял обычный шаблон из сервиса рассылок. Вы можете сделать свой или взять этот, настроить его так, как вам хочется.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%;min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" width="100%">
<tbody>
<tr>
<td style="padding-top: 0;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #202020;font-family: Helvetica; line-height: 150%;text-align: left;" valign="top">
<h2 style="display: block; margin: 0; padding: 0; font-family: Helvetica;font-size: 22px;font-style: normal;font-weight: bold; line-height: 125%; letter-spacing: normal;text-align: left;">Поздравляю с успешной регистрацией на вебинар «Вебмастер 2024»</h2>
<p style="margin: 10px 0; font-size: 16px; line-height: 150%;">Вебинар пройдет в воскресенье <a href="https://calendar.google.com/calendar/event%E2%80%A6">28 января в 11:00 по Мск</a> в зуме.<br>
Я планирую уложиться в 1 час, но на всякий случай запланируйте 1,5 часа на вебинар.</p>
<p style="margin: 10px 0; font-size: 16px; line-height: 150%;">За 30 минут до начала мы отправим ссылку на вход.</p>
</td>
</tr>
</tbody>
</table>
Создаем новое письмо в gmail
Открываем инспектор кода
Кликаем правой кнопкой мыши и выбираем «Посмотреть код». В Mozilla Firefox этот пункт называется «Исследовать».
Редактируем код и вставляем туда наш шаблон
Когда откроется инспектор кода, в нем будет выделен участок отвечающий за содержимое письма.
Кликаем правой клавишей по выделенному блоку и выбираем «Edit as HTML».
Удаляем тег < br > и вставляем вместо него ХТМЛ-код письма.
После этого останется только добавить получателей и тему письма.