Вёрстка → Вёрстка для писем
Имеются в виду HTML-письма. Не думал, что могу наткнуться на какие-то специфические особенности данного дела, хотя на каких основаниях так считал - неизвестно.
Итак, постановка задачи: накалякать какое-нибудь простенькое HTML-письмо с минимальным оформлением, дабы выпендриться выделиться из общей массы текстовых писем. Наподобие того, что снизу
Недолго думая, был сделан и шаблончик для него. Ничего волшебного, обычный HTML.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { color: #000; background: #FFF; font-family: "Consolas","Lucida Console",monospace; font-size: 12pt; } a { color: #008CD9; } #header { height: 47px; padding-left: 32px; padding-top: 11px; width: 100%; background-color: #859C40; overflow: hidden; position: relative; font-size: 28px; font-weight: bold; color: #FFF; } #header img { display: block; position: absolute; width: 168px; height: 56px; top: 2px; right: 0; } #content { padding: 10px 0 0; } hr { color: #859C40; } </style> </head> <body> <div id="header"> //Заголовок <img src="<?php echo $this->baseUrl; ?>/logo.png"/> </div> <div id="content"> // содержимое </div> </body> </html>
Проверил как письмо выглядит в ящике, посредством почтового клиента в андроиде. Убедился, что всё нормально, залил изменения на сайт и отправился спать, а утром увидел новое письмо, тоже в андроидном почтовом клиенте, но уже в другом, который для Gmail. Тут зрелище было уже плачевное. То же самое обнаружил и через веб-интерфейс. Причём проверил не только Gmail, но и в майлсру с яндексом. Результат аналогичный. Стили вырезались целиком вместе с тегом <style>
Ну, думаю, не беда. Перенёс стили в атрибут style каждого html-элемента, где они были необходимы. Однако и эта изворотливость не прошла. Были проигнорированы, например, стили, связанные с позиционированием элементов, а так же фоновые картинки в background (муравей изначально в стилях и болтался, не в html-шаблоне, но это не столь важно). Тут уже пришлось гуглить. Материалов на данную тему в интернете достаточно, так что повторяться не буду. Пересобрал письмо целиком на таблицах. Проверял для надёжности во всех доступных веб-интерфейсах почт, даже восстановил аккаунт на urk.net, куда не заходил лет 6, наверное, и на рамблере ящичек завёл.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <table width="100%" cellspacing="0" style="background-color: #859C40; color: #FFF; font-family: 'Consolas','Lucida Console',monospace; font-size: 12pt;"> <tr height="56"> <td style="padding: 0 35px;"> // заголовок </td> <td align="right"> <img src="<?php echo $this->baseUrl; ?>/logo.png"/> </td> </tr> </table> <div style="padding: 10px 0 0;font-family:'Consolas','Lucida Console',monospace;font-size:12pt;color:#000;"> // содержимое </div> </body> </html>
Постой, - скажет вдумчивый и внимательный читатель, ты же сам только что сказал, что письмо на таблицах, а в коде видно блок div. Как это понимать?
div попал в шаблон не случайно, а из-за непонятного глюка gmail. Хитроумный робот посчитал моё письмо целиком некой подписью и скрыл его под хреновинкой с тремя точками, при наведении на которую всплывает надпись Показать часть содержания. На скрине это видно ниже. Не мог я просто так этого оставить. В инете ничего не нашёл, выкрутился по другому, через тот самый div.
Адрес электронной почты нигде не отображается, необходим только для обратной связи.
Веб-сайт вводите в формате http://example.org, при желании, конечно.