Написание электронных HTML писем

Электронные HTML письма - это хороший способ держать пользователей в курсе последних событий, касающихся вашего бизнеса или продукции. Однако во время создания html писем возникают трудности. В почтовых клиентах нет поддержки сторонних CSS. В результате приходится прибегать к "древним" техникам, таким как использование таблиц и встроенным таблицам стилей. Сегодня я ознакомлю вас с процессом создания простых электронных HTML писем.

Введение

Написание HTML писем - одна из самых трудоемких задач для фрилансера. К счастью, один из моих первых клиентов, для которого я создавал такое электронное письмо, был достаточно терпеливым, и я смог сполна погрузиться в этот длительный и противоречивый процесс. Вам может повезти меньше, так что подготовьтесь с помощью данного урока.

Проблема: Почтовые клиенты

Вы думаете IE - самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?

Решение: Программируйте как в 1997

Да-да. Таблицы. Cellpadding, cellspacing, colspan - все эти сложные вещи, о которых вы уже, наверное, забыли. Таблицы - единственный способ получить согласованный интерфейс письма. Так что пора забыть (временно) о ваших любимых CSS стилях и вспомнить о массивных таблицах.

Шаг 1: Дизайн

Простота

Разрабатывая дизайн электронного HTML письма, не забывайте о простоте. В таблице, используемой нами сегодня, много колонок. Это в основном, для демонстрации. Вам же следует придерживаться варианта из двух колонок, чтобы не усложнять себе работу.

Минимизируйте использование изображений

Не слишком фантазируйте с дизайном писем, так как Outlook не поддерживает фоновые изображения. По существу, вам хотелось бы избежать волокиты с Фотошопом и сделать дизайн практичным. Несмотря на это, использование Фотошопа остаётся в наших планах.

Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него. К примеру, мы добавим легкий градиент в заголовке письма, но ничего страшного, если он не отобразится у получателя.

Чем Уже, тем лУчше

Из-за того что окно просмотра письма в почтовых клиентах часто занимает лишь малую часть общего окна, ваше письмо должно быть шириной не более 600 пикселей. Ведь никому не нравятся горизонтальные полосы прокрутки.

Сохраняйте пропорции

Помните, что нам понадобится использовать такие неудобные атрибуты как cellpadding и cellspacing для установки отступов между элементами. Благоразумно пытаться сохранять пропорции отступов между элементами.

Наш дизайн

Данный дизайн похож на тот, который я когда-то использовал, но упрощенный. Он не привлекателен, но это здесь не важно. Он прост и пропорционален, включает много элементов, так что вы сможете пронаблюдать, как они отличаются в различных клиентах.

Шаг 2: План

По моему опыту, программировать электронные HTML письма очень сложно, но быстро. Важно иметь заранее подготовленный план. И вот этот план (мы к этому вернемся, так что не переживайте, если не следите за ходом работы).

Во-первых, начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.

Затем, заметьте, у нас еще три таблицы в основной: одна вверху для ссылки просмотра в браузере, одна по центру для основного содержимого письма и внизу для ссылки отмены подписки.

Наконец, в главной таблице каждая горизонтальная часть текста будет расположена в ячейке таблицы. Такие ячейки, в свою очередь, будут содержать другие таблицы для каждого раздела текста.

Отступы внутри и снаружи ячеек

Вместо использования CSS свойств margin и padding мы будем использовать атрибуты HTML cellpadding и cellspacing. Cellpadding - почти то же самое, что и padding в CSS - отступы от содержимого до рамки. Cellspacing - это отступы между ячейками таблицы.

Cellspacing таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти cellpadding и cellspacing относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни cellpadding, ни cellspacing, необходимо определить это для каждой таблицы.

Шаг 3: Написание кода

Теперь можно начинать написание кода письма, раздел за разделом. Мы немного стилизируем письмо, несмотря на то, что это не рекомендуется делать. Мы начнем с общего расположения элементов, отступов, фоновых цветов, а затем займемся оформлением.

Создаем скелет

HTML-код письма будет очень прост: нам нужны три главных тега html, head и body. Давайте создадим базовую таблицу и три внутренние таблицы, о которых мы ранее говорили.

Есть несколько способов описания тега DOCTYPE. Однако в данном случае, мы исключим его вообще, так как его описание нам ничего не даст.

<html>  

<head>  

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

    <title>Ruseller Email Newsletter</title>  

</head>  

  

<body>  

  

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>  

  

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">  

    </table><!-- top message -->  

  

    <table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">  

    </table><!-- main -->  

  

    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">  

    </table><!-- bottom message -->  

  

</tr></td></table><!-- wrapper -->  

  

</body>  

  

</html>

Заметьте, что у двух таблиц cellpadding="20". Это отделит их от основного содержимого. Отступы главной таблицы равны 15 пикселей. Это делается для того, чтобы установить упорядоченность по вертикали. В связи с тем, что каждый раздел находится в своей отдельной ячейке, то между ними будет отступ в 15 пикселей.

Заметьте также, что у всех таблиц задан атрибут align со значением "center", а ширина таблиц задана явно (600 пикселей). В электронных HTML письмах лучше не указывать ширину основной таблицы явно. Лучше устанавливать размеры каждой ячейки, но у нас есть отступы, так что можно об этом не беспокоиться.

Таблицы с заголовками

Эти таблицы очень просты: в них всего лишь описаны параграфы в ячейках, выровненных по центру.

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">  

    <tr>  

        <td align="center">  

            <p>Проблемы с отображением письма?<a href="#">Просмотрите его в браузере.</a></p>  

        </td>  

    </tr>  

</table><!-- top message -->

Вторая таблица выглядит абсолютно так же.

Заголовок

Таблица для заголовка достаточно проста. В ней одна колонка и три строки. У нас приятный голубой цвет фона, поэтому нам понадобятся отступы внутри каждой ячейки, чтобы текст не прилипал к краям.

<tr>  

    <td>  

        <table id="header" cellpadding="10" cellspacing="0" align="center">  

            <tr>  

                <td width="570" bgcolor="7aa7e9"><h1>Наши услуги</h1></td>  

            </tr>  

            <tr>  

                <td width="570" bgcolor="8fb3e9"><h2>Новости и События</h2></td>  

            </tr>  

            <tr>  

                <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>  

            </tr>  

        </table><!-- header -->  

    </td>  

</tr><!-- header -->

Не забудьте указать ширину каждой ячейки, равную 570 пикселей (600 - 15 пикселей отступов с обеих сторон). Мы также выравниваем дату по правому краю. Фоновое изображение добавим позже. А пока в качестве фона будет бледно-голубой цвет.

Заметьте, мы используем атрибут bgcolor вместо style="background: ". Это все потому что html атрибуты воспринимаются в электронных письмах лучше, нежели CSS свойства.

Вот что у нас пока получилось. Выглядит не очень привлекательно, но большего нам пока и не надо.

Основное содержимое - 2 колонки

Первая часть нашего контента - это изображение, выровненное по левому краю, с двумя заголовками вверху. Мы не будем использовать CSS свойства float, а создадим таблицу с тремя ячейками:

  • одной для изображения,

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

  • и одну для самих заголовков.

Для изображения с рамкой, мы создадим еще одну таблицу в ячейке с отступом 5 пикселей и серым фоновым цветом. Отступ увеличивает ширину элемента, поэтому необходимо уменьшить ширину ячейки на 10 пикселей.

<tr>  

    <td></td>  

</tr>  

<tr>  

    <td>  

        <table id="content-1" cellpadding="0" cellspacing="0" align="center">  

            <tr>  

                <td width="170" valign="top">  

                    <table cellpadding="5" cellspacing="0">  

                        <tr>  

                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>  

                        </tr>  

                    </table>  

                </td>  

                <td width="15"></td>  

                <td width="375" valign="top" colspan="3">  

                    <h3>Новый дизайн сайта!</h3>  

                    <h4>На 150% Лучше и на 40% Эффективнее!</h4>  

                </td>  

            </tr>  

        </table><!-- content 1 -->  

    </td>  

</tr><!-- content 1 -->

Примечание:

  • Мы добавили пустую строку и ячейку в таблице. Так как у ячеек есть отступы, мы можем добавлять пустые ячейки, чтобы делать отступы в 15 пикселей между элементами. По моему опыту, это работает, но для полной уверенности можете добавить сущность &nbsp;.

  • Атрибуту valign даем значение "top". Это важно, так как располагает каждую ячейку в верхней части строки. Значение по умолчанию - middle, что приводит к непредсказуемым результатам.

  • Используем изображения от dummyimage.com, так как все изображения, используемые в электронных письмах, должны быть выложены в сеть (подробнее бо этом позже), и намного проще использовать генерируемые изображения. Просмотрите сайт, там объясняется, как задать картинке необходимый URL.

Основное содержимое - 1 колонка

Это очень простая часть: таблица из одной колонки с одним абзацем. Не забудьте задать ширину ячейки и выровнять таблицу по центру.

<tr>  

    <td>  

        <table id="content-2" cellpadding="0" cellspacing="0" align="center">  

            <tr>  

                <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>  

            </tr>  

        </table><!-- content-2 -->  

    </td>  

</tr><!-- content-2 -->

Разделители

Для того чтобы добавить отступы по вертикали (помимо 15 пикселей, которые у нас уже есть), необходимо использовать изображения. Вспомним 90-ые! Можно подгрузить изображение gif, но на данный момент быстрее использовать одно из иображений от dummyimage.com. Я оставлю его серым, но в последствии можно сделать его белым.

<tr>  

    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>  

</tr>

В результате получаем что-то вроде этого:

Основное содержимое - 3 колонки

Для этой части используем таблицу из 5 ячеек: три на колонки и две в качестве разделителей между ними.

<tr>  

    <td>  

        <table id="content-3" cellpadding="0" cellspacing="0" align="center">  

            <tr>  

                <td width="180" valign="top">  

                    <table cellpadding="5" cellspacing="0">  

                        <tr>  

                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>  

                        </tr>  

                    </table>  

                </td>  

                <td width="15"></td>  

                <td width="180" valign="top">  

                    <table cellpadding="5" cellspacing="0">  

                        <tr>  

                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>  

                        </tr>  

                    </table>  

                </td>  

                <td width="15"></td>  

                <td width="180" valign="top">  

                    <table cellpadding="5" cellspacing="0">  

                        <tr>  

                            <td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>  

                        </tr>  

                    </table>  

                </td>  

            </tr>  

        </table><!-- content-3 -->  

    </td>  

</tr><!-- content-3 -->

Достаточно просто. Для границ примените тот же метод, что в части из 2 колонок. Не забывайте про valign!

Повторите то же самое и для текста.

<tr>  

    <td>  

        <table id="content-4" cellpadding="0" cellspacing="0" align="center">  

            <tr>  

                <td width="180" valign="top">  

                    <h5>Новые продукты!</h5>  

                    <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>  

                </td>  

                <td width="15"></td>  

                <td width="180" valign="top">  

                    <h5>Письмо каждый месяц</h5>  

                    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia  

                        deserunt mollit anim id est laborum.</p>  

                </td>  

                <td width="15"></td>  

                <td width="180" valign="top">  

                    <h5>Новый Улучшенный Форум</h5>  

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  

                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  

                </td>  

            </tr>  

        </table><!-- content-4 -->  

    </td>  

</tr><!-- content-4 -->

Добавьте еще один разделитель в нижней части, и на этом почти всё:

Осталось совсем немного...

Дальше повторяйте то, что мы уже делали: части из двух и одной колонок и разделители между ними.

<tr>  

    <td>  

        <table id="content-5" cellpadding="0" cellspacing="0" align="center">  

            <tr>  

                <td width="267" valign="top">  

                    <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>  

                        <img src="http://dummyimage.com/267x200/e9e9e9/fff" />  

                    </td></tr></table>  

                </td>  

                <td width="15"></td>  

                <td width="278" valign="top">  

                    <h4>Это шапка</h4>  

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>  

                </td>  

            </tr>  

        </table><!-- content-5 -->  

    </td>  

</tr><!-- content-5 -->  

<tr>  

    <td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>  

</tr>  

<tr>  

    <td>  

        <table id="content-6" cellpadding="0" cellspacing="0" align="center">  

            <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>  

            <p align="center"><a href="#">CALL TO ACTION</a></p>  

        </table>  

    </td>  

</tr>

Работа над основной частью на этом завершается.

Пару слов об изображениях

В отличие от веб-страниц, вы не можете просто поместить все изображения в папку и прописать к ним относительные ссылки. Все ссылки должны быть абсолютными. Когда я разрабатываю электронное письмо, я загружаю изображения на какой-то хостинг или Amazon S3. Когда я уже готов отправить заказ клиенту, я загружаю изображения на его сайт.

Шаг 4: Оформление письма

Мы не можем подключить стили CSS и не можем описать стили в теге head в письме, потому что некоторые почтовые клиенты игнорируют его или только тег style. Мы будем использовать встроенные стили, хотя это и очень громоздко. К счастью, есть некоторые сервисы, которые встраивают стиль в html код. Я пользуюсь услугой сайта Premailer, которая делает это за меня.

Мы напишем CSS стили отдельно, а затем воспользуемся premailer-ом.

Сброс основных значений по умолчанию

Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.

Обратите внимание также на внешние отступы у главной таблицы, являющихся всего лишь стилем по умолчанию тега body.

<style type="text/css">  

    body, #header h1, #header h2, p {margin: 0; padding: 0;}  

</style>

Оформление текста

Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа "font: "), так как результаты будут неоднозначными.

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }  

#header h1 {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; }  

#header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; }  

#header p {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }  

h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; }  

h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; }  

h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; }  

p {font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}  

h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

Смотрите, теперь письмо выглядит намного привлекательнее!

Фоновые изображения

Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:>

<h2>Новости и События</h2></td>

Другие стили

Необходимо задать стиль каждой ссылке, в противном случае, она примет стиль, заданный по умолчанию почтового клиента. А также добавим рамку главной таблице. Еще добавим атрибут display:block каждому изображению, это исключит дефект, возникающий в Outlook и Hotmail.

#main {border: 1px solid #cfcece;}  

img {display: block;}  

a {color: #4A72AF;}

Мы закончили. Приступим к тестированию!

Шаг 5: Тестирование

Тестирование - это самая важная и самая несносная часть создания электронного письма. Во время работы над таким письмом я провожу тесты часто, на каждой стадии разработки, так что я знаю точно, в чем ошибка. Почтовых клиентов много, как и способов тестирования. Давайте начнем.

Почтовые клиенты

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:

  • Outlook 2003/2007

  • Hotmail

  • Yahoo! Mail

  • Gmail

  • Apple Mail

  • Thunderbird

Как тестировать?

Сперва необходимо найти способ отправить HTML письмо. Ваш заказчик скорее всего использует такой сервис как Mailchimp или Campaign Monitor, осуществляющий рассылку.

Вы возможно подумали, что я усложняю работу, ведь некоторые почтовые клиенты позволяют вставку HTML-кода. Тем не менее это может привести к непредсказуемым результатам в случае использования приложений, осуществляющих рассылку. Протестируйте письмо на таком приложении, чтобы быть уверенным, что все работает корректно.

Тестирование с помощью Mailchimp

  • Мне нравится использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:

  • Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol" campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.

  • На странице design выберите Import -> Paste in code, а затем отметьте пункт Automatic CSS Inliner.

  • Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.

  • Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

Тестирование с помощью Litmus

Litmus - это веб-приложение, тестирующее HTML письма во всех почтовых клиентах любой версии. Полная версия сервиса платная, и если ваш заказчик отказывается оплачивать эту услугу, вы можете протестировать бесплатно старую версию Gmail и Outlook 2003, которые все еще используются.

Хорошие результаты

Некоторые тесты показали довольно-таки хорошие результаты:

Apple Mail

Thunderbird

Не очень хорошие результаты

Некоторые результаты не вызывают восхищения, но есть и неплохие:

Gmail (safari)


Outloook 2007


Outlook 2003


Yahoo! Mail


Плохие результаты

Есть и ошибки:

Hotmail (Зелёный???)


Old Gmail (explorer)


Исправление ошибок

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения !important. Иногда я почти уверен в том, что они хотят свести меня с ума.

Чтобы это исправить, нужно добавить !important ко всем стилям заголовков:

h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }  

h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }

h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

В старой версии Gmail возникает подобная проблема в заголовке: Gmail добавляет дополнительный отступ всем заголовкам. Нам всего лишь необходимо дополнительно описать стиль для верхнего отступа заголовков:

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; }  

#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

Вот мы и решили проблему с Hotmail:

Мы получили функциональное, согласованное (правда, простое) электронное HTML письмо. Да, это нудно, но после первого разработанного письма, процесс пойдет намного быстрее. Постарайтесь писать комментарии к коду и хорошо его организовать, чтобы можно было в последствии использовать его части повторно.

Если вам удасться уговорить заказчика подписаться на Litmus, это облегчит работу. Вы также можете проводить тестирования многих почтовых клиентов с помощью платной версии Mailchimp и Campaign monitor.

Устранение неполадок

Конечно же вы столкнетесь с проблемами, о которых в статье речи не шло, но я хочу дать несколько советов по поводу устраниения ошибок.

Считайте правильно: я очень много раз портил весь общий вид из-за того, что неправильно подсчитывал ширину ячеек таблицы. Не забывайте про отступы внутри ячеек: они увеличивают ширину всей ячейки.

Проверяйте стандартные стили: используйте что-то вроде Firebug или Webkit Inspector, чтобы проверять, не перекрывает ли почтовый клиент ваши стили. Если это происходит, добавление обозначения !important решит проблему.

Ищите решения проблем: всегда есть шанс, что кто-то уже решил проблему, с которой вы столкнулись. Если Google не помог, покопайтесь в блогах популярных сервисов рассылки писем. Ведь некоторые люди зарабатывают этим деньги, так что они свою работу знают!

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

Результат

Вот конечный вариант кода:

<html>  

<head>  

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

   <title>Ruseller Email Newsletter</title>  

   <style type="text/css">  

    a {color: #4A72AF;}  

    body, #header h1, #header h2, p {margin: 0; padding: 0;}  

    #main {border: 1px solid #cfcece;}  

    img {display: block;}  

    #top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }  

    #header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }  

    #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }  

    #header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }  

    h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}  

    h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }  

    h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }  

    h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }  

    p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}  

   </style>  

</head>  

  

<body>  

  

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>  

  

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">  

        <tr>  

            <td align="center">  

                <p>Trouble viewing this email? <a href="#">View in Browser</a></p>  

            </td>  

        </tr>  

    </table><!-- top message -->  

  

<table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">  

        <tr>  

            <td>  

                <table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">  

                    <tr>  

                        <td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>  

                    </tr>  

                    <tr>  

                        <td width="570" bgcolor="8fb3e9" style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);"><h2 style="color:#ffffff!important">News and Events</h2></td>  

                    </tr>  

                    <tr>  

                        <td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>  

                    </tr>  

                </table><!-- header -->  

            </td>  

        </tr><!-- header -->  

  

        <tr>  

            <td></td>  

        </tr>  

        <tr>  

            <td>  

                <table id="content-1" cellpadding="0" cellspacing="0" align="center">  

                    <tr>  

                        <td width="170" valign="top">  

                            <table cellpadding="5" cellspacing="0">  

                                <tr><td bgcolor="d0d0d0"><img src="http://tessat.s3.amazonaws.com/coins_small.jpg" width="170" /></td></tr></table>  

                        </td>  

                        <td width="15"></td>  

                        <td width="375" valign="top" colspan="3">  

                            <h3>All New Site Design</h3>  

                            <h4>It's 150% Better and 40% More Efficient!</h4>  

                        </td>  

                    </tr>  

                </table><!-- content 1 -->  

            </td>  

        </tr><!-- content 1 -->  

        <tr>  

            <td>  

                <table id="content-2" cellpadding="0" cellspacing="0" align="center">  

                    <tr>  

                        <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>  

                    </tr>  

                </table><!-- content-2 -->  

            </td>  

        </tr><!-- content-2 -->  

        <tr>  

            <td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>  

        </tr>  

        <tr>  

            <td>  

                <table id="content-3" cellpadding="0" cellspacing="0" align="center">  

                    <tr>  

                        <td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">  

                            <img src="http://tessat.s3.amazonaws.com/crayons.jpg" width="170" />  

                        </td>  

                        <td width="15"></td>  

                        <td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">  

                            <img src="http://tessat.s3.amazonaws.com/handshake.jpg" />  

                        </td>  

                        <td width="15"></td>  

                        <td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">  

                            <img src="http://tessat.s3.amazonaws.com/moo02.jpg" />  

                        </td>  

                    </tr>  

                </table><!-- content-3 -->  

            </td>  

        </tr><!-- content-3 -->  

        <tr>  

            <td>  

                <table id="content-4" cellpadding="0" cellspacing="0" align="center">  

                    <tr>  

                        <td width="180" valign="top">  

                            <h5>Exciting New Products!</h5>  

                            <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>  

                        </td>  

                        <td width="15"></td>  

                        <td width="180" valign="top">  

                            <h5>A Newsletter Every Month</h5>  

                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia  

                                deserunt mollit anim id est laborum.</p>  

                        </td>  

                        <td width="15"></td>  

                        <td width="180" valign="top">  

                            <h5>New and Improved Forum</h5>  

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  

                                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  

                        </td>  

                    </tr>  

                </table><!-- content-4 -->  

            </td>  

        </tr><!-- content-4 -->  

        <tr>  

            <td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>  

        </tr>  

        <tr>  

            <td>  

                <table id="content-5" cellpadding="0" cellspacing="0" align="center">  

                    <tr>  

                        <td width="267" valign="top">  

                            <table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>  

                                <img src="http://tessat.s3.amazonaws.com/card18.jpg" />  

                            </td></tr></table>  

                        </td>  

                        <td width="15"></td>  

                        <td width="278" valign="top">  

                            <h4>This is a heading</h4>  

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>  

                        </td>  

                    </tr>  

                </table><!-- content-5 -->  

            </td>  

        </tr><!-- content-5 -->  

        <tr>  

            <td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>  

        </tr>  

        <tr>  

            <td>  

                <table id="content-6" cellpadding="0" cellspacing="0" align="center">  

                    <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>  

                    <p align="center"><a href="#">CALL TO ACTION</a></p>  

                </table>  

            </td>  

        </tr>  

  

    </table><!-- main -->  

    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">  

        <tr>  

            <td align="center">  

                <p>You are receiving this email because you signed up for updates</p>  

                <p><a href="#">Unsubscribe instantly</a> | <a href="#">Forward to a friend</a> | <a href="#">View in Browser</a></p>  

            </td>  

        </tr>  

    </table><!-- top message -->  

</td></tr></table><!-- wrapper -->  

  

</body>  

</html>

Вот как выглядит наше письмо с реальными изображениями:

Ничего особенного, но это должно дать вам представление о том, как разрабатывать электронные HTML письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com/tutorials/html-css-techniques/getting-started-with-html-emails/
Перевел: Станислав Протасевич
Урок создан: 20 Января 2011
Просмотров: 93198
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

  • Совет: меняем поведение относительных URL с помощью тега base

    HTML тег base - относительно малоизвестный тег, который не так давно стал частью HTML5.

  • Всесторонний обзор элемента track из HTML5

    После прочтения статьи вы будете знать, как можно добавить синхронизированные дорожки к вашим медиафайлам, вроде субтитров. Также вы узнаете, как с их помощью улучшить поисковую оптимизацию (SEO) вашего сайта.

  • HTML5 валидация форм на стороне клиента

    Ранее валидацию на стороне клиента можно было провести только с помощью JavaScript. Но все изменилось (или почти изменилось), так как с помощью HTML5 валидацию можно проводить средствами браузера, без необходимости писать сложные скрипты для валидации на JavaScript.

  • Формы HTML5: CSS

    Во второй статье серии из трех статей о формах HTML5 я собираюсь познакомить вас со стилизацией, а точнее - о селекторах псевдоклассов, которые можно использовать для стилизации элементов формы в различном своем состоянии.

  • Формы HTML5: разметка

    Это первая из трех статей о веб-формах HTML5. Перед тем, как перейти к стилизации и JavaScript-валидации на стороне клиента, мы рассмотрим основную разметку. Я рекомендую вам прочесть эту статью, даже если вы уже знакомы с формами - здесь описано множество новых атрибутов и плюшек!

Комментарии (20):
или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 20 Января 2011 11:16
    Велеслав Варич
    Спасибо, интересно.
  • 20 Января 2011 23:57
    denn2008
    что то сайт Ваш грузиться очень медленно(((
  • 21 Января 2011 01:45
    profesor08
    Ммм, HTML стили не умерли)))
  • 21 Января 2011 15:38
    dezer
    Интересный урок
  • 22 Января 2011 01:27
    DastinSDV
    Это всё очень интересно, но как отправить это письмо из почтового ящика??? Вот я например рисую его в ворде и отправляю чрез аутлук...тоже самое получается...
    • 26 Января 2011 11:31
      CHER84
      Этот урок расчитан на тех, кто не отправляет письмо с почтового ящика, а делает рассылку со своего сайта. Сам сейчас пишу скриптик для рассылки по клиентам, когда нужно одно и то же письмо отправить сотне адресатов хочется автоматизации процесса. Ну а если нужно отправить несколько красивых писем, то тут несомненно рациональнее пользоваться предложенными сервисами. по теме: у меня в почтовике TheBat! картинка <img src="..."> так и не открылась, хотя залита на хост.
  • 26 Января 2011 14:57
    notbot
    Крутняк!
  • 16 Февраля 2011 23:26
    Ahmesh
    Здравствуйте! Я не понял как отправлять письмо? Вставляю html код в письмо и получаю html код)
    <html>
    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Привет</title> <style> body {border: 1px solid #cfcece; background-color: #f6f6f6;} </style>
    </head>
    <body>
    <table border = "1" width = "100%">
    <tr>
    <td width = "20%">
    <p>Как дела?</p>
    <p></p>
    </td>
    <td width = "60%">
    <p></p>
    </td>
    <td width = "20%">
    Ты где?
    </td>
    </tr>
    </table>
    </body>
    </html>
    
    • 21 Февраля 2011 15:19
      DEN67Rus
      При отправке письма в заголовках должно быть что вы отправляете не простой текст а хтмл: Текст:
      Content-Type: text/plain; charset=utf-8
      хтмл письмо:
      Content-Type: text/html; charset=utf-8
      Сейчас есть практика когда отправляется как хтмл письмо так и текстовая версия!
  • 21 Февраля 2011 15:16
    DEN67Rus
    добавлю только одно если есть возможность отдавать файлы по https то чтобы у браузеров не было вопросов и если юзер использует соединение по https то лучше вместо указание протокола сделать вот так:
    <img src="//dummyimage.com/570x30/fff/fff" />
  • 14 Апреля 2011 14:27
    bobiz
    И как отправлять такие письма при помощи функции mail в php? Экранировать каждую кавычку?
    • 9 Мая 2011 18:03
      reset86
      Конечна, какая тут трудность, в любом текстовом редакторе есть функция заменить.
  • 12 Мая 2011 23:34
    mor55
    Еще бы хотелось услышать о немаловажной вещи, про публикацию картинок, так что бы например Outlook, даже с выключенной настройкой отображения рисунков, все равно их отображал. Есть живые письма, работает отлично, только не пойму технологии до сих пор.
  • 6 Ноября 2011 08:49
    krutoy_petro
    Это конечно очень хорошо.. Но вот большинство почтовиков ненавидят HTML :) и в письмах к кавычкам и апострофам прибавляют слэш (там делают mail.ru и yandex.ru, остальных не проверял). Если кто будет пробовать сделать красивые письма для своего сайта, то советую кавычки принципиально не использовать..
  • 3 Декабря 2011 01:29
    Pacifik
    Вы должны протестировать свое письмо хотя бы на всех буржуйских майл серверах, на русских не надо :)
  • 9 Июля 2012 19:59
    Евгений Праведников
    Посиб за советы Невкурсе как видео из You tube вставить,не получаеться,точнее в письме не отображаеться,и
    iframe
    и
    object
    неподдержуються чтоли. Ещё вопрос,надо сделать вставить реакцию на
    :hover
    ,так почтовик его не видит отдельно.Как вставить прям в тег? Спасиб
  • 3 Декабря 2012 22:50
    buharevart
    Очень полезно для тех кто хочет делать качественный e mail маркетинг. Но для создания таких писем уже существуют сервисы с онлайн конструктором писем. В которых каждый пользователь легко сделает такое письмо не зная языка программирования. И сможет сразу же разослать его своим подписчикам. К примеру я все делаю на www.cogasystem.ru
  • 17 Мая 2013 00:41
    zidane22
    Можно ли в письмо вставить видео? с ютуба например?
  • 21 Июня 2013 10:17
    dexcolt
    Статья замечательная!!! При верстке столкнулся с такой траблой, может вы мне поможете? Вставляю, сверстанный по вашему примеру, шаблон в аутлук 2007, отправляю письмо, в итоге все едет, из за того что ааутлук добавляет <p> ко всему содержимому ячейки. Ваш шаблон он, кстати, тоже портит. Как обойти эту не приятность?
  • 25 Февраля 2014 20:35
    Obram
    Друзья, подскажите почему для самой верхней картинки письма ячейка имеет ширину 170px, а для 3-х картинок ниже 180px? При этом картинка вставленная в эти ячейки имеет одинаковый размер 170*120
^ Наверх ^