Как создать динамический HTML шаблон электронного письма

В этой статье приводится пошаговое руководство по созданию динамического шаблона электронного письма с помощью HTML и PHP.

Основные принципы

Самая большая проблема при разработке HTML шаблона письма – это обеспечение его совместимости с разными платформами. Существует множество различных почтовых клиентов, например, Google Mail, Apple Mail, Outlook, AOL, Thunderbird, Yahoo!, Hotmail, Lotus Notes. Некоторые из них уже давно не у дел. Особенно это касается поддержки CSS, поэтому нам нужно использовать HTML таблицы, чтобы обеспечить корректное отображение писем. Фактически, использование HTML таблиц является единственным способом создать макет, который будет одинаково отображаться в разных почтовых клиентах.

Также нужно использовать встроенный CSS для управления элементами внутри шаблона. Например, цветом фона и шрифтами. Объявление стилей CSS должно быть простым, без использования каких-либо CSS файлов.

Чтобы убедиться в этом, рассмотрите пример ниже, в котором я применил атрибут border, чтобы вывести границу каждой таблицы. Обратите внимание, что символы %s являются местом, где будет размещен динамический текст и картинки:

Screen+Shot+2016-04-29+at+14.12.47

Весь макет построен на основе HTML таблиц. Мы воспользуемся PHP библиотеками для анализа маркера %s и его заполнения динамическим текстом перед отправкой письма.

Разработка статического шаблона

Начнем программировать! Прежде чем приступить к созданию красивого шаблона HTML письма, нужно начать HTML файл с XHTML документа:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Demystifying Email Design</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
</html>

Я рекомендую определить все таблицы границей border=»1″, поскольку так проще определять ошибки при создании HTML шаблон письма. Для начала создадим базовый макет:

<body style="margin: 0; padding: 0;">
 <table border="1" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <td>
    My first email template!
   </td>
  </tr>
 </table>
</body>

Установите cellpadding и cellspacing в ноль, чтобы избежать непредусмотренного пространства в таблице. Также установите ширину в 100%, поскольку эта таблица является телом письма (стилизация тега body полностью не поддерживается).

Теперь мы добавим вместо текста «My first email template!» («Мой первый шаблон электронного письма!») другую таблицу:

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
 <tr>
  <td>
   This is the email template body
  </td>
 </tr>
</table>

Для ширины задано значение 600 пикселей. Это безопасно максимальная ширина электронных писем для корректного отображения в большинстве почтовых клиентов. Дополнительно, установите для свойства border-collapse значение collapse, чтобы избежать вывода лишнего пространства между таблицами и границами.

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

<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
 <tr>
  <td>
   Row 1
  </td>
 </tr>
 <tr>
  <td>
   Row 2
  </td>
 </tr>
 <tr>
  <td>
   Row 3
  </td>
 </tr>
   <tr>
  <td>
   Row 4
  </td>
 </tr>
   <tr>
  <td>
   Row 5
  </td>
 </tr>
</table>

В каждой строке мы создадим новую таблицу, для которой применим подход, схожий с приведенным выше. Мы также добавим соответствующие столбцы и правильные отступы, чтобы выровнять все объекты в HTML шаблоне email писем:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Automatic Email</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin:0; padding:10px 0 0 0;" bgcolor="#F8F8F8">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="95%%">
    <tr>
        <td align="center">
            <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"
                   style="border-collapse: separate; border-spacing: 2px 5px; box-shadow: 1px 0 1px 1px #B8B8B8;"
                   bgcolor="#FFFFFF">
                <tr>
                    <td align="center" style="padding: 5px 5px 5px 5px;">
                        <a href="http://url-goes-here" target="_blank">
                            <img src="http://logo.png" alt="Logo" style="width:186px;border:0;"/>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <!—Исходное изображение  баннера здесь под src -->
                        <img src="%s" alt="Image Banner" style="display: block;border:0;" height="100%%" width="600"/>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
                        <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                            <tr>
                                <td style="padding: 10px 0 10px 0; font-family: Avenir, sans-serif; font-size: 16px;">
                                    <!—Исходный текст здесь -->
                                    %s
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#E8E8E8">
                        <table border="1" cellpadding="0" cellspacing="0" width="100%%" style="padding: 20px 10px 10px 10px;">
                            <tr>
                                <td width="260" valign="top" style="padding: 0 0 15px 0;">
                                    <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                                        <tr>
                                            <td align="center">
                                                <a href="tel:phone number goes here" target="_blank">
                                                    <img src="url for call image goes here.png" alt="Call us"
                                                         style="display: block;"/>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center"
                                                style="font-family: Avenir, sans-serif; color:#707070;font-size: 13px;padding: 10px 0 0 0;">
                                                GIVE US A CALL
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="font-size: 0; line-height: 0;" width="20">
                                    &nbsp;
                                </td>
                                <td width="260" valign="top">
                                    <table border="1" cellpadding="0" cellspacing="0" width="100%%" >
                                        <tr>
                                            <td align="center">
                                                <a href="mailto:emailgoeshere@gmail.com">
                                                    <img src="url for email image goes here" alt="Email us"
                                                         style="display: block;"/>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center"
                                                style="font-family: Avenir, sans-serif; color:#707070;font-size: 13px;padding: 10px 0 0 0;">
                                                EMAIL US
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td style="font-size: 0; line-height: 0;" width="20">
                                    &nbsp;
                                </td>
                                <td width="260" valign="top">
                                    <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                                        <tr>
                                            <td align="center">
                                                <a href="url to faq page goes here" target="_blank">
                                                    <img src="url for faq image goes here" alt="FAQ Page"
                                                         style="display: block;"/>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="center"
                                                style="font-family: Avenir, sans-serif; color:#707070;font-size: 13px;padding: 10px 0 0 0;">
                                                BROWSE FAQ PAGE
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#66989c" style="padding: 15px 15px 15px 15px;">
                        <table border="1" cellpadding="0" cellspacing="0" width="100%%">
                            <tr>
                                <td align="center">
                                    <table border="1" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td>
                                                <a href="facebook url goes here" target="_blank">
                                                    <img src="facebook image goes here" alt="Facebook" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="youtube page link goes here" target="_blank">
                                                    <img src="youtube image link goes here" alt="Youtube" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="twitter page goes here" target="_blank">
                                                    <img src="twitter image goes here" alt="Twitter" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="linkedin page goes here" target="_blank">
                                                    <img src="linkedin image goes here" alt="Linkedin" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                            <td style="font-size: 0; line-height: 0;" width="20">&nbsp;</td>
                                            <td>
                                                <a href="home page goes here" target="_blank">
                                                    <img src="homepage image goes here" alt="GreenIQ" width="50" height="50"
                                                         style="display: block;" border="1"/>
                                                </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

Несколько замечаний перед тем, как сделать шаблон HTML письма:

  1. Добавьте атрибут alt там, где нужно показать текст вместо изображений на случай, если почтовый клиент не сможет правильно загрузить их;
  2. Добавьте маркер %s там, где нужно, чтобы данные появлялись динамически в зависимости от варианта письма;
  3. Процентные значения обозначаются дополнительным знаком %. Это сделано так, чтобы PHP библиотека, которая используется для динамической обработки, знала, как правильно анализировать текст.

Мы успешно разработали статический шаблон электронного письма. Теперь давайте сделаем его динамическим!

Разработка динамического шаблона

Сохраните приведенный выше код в виде файла template.html. Теперь создадим новый PHP файл.

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

function send_mail_template($to, $from, $subject, $message)
{
  $headers = "MIME-Version: 1.0" . "rn";
  $headers .= "Content-type:text/html;charset=UTF-8" . "rn";
  $headers .= "From: ContactNameGoesHere <" . $from . ">rn";
  $response = mail($to, $subject, $message, $headers);
}

Если внимательно посмотреть на HTML шаблон письма, то можно увидеть, что я добавил маркеры %s для заполнения в определенных местах. Конкретнее, в элемент изображения баннера и основной текст. Сейчас все, что нам нужно сделать, это импортировать описанный выше HTML шаблон, разобрать его как обычный текст, добавить соответствующий текст вместо %s и воспользоваться упомянутым выше методом send_mail_template:

function build_email_template($email_subject_image, $message)
{
    // Получаем шаблон письма в виде строки 
    $email_template_string = file_get_contents('template.html', true);
    // Заполняем шаблон письма содержанием и соответствующим изображением баннера
    $email_template = sprintf($email_template_string,'URL_to_Banner_Images/banner_' . $email_subject_image. '.png', $message, $mobile_plugin_string);
    return $email_template;
}

Теперь, когда все готово, можно использовать оба метода и отправить наше первое динамическое письмо! Давайте воспользуемся созданным шаблоном письма для рассылки HTML. Допустим, что новый пользователь только что подтвердил свой электронный адрес. Хотелось бы отправить пользователю письмо с текстом Your email has been successfully verifiedВаша электронная почта успешно подтверждена»).

Предположим, что у нас есть подтвержденная почта пользователя user@user.com и почта компании company@company.com. Теперь можно отправить автоматическое письмо:

$from = "company@company.com";
$to = "user@user.com";
$body_text = "Your email has been successfully verified...";
$banner_image_subject = "account_verified";
$final_message = build_email_template($banner_image_subject, $body_text);
send_email($to, $from, "You email has been verified", $final_message);

Все! Вы можете использовать этот подход. Вот окончательный HTML шаблон email письма, отправленного пользователю:

HTML шаблон email письма

Перевод статьи «How to create a dynamic HTML Email Template» был подготовлен дружной командой проекта Сайтостроение от А до Я.