Здравствуйте дорогие читатели – Sozdaiblog.ru!
Сегодня я покажу, как сделать красивый HTML шаблон письма для E-mail рассылки.
Уже давно ни для кого не секрет, что весь бизнес в Интернете построен на E-mail маркетинге.
Каждый день с помощью информационных рассылок инфо-бизнесмены, блоггеры и интернет-магазины контактируют со своими подписчиками, предлагая им различные товары и услуги.
Но, что бы на такое предложение обратили внимание, а не сразу отправили в папку «спам», нужно привлечь к нему внимание.
Для этого будет уместным сделать красиво оформленный HTML шаблон письма.
Специально для Вас я подобрал тестовый шаблон, который будет наглядным пособием.
Итак.
HTML шаблон письма
Что и как мы будем делать?
Мы будем создавать самый простой HTML шаблон письма (как создать шаблон для WordPress), который будет состоять из основного диалогового окна и двух вторичных колонок.
Создание каркаса и таблицы-контейнера
Для начала нам нужно сделать HTML каркас нашего письма. Выглядеть это будет так:
<html> <head> <title>HTML шаблон письма</title> </head> <body> </body> </html>
Далее мы создаём таблицу-контейнер. Она будет имитировать сплошной цвет фона:
<html> <head> <title>HTML шаблон письма</title> </head> <body> <!-- Container Table --> <table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1"> <tr> <td align="center"></td> </tr> </table> <!-- End Container Table --> </body> </html>
Обратите внимание, что ширину таблицы я задал 99%, оставив вокруг небольшое расстояние. Это не моё личное желание, а требование некоторых почтовых Веб-клиентов таких, как Gmail и Yahoo. Остальная часть нашей электронной почты будет находиться в этой одной ячейке таблицы, которая расположена по центру.
Следующий шаг заключается в создании обёртки таблицы фактического содержания письма. Сохраняйте максимальный размер конструкции не более 600 пикселей:
<html> <head> <title>HTML шаблон письма</title> </head> <body> <!-- Container Table --> <table cellpadding="0" cellspacing="0" border="0" width="99%" bgcolor="#0f6da1"> <tr> <td align="center"> <!-- Email Wrapper Table --> <table cellpadding="0" cellspacing="0" border="0" width="640"> <tr> <td></td> </tr> </table> <!-- End Email Wrapper Table --> </td> </tr> </table> <!-- End Container Table --> </body> </html>
Вместе с тенью света на белом фоне наш шаблон письма был растянут до 640px, но его рабочая зона по-прежнему осталась равной 600px.
Создание шапки
Теперь, когда основная таблица создана, пришло время браться за её наполнением необходимым содержимым. Я начну с самого верха шаблона письма и потихоньку, буду опускаться вниз.
Верхняя строка
Начиная с этого момента, я буду исключать ранее написанный код (рамки таблицы).
Таким образом, первая строка электронной таблицы имеет синий фон с белым шрифтом и ссылку на веб-версию письма. Очень важно снарядить Ваше письмо такой ссылкой, так как не все почтовые клиенты выводят его содержимое одинаково правильно.
За отображение такой ссылки отвечает следующий кусок кода:
<table cellpadding="0" cellspacing="0" border="0" width="640"> <tr> <td valign="bottom" height="30" align="right" class="footer"> Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра. </td> </tr> <tr> <td> <img src="email_images/top_fade.jpg" width="640" height="20" border="0" /> </td> </tr> </table>
А за её внешний вид отвечает CSS стиль:
/* Fonts and Typography */ .footer { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #fff; padding-right: 20px; }
Опускаясь ниже, мы видим логотип и иконки социальных сетей, которые расположены на одном уровне.
За их вывод отвечает вот такой код:
<tr> <td align="center" class="email_background"> <!-- Email Header --> <table cellpadding="0" cellspacing="0" border="0" width="600"> <tr> <td><img src="email_images/logo.jpg" width="246" height="41" border="0" style="padding-left:20px; padding-top: 20px;" /></td> <td><img src="email_images/facebook.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td> <td><img src="email_images/twitter.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td> <td><img src="email_images/linkedin.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td> <td><img src="email_images/youtube.jpg" width="23" height="41" border="0" style="padding-top: 20px;" /></td> </tr> </table> </td> </tr>
Вдобавок, ко всем нашим изображения в HTML шаблоне письма добавляются следующие стили:
/* Backgrounds */ .email_background { width: 640px; background: url('/wp-content/uploads/email_images/email_bg.jpg') repeat-y; } /* Images */ img { display: block; border: none; }
Таким образом, социальные иконки сидят на своих местах в собственных вложенных ячейках таблицы и не имеют отношения к другим разделам письма. Это позволяет их менять по мере появления соответствующей необходимости.
Добавление содержания
Далее мы переходим к содержанию. Оно должно быть коротким, красивым и познавательным.
Сначала мы начнём с добавления первого изображения, которое в данном дизайне имеет размер 560px на 210px. Вы также можете увидеть милую деформированную тень под изображением, которая была сделана отдельно, что позволяет быстро менять изображения, не теряя тень. Давайте перейдем к коду:
<tr> <td colspan="5"><img src="email_images/featured_image.jpg" width="560" height="250" style="padding-left: 20px; padding-right: 20px;" /></td> </tr> <tr> <td colspan="5"><img src="email_images/featured_shadow.jpg" width="560" height="18" style="padding-left: 20px; padding-right: 20px;" /></td> </tr>
Здесь мы создали новую строку для показа больших изображений, установив ширину до 560px с добавление 20px отступов с обеих сторон. Те же действия мы проделали и с тенью.
Добавление заголовка и содержания
Перемещаясь ниже, мы видим заголовок основного материала и непосредственно само содержимое. Здесь за вывод контента отвечает вот такой код:
<tr> <td colspan="5" style="padding-left:20px; padding-right: 20px; padding-bottom: 10px;"> <h1>This is your featured story</h1> </td> </tr> <tr> <td colspan="5" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px;"> <p class="content">Существует мнение, что Паттайя стала популярным курортом благодаря тому, что тут часто отдыхали американские моряки, которых впрочем, тут и сейчас большое количество и они всегда в окружении нескольких таек. Естественно среди наших соотечественников он менее популярен, чем Египет и Турция. Но родную речь тут слышно повсеместно )) и в торговых комплексах во время шоппинга и во множестве здешних баров )). Паттайя в основном знаменита своей ночной жизнью, морем и текстилем. Конечно, кроме всего прочего тут можно найти множество других интересностей. Здесь можно брать в прокат любой транспорт, в том числе и джипы и скутеры. Для любителей мототехники тут вообще райский уголок. Чтобы взять в аренду мотобайк права могут даже и не потребовать, всего за 100-500 бат (плюс залог в размере 2 000 бат) можно арендовать приличный скутер и погонять в свое удовольствие! <br /><br /> <img src="email_images/readmore.jpg" border="0" align="right" width="114" height="27" /> </p> </td> </tr> </table> </td>
Чтобы изменить внешний вид заголовка и текста шаблона письма, достаточно воспользоваться следующими стилями:
h1 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 24px; font-weight: normal; } .content { padding: 0; margin: 0; } p { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; }
Дополнительное содержимое
Теперь мы переходим к дополнительному содержимому нашего шаблона. Как Вы уже заметили оно разбито на две колонки. В каждой из колонок присутствует фото, заголовок и небольшое превью. Всё это создаётся при помощи вот такого кода:
<tr> <td align="center" class="email_background"> <table cellpadding="0" cellspacing="0" border="0" width="600"> <tr> <td> <img src="email_images/secondary1.jpg" width="271" height="150" border="0" style="padding-left: 20px;" /> </td> <td> <img src="email_images/secondary2.jpg" width="271" height="150" border="0" style="padding-left: 10px;" /> </td> </tr> <tr> <td> <img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 20px;" /> </td> <td> <img src="email_images/secondary_shadow.jpg" width="271" height="15" border="0" style="padding-left: 10px;" /> </td> </tr> <tr> <td style="padding-left: 20px;"> <h2>This is a secondary headline</h2> </td> <td style="padding-left: 10px;"> <h2>This is a secondary headline</h2> </td> </tr> <tr> <td style="padding-left: 20px;"> <p>Несмотря на погубленную репутацию Паттаи, здесь можно узнать, что пресловутый тайский массаж - не только прикрытие для борделей. В Таиланде действительно делают неплохой массаж, а лучшими специалистами в этом искусстве считаются слепые мастера. Их секрет заключается в повышенной чувствительности пальцев. <br /><br /> <img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" /> </p> </td> <td style="padding-left: 10px; padding-right: 10px;"> <p>Центральная улица и сердце Паттайи, которая никого не оставляет равнодушным. Местный Арбат, Таймс-Сквер и Содом с Гоморрой в одном стакане, «Уокинг Стрит» – настоящий источник любви и ненависти как для местных жителей, так и для приезжих. Говорим «Паттайя», подразумеваем Walking Street. <br /><br /> <img src="email_images/readmore.jpg" style="padding-right:10px;" border="0" align="right" width="114" height="27" /> </p> </td> </tr> </table> </td> </tr>
Здесь нам ещё потребуется добавить дополнительный стиль. Вот он:
h2 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 18px; font-weight: normal; }
Закрытие HTML шаблона письма
Итак, мы приближаемся к концу нашего шаблона. Здесь нам нужно закрыть основное окно, используя изображение и следующий код:
<tr> <td> <img src="email_images/bottom_fade.jpg" width="640" border="0" height="28" /> </td> </tr>
Добавление подвала
Одним из наиболее важных аспектов, является добавлением в конце шаблона письма ссылки для отписки от получения подобных писем (создать подписку на рассылку). Да, да, я знаю, Вы не хотите терять абонентов. Но и раздражать их тоже нельзя. Вы должны предоставить клиентам возможность отказаться от получения, возможно давно надоевшей им рассылки. Ну и заодно напомнить кто автор.
Здесь Вам необходим такой код:
<tr> <td valign="top" height="80" align="right" class="footer"> Рассылка от: Иванов Иван<br /> Автор блога: Ivan.ru<br /> <br /> Хотите отказаться от подписки? Нажмите здесь </td> </table> <!-- End Actual Email Content --> </td> </tr> </table> <!-- End Email Wrapper Table --> </td> </tr> </table> <!-- End Container Table --> </body> </html>
Заключение
Дорогие друзья, для отображения всех графических элементов в шаблоне письма они должны быть загружены на любой онлайн сервер, а в соответствующих строчках кода необходимо прописать уникальный путь до этих изображений.
Тестовый HTML шаблон письма был дан, как пособие, которое Вы можете в любой момент переверстать на свой вкус и цвет.
На сегодня это всё. Надеюсь, что Вам понравилось.
До новых статей…
С уважением, Денис Черников!
Мне понравилось!Как ни странно, но люблю с html повозиться , так радостно когда «задачка» решается!
Я рад, Людмила! Мне вот тоже по душе головоломки.
Спасибо, действительно просто. В некоторых случаях не надо будет «заморачиваться»!
Пожалуйста, Юрий! Вы правы, на самом деле всё не так страшно, как кажется на первый взгляд.
Спасибо Денис. Разложил все по полочкам. Бери и делай. Вот за что мне нравится твой блог. За твой стиль подачи материала. Беру с тебя пример и стараюсь тоже все расписывать по шагам. Ты расписал так как конструктор. Я смотрю можно взять этот шаблон и сделать с него страницу захвата, а может еще что нибудь придумать. Вообщем спасибо за твой труд.
Пожалуйста, Сергей! С самого начала создания блога я ставил цель быть ближе к людям, объяснять подробно то, что самому давалось с трудом. А то знаете как бывает — заходишь на какой-нибудь сайт, а там столько интересного понаписано, но ничего не понятно. Куда какой код вставлять, где какие папки искать. Жуть.
Здравствуй Денис.
Спасибо за по шаговую инструкцию
«Как сделать красивый HTML шаблон письма для E-mail рассылки»
Я как раз занялся созданием рассылки .
Особенно ценно ,что делишся исходным кодом.
Есть от чего оттолкнутся.
С уважением,Владимир
Пожалуйста, Владимир! Когда уже есть готовый каркас, то всё гораздо проще! Думаю, у Вас всё получится.
Меня всегда привлекали такие красочные письма и возникал вопрос: «Да как же это они сделали?» Теперь все секреты раскрыты! Спасибо, Денис, за пошаговый алгоритм.
Пожалуйста, Андрей! Всё на самом деле просто, нужно лишь сесть и немного подумать.
Выходит реально очень круто. С html я люблю поработать, но от халявного хорошего кода, как этот, никогда не откажусь. Спасибо Денис, проделал отличную работу, которая пригодится многим!
Привет, Александр! Рад, что тебе понравилось! Можешь доработать всё на свой вкус.
Мне очень понравилось!!! Спасибо за статью, Денис! А то отправляешь иногда рассылку, а она выглядит, как сухой безжизненный листок… а так хочется сочных цветов и картинок! Обязательно займусь по Вашим советам!
Всегда, пожалуйста!Сделайте своё письмо, а потом обязательно пришлите посмотреть.
Обязательно, только закончу разбираться с одним делом, и пришлю на зрительский суд
Будем ждать с нетерпением!)
Мне эти инструкции еще не «по зубам». Но на Смартреспондере есть шаблоны красочных писем, которые можно корректировать по своему желанию, не влезая в код. Можно и картинки разместить и яркие границы.
Чем и пользуюсь, вот образец: https: //e.mail.ru/cgi-bin/msglist?ffsputnik=1#readmsg?id=13614568480000000611&folder=500002
Да, у Смарта есть такие функции, но своё есть своё. Да и дело не в шаблонах, а в полученных знаниях.
Давно искал в сети что то подобное, а то стандартные шаблоны Смартреспондера приелись…Спасибо
Пожалуйста, Дмитрий! Пользуйтесь.
Здравствуй Денис.
По твоему шаблону я написал заключительну страницу моей
подписной страницы
http: //deda.kz/h/
Заключительная страница
http: //deda.kz/email/
С уважением,Владимир.
Здравствуйте, Владимир1
Что-то ни одна ссылка не работает! Вы их не правильно указали!
Здравствуй, Денис! Про HTML — это конечно круто, но на данный момент я на него смотрю, как папуас на вертолет. Но постичь язык интернет-кодов страстно хочу! Не буду много словословить, скажу только, что компьютер и инет — единственно возможный вариант для меня заработать на хлеб насущный (и не спрашивай почему!)Я всему у тебя учусь, и за это премного тебе благодарен. Люблю также и самообразование,но все равно по очень сложным вопросам (на какой то начальный период времени) не стыжусь обращаться за советами к уже знающим мастерам. Много читаю, пробую и настырно добиваюсь результата. Рад быть твоим подписчиком, а к учебе я предрасположен с детства и науки мне давались всегда легко (но в молодости мешали и лень, и моя юная неусидчивость). Спасибо тебе за все, ты хороший друг для очень многих людей.
Здравствуйте, Виктор! Огромное спасибо за такой откровенный и положительный отзыв. Вы напомнили мне себя некоторое время назад. Могу посоветовать Вам одно — «НЕ СДАВАТЬСЯ». Победа никогда не даётся легко, но что мы тогда будем из себя представлять если не будем стремиться быть победителем. Только терпение и труд делает из людей тех, к кому прислушиваются миллионы. Никогда ни один человек не будет признан, как величайшая личность если он не показал людям на что они способны. Именно с этой целью я начал вести блог. Даже если не будет того результата на который я был нацелен, всё было не зря. Удачи Вам!
Денис, Благодарю!
Классная инструкция. Убрал в закладки. Завтра же займусь
Пожалуйста, Ильдар!
Занимайтесь.
Здравствуйте, Денис. А как отправить такое письмо?
Я это делаю с помощью разных программ! В ближайшее время я напишу статью про это.Подождите немножко.
Спасибо большое,я давно искал нечто подобное,только возникла одна проблема)Подскажите,пожалуйста,где,в какой программе это делать?
Пожалуйста, Владислав! Это делается не в программе, а в обычном HTML-редакторе. Я использую Notepad++. Но без минимального знания html и css Вы не справитесь.
Я вставил код,но у меня не отображаются картинки,я все голову ломаю,так и не понял почему))Помогите,пожалуйста.
Картинки сначала нужно разместить где-нибудь, а потом в шаблоне прописать к ним путь!
Я правильно понимаю что код css в html нужно вставлять с помощью тегов
h1 {
…
}
Перед этим
style type=”text/css
почему то тег не появляется
Арслан, Вы код в комментариях не вставите, спрашивайте на словах!
Арслан, делайте так, как написано в посте! Там всё очень подробно поясняется.
Я очень внимательно читаю,но не могу понять.Коды css я вставил,только у меня все равно все синее.Я их записываю по среди кода,вот так:
table>
style type=”text/css”
.footer {.
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #fff;
padding-right: 20px;.
}
./style
Извините,если я вас отвлекаю)
Не отвлекаете!))
Вы установите себе фаербаг (дополнение к мозиле) и посмотрите с его помощью. Там сразу всё будет видно!
А у вас есть статья,которая подробнее раскрывает ссылку:
«Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра»?
Нет, нету!
Помогите сделать шаблон для письма как с Вами связаться ?
А как я Вам помогу? Я выдал всю информацию по созданию писем!
Спасибо.
Спасибо. Есть ВОПРОС, я так смотрю, под всеми статьям d комментариях изображение людей как вытягивается в круги — я та понимаю сам эти изображения вставляешь?
Пожалуйста, Степан! Круги делает CSS, а изображения вставляет сервис Gravatar.
Статья замечательная!!! При верстке столкнулся с такой траблой, может вы мне поможете? Вставляю, сверстанный по вашему примеру, шаблон в аутлук 2007, отправляю письмо, в итоге все едет, из за того что ааутлук добавляет ко всему содержимому ячейки. Ваш шаблон он, кстати, тоже портит. Как обойти эту не приятность?
У меня есть пост о том, как отправлять HTML письма, попробуйте через описанную программу!
а можно ссылку на пост?
Поиск по сайту Вам в помощь!
Спасибо Денис! Для тех у кого даже минимальные
навыки работы с кодом, думаю разберутся. Все очень подробно показано.
Пожалуйста, Виктор!
Старался максимально подробно всё изложить, чтобы всем было понятно.
Эх я думал статейка о другом, научи пожалуйста делать форму подписки на статьи как у тебя!
Какая именно подписка? В углу или в сайдбаре?
Подписка для фидбернера)
Возможно я напишу такой пост, но позже!
Буду ждать) а то стандартная форма печальная)
Хорошо! Только не знаю когда получится!
А какой адрес у веб-версии письма?
Там в самой почте нужно настраивать!
Какой Вы немногословный)это, конечно, стимулирует на самостоятельный поиск, но я, честно, искала и не нашла, иначе не задавала бы здесь вопрос. Может подскажете, где именно настраивать?
Я не многословный из-за того, что не помню, как я на момент публикации поста делал ссылку на Веб-версию письма. А чтобы вспомнить мне так же как и Вам придётся воспользоваться поиском.
Да я уже пользовалась, не нашла решения… может, не там искала. Буду признательна, если Вы найдете или вспомните. Или это не так важно и можно забить на это?)
Если честно, то можно не пользоваться html-версией. Сейчас всё так продвинуто, что всё и так отлично загружается и просматривается. Я вон смотрю люди даже ссылку на отписку от рассылки перестали ставить, чтобы человек не смог от них уйти. Эти все ссылки по большей части считаются хорошим тоном и не более + для мобильных версий, где не всегда можно посмотреть объёмное письмо. А в остальном можете не заморачиваться!
Спасибо, Денис, за такой развернутый ответ!) согласна с Вами. Я это и хотела сделать ради хорошего тона. Но больше не буду заморачиваться, Вы меня уговорили))
Пожалуйста, Наталья! Если что пишите!
Денис, здравствуйте! Давно прочитал вашу статью, долгое время разбирался. Причина: буквально на днях окончил наконец куры по изучению кодов-html и CSS-стилей от Евгения Попова и все сразу стало понятно. Благодарю вас за урок. Эту же идею можно реализовать не прибегая к использованию таблиц. Проще это сделать используя в html блоки / Но это только мое мнение. Здесь есть проблема как вставить в письмо картинки если они в шаблоне письма не отражаются, нужна обязательно полная ссылка на картинку закачанную в интернет. Нашел один сервис, но он добавляет лишнее, может посоветуете что-то. Сбросьте ссылку, заранее спасибо.
Александр.
Здравствуйте, Александр!
Реализовать можно по-разному. Тут кому и как удобней! На счёт сервиса то вот хороший — http: //pixs.ru
Загружайте любые фотки и отсылайте адресату!
Денис, добрый день! Ваш сайт прекрасен, но к сожалению, все это делаю в первые, и на один вопрос найти ответ не смогла! При отправлении письма, каждая почта отображает его по разному, но более того, программа the bat отображает полную абракадабру. Текст-сплошные значки! При этом другие html-письма приходят и выглядят нормально! В чем проблема может быть, подскажите пожалуйста!
Здравствуйте, Лариса!
Проблема в кодировке HTML документа! Она должна быть UTF-8!
а можно исходный код увидеть? я хотел к своему сайту сделать макет , если не трудно посмотрите http: //valentin.abc-4.com и посоветуйте как и что делать
Исходный код чего?
Денис, спасибо за доходчивой урок. Но я так и не разобралась, как сделать так, что бы рассылка шла с и-мэйл адреса (например с mail.ru) так? что бы отображался не сам код, а его результат.И возможно ли это сделать? Или для этого нужен какой-то особый отдельный сервис?
Пожалуйста, Александр! Для этого нужно использовать программу почтового клиента о котором я написал в посте!
Здравствуйте, Денис
Могу ли я вас попросить помочь мне бесплатно в создании HTML рассылки в яндексе, а то у меня никак не получается, пожалуйста.
С Ув., Эльдар
ПИ.ЕС. может по скайпу? если согласны, мой скайп elrusghost.
Здравствуйте, Эльдар! Извините, но я смогу этого сделать и дело даже не в деньгах!
Здравствуйте, а подскажите, этот готовый шаблон…как его потом сделать в почте рассылкой?:(
Видимо это не моё! Что то страшное получилось…
Здравствуйте, Денис.
Спасибо за статью!
Шаблон сделала, отправлять получается с помощью Thunderbird.
Не знаете ли Вы как сделать отписку?
Спасибо
lt;/html>
Приветствую всех!
Очень интересная и полезная информация. Шаблон письма сделан очень красиво и профессионально. Очень полезно знать, как привлечь внимание аудитории и избежать попадания в “спам”. Я уже скачал демо версию и с нетерпением жду, чтобы приступить к созданию своего шаблона. Спасибо за отличную статью!
cURL error 28: Operation timed out after 60003 milliseconds with 0 bytes received