Сегодня я задалась целью сделать html шаблон для электронного письма.
Основными критериями были:
— простота;
— простое редактирование;
— адаптивный дизайн для разных почтовых клиентов и сервисов.
В интернете много шаблонов, которые мне совсем не подошли. А воспользовалась я статьей http://webdesign.tutsplus.com/ru/articles/creating-a-simple-responsive-html-email—webdesign-12978
Единственный минус этой статьи — это отсутствие готового полного шаблона, который просто можно скачать и отредактировать. Поэтому я решила его создать.
Полный код HTML письма
Особенностью этого кода является то, что все стили максимально прописаны в теле самого письма, а не внутри тегов <style>. Благодаря этому минимизируется искажение стилей в разных почтовых клиентах.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
<!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 !important;}} 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!important; 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!important;} body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;} </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> |
Наполнение HTML письма
Достаточно скопировать этот в NotePad++ и cохранить с расширением *.html. Далее необходимо внести изменения и экспортировать шаблон в ваш почтовый клиент.
Письмо состоит их трех блоков:
- Header
- Тело письма
- Footer
Везде www.site.com.ua нужно поменять на собственный сайт.
Header
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!--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> |
- В строчке: <img src=»http:/site.com/image/logo.png» width=»100″ border=»0″ alt=»» / >
поменять http:/site.com/image/logo.png на ссылку своего логотипа. - Вместо SubHEADER написать подзаголовок
- Вместо HEADER заглавие письма
Тело письма
В нем есть:
- Вступление.
12345678<!--ВСТУПЛЕНИЕ--><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><!--/ВСТУПЛЕНИЕ--> - Начало. Поменяйте текст в блоке НАЧАЛО
- Кнопка. Кнопка делается с помощью целого блока:
12345678910<!--КНОПКА 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-->
12<!--ТЕКСТ И ССЫЛКА КНОПКИ--><a style="color: #ffffff; text-decoration: none;" href="http:/site.com">Register now!</a>
где вместо http:/site.com нужно вставить свою ссылку, а вместо Register now! свой текст кнопки. - Картнка. меняете только строчку:
1<img src="http:/site.com/image/image.png" width="100%" border="0" style="height: auto;" alt="" /> - Окончание письма. Поменять Best regards, Boss
Все блоки можно менять местами удалять или добавлять. Например, если нужно две картинки или две кнопки.
Footer
- Поменять.
1®All rights reserved<br/> <a href="www.site.com.ua" style="color: #ffffff; text-decoration: underline;">www.site.com.ua</a> - Социальные сети. Вместо LINK_TO_FB вставить ссылку на страницу Facebook.
Вместо LINK_TO_VK — ссылку на страницу Вконтакте.
Редактирование стилей HTML письма
Так как стилей в шаблоне много, и все они прописаны не отдельно, а для конкретного тега, есть смысл менять только цветовую гамму письма. В HTML редакторы с помощью команды заменить — поменяйте нужные цвета:
#f6f8f1 — внешний фон;
#c7d8a7 — фон Header — Заголовок;
#153643 — цвет текста Заглавия, Вступления и самого письма.
#e05443 — цвет Кнопки;
#44525f — фон Footer — Подвала
Вот собственно и все)) Удачных вам рассылок!
Спасибо супер.
Класс! Рада что полезно!
Письмо не приходит, то есть приходит пустое, даже Ваш шаблон.
Виталий, какой у Вас почтовый клиент? Как Вы экспортировали шаблон?
Спасибо за статью. Все очень понятно. Единственный момент — мне на почту пришла абракадабра вместо русского текста.
Т.е. тестировала на английском все в порядке, а вот с кириллицей явный конфликт.
Посоветуйте можно это исправить?
Наталья, в строчке
есть кодировка. Попробуйте в почте поставить кодировку utf-8 или поменять саму кодировку в письме.
GOOD