Сегодня я задалась целью сделать html шаблон для электронного письма.
Основными критериями были:
– простота;
– простое редактирование;
– адаптивный дизайн для разных почтовых клиентов и сервисов.
В интернете много шаблонов, которые мне совсем не подошли. А воспользовалась я статьей http://webdesign.tutsplus.com/ru/articles/creating-a-simple-responsive-html-email–webdesign-12978
Единственный минус этой статьи – это отсутствие готового полного шаблона, который просто можно скачать и отредактировать. Поэтому я решила его создать.
Особенностью этого кода является то, что все стили максимально прописаны в теле самого письма, а не внутри тегов <style>. Благодаря этому минимизируется искажение стилей в разных почтовых клиентах.
<!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>HTML LETTER</title>
<style type="text/css">
@media only screen and (min-device-width: 601px) {.content {width: 600px ;}}
body[yahoo] .class {}
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;}
.button a:hover {text-decoration: underline;}
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {}
body[yahoo] .buttonwrapper {background-color: transparent;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px; display: block;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1" style="margin: 0; padding: 0; min-width: 100%; background-color: #f6f8f1;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr> <td><![endif]-->
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 600px;">
<!--Header-->
<tr>
<td bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
<!--LOGO-->
<table width="95" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<!--ТУТ ССЫЛКА НА ЛОГО-->
<img src="http:/site.com/image/logo.png" width="100" border="0" alt="" / >
</td>
</tr>
</table><!--END-LOGO-->
<!--Заглавие-->
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="0" cellpadding="0" style="width: 100%; max-width: 400px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="padding: 0 0 0 3px; font-size: 20px; color: #ffffff; font-family: sans-serif; letter-spacing: 5px; font-weight: bold;">
SubHEADER
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0; font-size: 33px; line-height: 38px; font-weight: bold; color: #153643; font-family: sans-serif;">
HEADER
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--><!--END-ЗАГЛАВИЕ-->
</td>
</tr>
<!--ТЕЛО ПИСЬМА-->
<tr>
<td class="content" bgcolor="#ffffff" style="width: 100%; max-width: 600px; padding: 30px 30px 30px 30px; border-bottom: 1px solid #f2eeed;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!--ВСТУПЛЕНИЕ-->
<tr>
<td style="color: #153643; font-family: sans-serif; padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;">
Dear Mr. !
</td>
</tr><!--/ВСТУПЛЕНИЕ-->
<!--НАЧАЛО-->
<tr>
<td style="color: #153643; font-family: sans-serif; font-size: 16px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, est dico eleifend ei, mea ne velit referrentur necessitatibus. Novum sonet eum no, mel eu fastidii abhorreant. Qui ex periculis appellantur, ne amet invenire voluptatum has, et repudiare definitionem mel. At alterum postulant dissentias eam. Est ubique legere tamquam ei, rebum semper qualisque vel ad.</p>
<!--КНОПКА Button-->
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;">
<!--ТЕКСТ И ССЫЛКА КНОПКИ-->
<a style="color: #ffffff; text-decoration: none;" href="http:/site.com">Register now!</a>
</td>
</tr>
</table><!--/Button-->
</td>
</tr><!--/НАЧАЛО-->
<!--КАРТИНКА-->
<tr>
<td style="padding: 30px 30px 30px 30px;">
<img src="http:/site.com/image/image.png" width="100%" border="0" style="height: auto;" alt="" />
</td>
</tr><!--/КАРТИНКА-->
<!--ОКОНЧАНИЕ ПИСЬМА-->
<tr>
<td style="color: #153643; font-family: sans-serif; font-size: 16px; line-height: 22px;">
<p>Best regards, <br />
<strong>Boss</strong></p>
</td>
</tr><!--/ОКОНЧАНИЕ ПИСЬМА-->
</table>
</td>
</tr>
<!--Footer-->
<tr>
<td class="footer" bgcolor="#44525f" style="padding: 20px 30px 15px 30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family: sans-serif; font-size: 14px; color: #ffffff;">
®All rights reserved<br/>
<a href="www.site.com.ua" style="color: #ffffff; text-decoration: underline;">www.site.com.ua</a>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0 0 0;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="LINK_TO_FB">
<img src="https://stepfor.top/images/fb1.png" width="37" height="37" alt="Facebook" border="0" />
</a>
</td>
<td width="37" style="text-align: center; padding: 0 10px 0 10px;">
<a href="LINK_TO_VK">
<img src="https://stepfor.top/images/vk1.png" width="37" height="37" alt="VK" border="0" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html> Достаточно скопировать этот в NotePad++ и cохранить с расширением *.html. Далее необходимо внести изменения и экспортировать шаблон в ваш почтовый клиент.
Письмо состоит их трех блоков:
Везде www.site.com.ua нужно поменять на собственный сайт.
<!--Header-->
<tr>
<td bgcolor="#c7d8a7" style="padding: 40px 30px 20px 30px;">
<!--LOGO-->
<table width="95" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<!--ТУТ ССЫЛКА НА ЛОГО-->
<img src="http:/site.com/image/logo.png" width="100" border="0" alt="" / >
</td>
</tr>
</table><!--END-LOGO-->
<!--Заглавие-->
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="0" cellpadding="0" style="width: 100%; max-width: 400px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="padding: 0 0 0 3px; font-size: 20px; color: #ffffff; font-family: sans-serif; letter-spacing: 5px; font-weight: bold;">
SubHEADER
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0; font-size: 33px; line-height: 38px; font-weight: bold; color: #153643; font-family: sans-serif;">
HEADER
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--><!--END-ЗАГЛАВИЕ-->
</td>
</tr> В нем есть:
<!--ВСТУПЛЕНИЕ-->
<tr>
<td style="color: #153643; font-family: sans-serif; padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;">
Dear Mr. !
</td>
</tr><!--/ВСТУПЛЕНИЕ--> Поменяйте в нем строчку Dear Mr. !
<!--КНОПКА Button-->
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45" style="text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;">
<!--ТЕКСТ И ССЫЛКА КНОПКИ-->
<a style="color: #ffffff; text-decoration: none;" href="http:/site.com">Register now!</a>
</td>
</tr>
</table><!--/Button--> В этом блоке нужно поменять только строчку:
<!--ТЕКСТ И ССЫЛКА КНОПКИ--> <a style="color: #ffffff; text-decoration: none;" href="http:/site.com">Register now!</a>
где вместо http:/site.com нужно вставить свою ссылку, а вместо Register now! свой текст кнопки.
<img src="http:/site.com/image/image.png" width="100%" border="0" style="height: auto;" alt="" />
где вместо http:/site.com/image/image.png вставить путь к своей картинке.
Все блоки можно менять местами удалять или добавлять. Например, если нужно две картинки или две кнопки.
®All rights reserved<br/> <a href="www.site.com.ua" style="color: #ffffff; text-decoration: underline;">www.site.com.ua</a>
и вставить данные своего сайта.
Так как стилей в шаблоне много, и все они прописаны не отдельно, а для конкретного тега, есть смысл менять только цветовую гамму письма. В HTML редакторы с помощью команды заменить – поменяйте нужные цвета:
#f6f8f1 – внешний фон;
#c7d8a7 – фон Header – Заголовок;
#153643 – цвет текста Заглавия, Вступления и самого письма.
#e05443 – цвет Кнопки;
#44525f – фон Footer – Подвала
Вот собственно и все)) Удачных вам рассылок!
Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More
Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More
Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More
Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More
Установка PostgreSQL на сервер Read More
Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More
View Comments
Спасибо супер.
Класс! Рада что полезно!
Письмо не приходит, то есть приходит пустое, даже Ваш шаблон.
Виталий, какой у Вас почтовый клиент? Как Вы экспортировали шаблон?
Спасибо за статью. Все очень понятно. Единственный момент - мне на почту пришла абракадабра вместо русского текста.
Т.е. тестировала на английском все в порядке, а вот с кириллицей явный конфликт.
Посоветуйте можно это исправить?
Наталья, в строчке
есть кодировка. Попробуйте в почте поставить кодировку utf-8 или поменять саму кодировку в письме.
GOOD