Сегодня мы создадим простой HTML-шаблон электронной почты с нуля.
Начало работы
Вот HTML-шаблон электронной почты, который мы будем создавать, не стесняйтесь взять его за ручку и использовать самостоятельно.
Вы должны начать свой HTML-шаблон электронной почты с HTML doctype, и не забудьте установить наш язык на английский с <html lang="en">. Также включите пространства имен XML и Microsoft Office (биты xmlns).
<!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" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title></title>
<!--[if (mso 16)]>
<style type="text/css">
a {text-decoration: none;}
</style>
<![endif]-->
<!--[if gte mso 9]><style>sup { font-size: 100% !important; }</style><![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG></o:AllowPNG>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if !mso]><!-- -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<!--<![endif]-->
</head>
В приведенном выше коде происходит довольно много действий, но это самый минимум, который вам понадобится для того, чтобы ваше окончательное письмо отображалось красиво везде.
Примечание 💡- Вы увидите немного кода между <!—[if mso]> и <![endif]—>. Размещение кода внутри этих двух тегов означает, что он будет применяться только в Microsoft Outlook на Windows (mso = ‘Microsoft Outlook’). Параметры xlmns, которые мы помещаем в тег html, обеспечивают правильную интерпретацию этого кода.
Создание области тела и заголовка
Теперь мы добавим следующую структуру в наше письмо, начиная непосредственно под тегом </head>:
<body data-new-gr-c-s-loaded="14.1070.0">
<table role="presentation" class="es-wrapper" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-email-paddings" valign="top">
<table role="presentation" class="es-content esd-header-popover" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table role="presentation" class="es-content-body" width="600" cellspacing="0" cellpadding="0" align="center" style="background-color: #ffffff;" bgcolor="#ffffff">
<tbody>
<tr>
<td class="es-p20t es-p20r es-p20l esd-structure" align="left">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="esd-container-frame" width="560" valign="top" align="center">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" class="esd-block-text">
<h1 style="color: #565a5c; font-family: 'open sans', 'helvetica neue', helvetica, arial, sans-serif; font-size: 18px;">Hi Jane Doe!</h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Все наши таблицы будут иметь значение role="presentation". Это делает их более доступными, так как сообщает программе чтения с экрана, что она должна рассматривать таблицу как визуальную, а не как таблицу данных.
Мы также добавили таблицу с шириной 100%. Она выступает в качестве настоящего тега body для нашего письма, поскольку тег body иногда удаляется почтовыми клиентами. Примените любой цвет фона «body», который вы хотите, к этому тегу таблицы.
Вы заметите, что мы установили cellpadding="0"; и cellspacing="0" на ноль, чтобы избежать неожиданного пробела в нашей таблице.
Проверьте браузер снова, и теперь вы должны увидеть вот это:
Создание области содержимого
Переходя от заголовка, мы можем просто добавить следующее после </tr> выше:
<tr>
<td class="esd-structure es-p20t es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="esd-block-text">
<p style="color: #565a5c;">You updated your email address to <a href="mailto:jdoe@gmail.com" target="_blank">jdoe@gmail.com</a>. Confirm your email address to continue capturing and sharing your moments with the world.</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Теперь вы должны увидеть следующее:
Создание CTA-кнопки
Аналогично, добавьте следующее после </tr> выше:
<tr>
<td class="esd-structure es-p20t es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" class="esd-block-button es-p10b"><span class="es-button-border" style="border-color: #47a2ea; border-radius: 0px; border-bottom-width: 0px; background: #47a2ea;"><a href class="es-button es-button-1658907464943" target="_blank" style="background: #47a2ea; border-color: #47a2ea; font-family: "open sans", "helvetica neue", helvetica, arial, sans-serif; border-radius: 0px; border-width: 10px 20px;">Confirm Email Address</a></span>
<esd-config-block value="{"configClass":"es-button-1658907464943","rule":"[data-ogsb] .es-button.es-button-1658907464943","properties":{"padding":"10px 20px !important"}}" name="btnIndentSettingsControl" style="display: none;"></esd-config-block>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Теперь вы должны увидеть это:
Создание области нижнего колонтитула
Наконец, мы создадим наш нижний колонтитул после предыдущего закрывающего тега </tr>.
<table cellpadding="0" cellspacing="0" class="es-content esd-footer-popover" align="center">
<tbody>
<tr>
<td class="esd-stripe" align="center">
<table class="es-content-body" align="center" cellpadding="0" cellspacing="0" width="600" style="background-color: transparent;">
<tbody>
<tr>
<td class="es-p20t es-p20r es-p20l esd-structure" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-text">
<p style="color: #565a5c;">Company © 2022 Company, Inc. All Rights Reserved.<br>1601 Willow Road, Menlo Park, CA 94025</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="esd-structure es-p20t es-p20r es-p20l" align="left">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="560" class="esd-container-frame" align="center" valign="top">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-text">
<p>Don't like these emails? <a href="https://cdpn.io/javascriptdon/fullpage/qBoXwqy#">Unsubscribe.</a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Теперь вы должны увидеть следующее:
Обзор
Если вы следили за всем этим, то вы должны были завершить учебник и закончить свой отзывчивый HTML-шаблон электронной почты.
Попробуйте этот шаблон для Instagram, который я сделал бесплатно.