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

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

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

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

Основы html и css

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

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

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

Давайте рассмотрим основы.

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

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

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

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

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

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

Аутентификация

Когда пришло время начать отправлять HTML-письма — будь то маркетинг или транзакция — первым шагом является настройка вашей отправляющей среды. Несмотря на то, что большинство людей предпочтут стороннего поставщика услуг электронной почты (ESP), такого как Campaign Monitor, MailChimp или Salesforce Marketing Cloud (или Postmark и Sendgrid для транзакционных материалов), по-прежнему необходимо понять базовую инфраструктуру и процесс аутентификации при отправке электронные письма.

Электронная почта работает через протокол простого обмена сообщениями (SMTP). Он полагается на ряд проверок, сделанных интернет-провайдером, чтобы убедиться, что вы являетесь тем, кого вы говорите, когда отправляете электронное письмо. Это такие вещи, как IP-адрес и обратные DNS-запросы.

Структура политики отправителя (SPF) — это запись, хранящаяся в вашем домене, которая обеспечивает дополнительную проверку подлинности. В основном вы добавляете записи SPF и TXT в свои настройки DNS в домене, из которого вы отправляете электронные письма, которые включают IP-адрес вашего почтового сервера.

Sender Policy Framework Project содержит дополнительную информацию о записях SPF и синтаксисе на их веб-сайте.

DomainKeys Identified Mail (DKIM) — еще один механизм аутентификации вашего сообщения. С DKIM вы, по сути, настраиваете ключи, на которые возлагается ответственность за электронную почту. DKIM подписывает электронное письмо с закрытым ключом, которое затем декодируется с помощью открытого ключа. Открытый ключ — это еще одна запись DNS для вашего домена отправки, которая похожа на это (взята с сайта DKIM):

Наконец, существует аутентификация, отчетность и соответствие протокола на основе доменов (DMARC). Хотя DMARC не является технически механизмом аутентификации, он сообщает получателю, что сообщение защищено другими механизмами, такими как SPF и DKIM.

Если какой-либо из этих механизмов выходит из строя, DMARC сообщает получателю, что делать с сообщением: Pass, quarantine или fail. Затем он предоставляет механизм для уведомления отправителя о том, что произошло с сообщением. Это мощный способ отслеживать вашу репутацию отправки и видеть, кто (если кто-либо) злоупотребляет вашей почтовой инфраструктурой.

Валидация

Давайте прогоним код через W3C валидатор, чтобы убедиться, что ничего не сломалось. Если Вы точно всему следовали, то валидатор скажет, что всё в порядке.

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

Верстка дизайна шаблона email рассылки

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

Возможностями встроенного CSS вы можете изменять
параметры шрифта
– использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.

Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:

1. <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"><p align="center">
2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах
3. </p></td>

Посмотрите, как изменился текст:

1. <table width="100%" border="0" cellspacing="0" cellpadding="0">
2. <tbody>><tr>
3. <td style="padding: 20px 0px 30px;">

А теперь – проба пера: отправляем письмо на тестовый email адрес.

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

Вот так созданный шаблон выглядит в Gmail

Верстка тела email писем. создание таблицы

Общая структура письма создается с использованием тега

.

Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.

Ширина главной таблицы должна быть 100% (table width=”100%”). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.

Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.

Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=”1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».1. <body style="margin: 0; padding: 0;">
2. <table border="1" cellpadding="0" cellspacing="0" width="100%">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>


Пока что наше письмо выглядит следующим образом:

(наличие рамки – результат работы тега border=”1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=”600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!»

1. <table style="border-collapse: collapse;" border="1" width="600" cellspacing="0" cellpadding="0" align="center">
2. <tbody>
3. <tr>
4. <td>Привет!</td>
5. </tr>
6. </tbody>
7. </table>


Теперь письмо выглядит вот так:

1. <tr>
2. <td>
3. Привет!
4. </td>
5. </tr>


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

Должно получиться следующее:

1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
2. <tr>
3. <td>
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td>
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td>
14.Строка 3
15. </td>
16. </tr>
17. </table>


Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
2. <tr>
3. <td bgcolor="#ffa500">
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td bgcolor="#ffffff">
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td bgcolor="#1e90ff">
14. Строка 3
15. </td>
16. </tr>
17. </table>


Заголовок

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

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

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

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

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

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в 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 добавляет дополнительный отступ всем заголовкам. Нам всего лишь необходимо дополнительно описать стиль для верхнего отступа заголовков.

Не отклоняйте html email

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

Более того, так популярны, как электронная почта среди потребителей — многие компании оставляют электронную почту в качестве запоздалой мысли. Стандарты электронной почты являются абсурдно низкими, поэтому, если вы разрабатываете электронные письма, которые даже немного лучше, чем конкуренты, у вас есть возможность добиться больших успехов, оказывая влияние не только на ваш бизнес, но и на жизнь ваших подписчиков.

Описываем структуры для авторизации

Открываем, тег form, присваиваем для него класс tab-form, что бы к ней было проще обращаться при оформлении.

В нутрии формы вкладываем input для ввода Email, прописываем название данного поля при помощи placeholder.

Дублированием текущий input, и модифицируем его под ввод пароля.

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

Ниже создаем блок с социальными иконками.

Блок с иконками оформим в виде списков, в нутрии каждого списка помещаем ссылку, а в ней уже размещаем иконку.

Иконки отбираю через статью Работа со шрифтовыми иконками. Вы так же можете перейти по ссылке, отобрать те иконки, которые вам нужны, и прописать соответствующий класс в теге (i) внутри ссылки.

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

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

Далее, ниже блока с иконками, размещаем ссылку на восстановление пароля.

Описываем структуры для регистрации

Так как второй блок особо не чем не отличается, я скопирую предыдущую форму и немного ее модифицирую.

Первое поле так и остается для ввода Email, хотя можно дописать в нем placeholder  «Введите E-mail адрес», что бы чем-то оно отличалось.

Далее пойдет аналогичное поле для ввода имени только с другим атрибутом type и placeholder. Ниже ссылка, меняем в ней название на «Регистрация».

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

В нем располагаем input с type checkbox, а ниже его label с ссылкой на соглашение.

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

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

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

Оформляем вкладки

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

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

В принципе тут все довольно просто, это все можно показать при помощи визуального оформления.

Для этого сделаем фон формы прозрачным на 20%, и этот фон будет как бы внешней его частью, а самой форме зададим белый цвет, для этого классу dws-form добавляем соответствующий background, а белого цвета.

.dws-form {
 background: rgba(255, 255, 255, 0.2);
…

.tab-form {
 background: #fff;
}

Затем, нам нужно показать, как будет выгладить активная и неактивная вкладка.

Наипростейший вариант, это для вкладок label задать отдельный класс tab, который по другому можно оформить.

Добавляем его и в CSS сразу опишем его стили.

Предварительная подготовка файлов

Делаем общею разметку, а далее оформляем блоки при помощи CSS.

Сделаем index файл и прописываем в нем DOCTYPE. 

Вставляем заголовок «Форма для авторизации», мета тег viewport оставим можно не прописывать но лишним не будет. Подключаем jquery, при помощи его покажу как реализовать ряд эффектов как на нем, так и сравним его с CSS. Ниже подключаем иконки через bootstrapcdn, и далее файл стилей, который позже создадим.

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

Современные средства электронной почты

Если вы не увлекаетесь рукописью HTML и CSS для электронной почты, есть несколько инструментов, которые помогут сделать создание проще. Скорее всего, вам удобно работать в среде фреймворков, которые абстрагируют часть сложности домена и полагаются на соглашение, чтобы упростить разработку. Если это так, фреймворки, такие как MJML и Foundation for Emails, могут быть идеальными.

Оба обеспечивают простую разметку, встроенные компоненты и инструменты сборки, которые позволяют быстро разрабатывать код электронной почты, который хорошо работает на всех клиентах. Быстрый поиск GitHub будет вытягивать тонну шаблонов, фреймворков и инструментов для создания электронных писем HTML.

Интерактивное письмо от Litmus.

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

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

Если вы хотите свернуть свою собственную интерактивность с нуля, ознакомьтесь с тем, какой маркером по электронной почте Марк Роббинс называет метод «перфокарта». Используя простые HTML-радио и кнопки флажков, в сочетании с CSS, который смотрит на состояние этих кнопок и применяет условное форматирование, вы можете создать поистине удивительный опыт для ваших подписчиков.

Создание html письма: базовые знания

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

• Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте 🙂
• Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

А теперь давайте разбираться детальнее в такой сложной, но интересной теме как верстка email писем.

Один из самых распространенных вопросов среди новичков: Где писать код шаблона HTML письма? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код HTML письма и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью.

бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.

Создание форм регистрации и авторизации на php

<?php
    session_start();
    include('config.php');
    if (isset($_POST['register'])) {
        $username = $_POST['username'];
        $email = $_POST['email'];
        $password = $_POST['password'];
        $password_hash = password_hash($password, PASSWORD_BCRYPT);
        $query = $connection->prepare("SELECT * FROM users WHERE email=:email");
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $query->execute();
        if ($query->rowCount() > 0) {
            echo '<p class="error">Этот адрес уже зарегистрирован!</p>';
        }
        if ($query->rowCount() == 0) {
            $query = $connection->prepare("INSERT INTO users(username,password,email) VALUES (:username,:password_hash,:email)");
            $query->bindParam("username", $username, PDO::PARAM_STR);
            $query->bindParam("password_hash", $password_hash, PDO::PARAM_STR);
            $query->bindParam("email", $email, PDO::PARAM_STR);
            $result = $query->execute();
            if ($result) {
                echo '<p class="success">Регистрация прошла успешно!</p>';
            } else {
                echo '<p class="error">Неверные данные!</p>';
            }
        }
    }
?>

Стилизация текста

Наша первая строка – это заголовок. Будем использовать тег <b> , чтобы сделать текст жирным, потому, что, как мы знаем, если есть возможность стилизовать в HTML, используем это, вместо CSS свойств.

Также добавим эти стили ко всем другим ячейкам текста:

style="color: #153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;"

Далее нам нужно стилизовать текст футера и, кроме этого, приведём в порядок ссылку откказа от рассылки. Стилизуем ссылку используя одновременно CSS и HTML тег <font>. Дублирование тегов – это  лучший способ убедиться, что Ваши ссылки не будут отображаются синим по умолчанию.

Строка 1. верстка хедера html писем

В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно
настроить отступ
ы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает
тег – <padding>
.

Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.

Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа
padding: 10px 10px 5px 5px;
.

Если же возникают проблемы, их решит длинный вариант записи, типа

Строка 2. работа с контентом в html шаблоне письма

Для начала следует
указать отступы внутри средней ячейки
(второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉

Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

• одна – для заголовка,
• вторая – для краткого описания статьи,
• третья – для строки с двумя столбцами.

Поехали!

Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.

Код Строки 2 с вложенной таблицей:

1. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
2. <table border="1" cellpadding="0" cellspacing="0" width="100%">
3. <tr>
4. <td>
5. Строка 1
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Строка 2
11. </td>
12. </tr>
13. <tr>
14. <td>
15. Строка 3
16. </td>
17. </tr>
18. </table>
19. </td>

Визуально:

1. <table width="100%" border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах
6. </td>
7. </tr>
8. <tr>
9. <td style="padding: 20px 0px 30px 0px;">
10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.
11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.
12. </td>
13. </tr>
14. <tr>
15. <td>
16. Строка 3
17. </td>
18. </tr>
19. </tbody>
20. </table>

Визуально:

*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.

Итого, два столбца по 260 пикселей средний пустой столбец на 20px.

Укажем также для обоих столбцов значение valign=”top”, что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.

1. <table border="1" cellpadding="0" cellspacing="0" width="100%">
2. <tr>
3. <td width="260" valign="top">
4. Колонка 1
5. </td>
6. <td style="font-size: 0; line-height: 0;" width="20">
7. &nbsp;
8. </td>
9. <td width="260" valign="top">
10. Колонка 3
11. </td>
12. </tr>
13. </table>

Визуально:

Строка 3. создание кода футера hmtl письма

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.

Чтобы не забыть, сначала добавим отступы, а после – таблицы.

Отступы:

Визуально:

1. <table border="1" cellpadding="0" cellspacing="0" width="100%">
2. <tr>
3. <td>
4. Колонка 1
5. </td>
6. <td>
7. Колонка 2
8. </td>
9. </tr>
10.</table>

Типы mime

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

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

Но есть еще одна пара ключ / значение, которая строит фактическое сообщение. Это ключ Content-Type, который принимает значение типа multipart / alternative, чтобы уведомить получателя о наличии в сообщении нескольких частей и отобразить соответствующую часть для подписчика в зависимости от их предпочтений. Когда в сообщение включено несколько частей, электронное письмо называется электронным почтовым расширением MIME.

Существует два основных типа содержимого, используемые во всех HTML-письмах, типы text / plain и text / html. Тип HTML — это то, где фактический HTML вводится в сообщение, в то время как обычный тип — это то, где живет текстовая версия электронной почты.

Существуют дополнительные типы контента, которые могут быть использованы, но они имеют очень ограниченную поддержку от ESP. Тип text / watch-html можно использовать для отправки ограниченной версии HTML вашего сообщения пользователям Apple Watch, в результате чего появляются текстовые сообщения.

Совсем недавно text-x-amphtml был внедрен в проект AMP компании Google и позволит использовать более богатые и интерактивные электронные письма при использовании разметки AMP.

Следует отметить, что с момента написания проекта все еще находится на ранних этапах, и никакие ESP не поддерживают добавление типа AMP MIME к исходящей электронной почте, что делает его практически бесполезным вне среды предварительного просмотра и тестирования Google.

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

Типы писем

Существует два основных типа электронной почты: маркетинг (или трансляция) и транзакционный.

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

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

Иногда между ними существует немного серая область, но важно попытаться загрузить любую электронную почту в одну из этих двух категорий, особенно когда вы начинаете рассматривать права доступа к подписчикам. С 25 декабря, когда GDPR будет действовать, любой, кто отправляет электронную почту, должен собирать явное разрешение от подписчиков и вести запись об этом разрешении или сталкиваться со значительными штрафами.

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

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

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

Формат шаблона html-писем

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

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

Чаще всего одноколоночный макет включает в себя:

1. Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
2. Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
3. Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

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

Шаг 2: план

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

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

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

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