morontt.info

Вёрстка → Вёрстка для писем

Имеются в виду 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.

Gmail показать часть содержания

g-plus-icon
Теги: html mail gmail
comments powered by Disqus
Учтите, что комментарии добавляются только при включённом JavaScript в браузере. В ином случае информация хоть и не пропадёт бесследно, но будет отправлена в спам и вряд ли хоть кто-нибудь её увидит.
Хуторная Елена
avatar
Все хитрые и со своими особенностями, а нам мучайся с ними.
Ответить
morontt
avatar
Ну это да :-) Только не всегда это мучения. Мне, например, сам процесс решения любых задач удовольствие доставляет. А без задач чувствую как мозг высыхает и скукоживается.
Ответить
Хуторная Елена
avatar
Согласна, когда задач нет, сразу неинтересно становится ))) Правда, я все равно начинаю нервничать, особенно когда не знаю, удастся ли решить проблему )))
Ответить
morontt
avatar
Здесь не тот случай, любая задача может быть разрешена. А если уж никак, то и постановку можно изменить :-)
Ответить
Хуторная Елена
avatar
Да понятно, что всегда можно найти какой-то выход )))
Ответить
morontt
avatar
Безвыходных положений не бывает. Или без выходных, не помню точно :)
Ответить
Хуторная Елена
avatar
Пишется слитно ))) И да, ты совершенно прав, не бывает )))
Ответить
morontt
avatar
Да была у меня где-то картинка с разными камасутренскими положениями по выходным. Хотел в камент добавить, но не нашёл :)
Ответить
Хуторная Елена
avatar
Добавляй потом, как найдешь )))
Ответить
morontt
avatar
Да, может быть попадётся ещё...
Ответить
mail-markuper
avatar
Тест
Ответить
11 комментариев Написать что-нибудь
Поля, помеченные asterisk, обязательны для заполнения.
Адрес электронной почты нигде не отображается, необходим только для обратной связи.
Веб-сайт вводите в формате http://example.org, при желании, конечно.