Создаём письмо для рассылки

Имея свой собственный сайт, нужно держать марку во всех мелочах, в том числе и в рассылке писем, будь у вас интернет-магазин или блог с пятью подписчиками. В этой статье я расскажу вам, как создать своё полноценное письмо для рассылки, которое будет одинаково хорошо отображаться на любом размере экрана, будь то смартфон или большой монитор компьютера.

Приступим. Сегодня я выложу для вас заготовку шаблонного письма, в котором вы сможете поменять цвета, текст, логотип и ссылки. Это письмо универсально и подходит для любых тем рассылки. Стандартный шаблон письма должен состоять из:

  • шапка письма, в которой содержится логотип со ссылкой на ваш сайт
  • приветствие или обращение к получателю письма
  • основной текст письма
  • пожелания и заключительная часть письма
  • подвал письма, в котором содержатся ссылки на соцсети, контактные данные и так далее.

Ниже вы видите несколько примеров сообщений, сделанных по подобному шаблону.

Screen Shot 2014-11-22 at 00.39.56

доска объявлений в Черногории

Screen Shot 2014-11-22 at 00.45.41

интернет-магазин товаров для животных

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

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

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email</title>

<style type="text/css">
	.ReadMsgBody {width: 100%; background-color: #ffffff;}
	.ExternalClass {width: 100%; background-color: #ffffff;}
	body	 {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
	table {border-collapse: collapse;}

	@media only screen and (max-width: 640px)  {
					body[yahoo] .deviceWidth {width:440px!important; padding:0;}
					body[yahoo] .center {text-align: center!important;}
			}

	@media only screen and (max-width: 479px) {
					body[yahoo] .deviceWidth {width:280px!important; padding:0; background-color:#363636}
					body[yahoo] .center {text-align: center!important;}
			}

</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix">
<p> </p>
<!-- Wrapper -->
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding-top: 20px;" valign="top" width="100%"><!-- One Column -->
<table class="deviceWidth" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#35c3d9">
<tbody>
<tr>
<td style="padding: 10px;" align="center" valign="top" bgcolor="#00CC99"><a href="#"><img src="http://s2.r29static.com/blog/q91dog/assets/images/logos/big_logo.png" alt="" /></a></td>
</tr>
<tr>
<td style="font-size: 18px; color:#000; font-weight: normal; text-align: left; line-height: 24px; vertical-align: top; padding: 10px 8px 10px 8px;" bgcolor="#CCFFCC">


<p align="center">Уважаемый (-ая), клиент !</p>
<p align="center">Благодарим Ваc за регистрацию!</p>
<p align="center"> </p>
<p align="center">Следите за новостями на <a href="#">нашем сайте</a>, <a href="#">участвуйте в акциях</a>, <a href="#">читайте новые статьи в блоге</a>.</p>
<p align="center"> </p>

<p align="center">Мы всегда рады видеть Вас на нашем сайте!</p>


<p align="center">С наилучшими пожеланиями, <a href="#">REFINERY29</a></p>

</td>
</tr>
</tbody>
</table>
<table style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 30px 0;" bgcolor="#CCCCCC">
<table class="deviceWidth" style="width: 580px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td>
<table class="deviceWidth" style="width: 45%;" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="center" style="font-size: 13px; color: #000; padding-bottom: 20px; padding-left: 10px;" valign="top">Вы получили это письмо, потому что<br /> Вы подписались на новостную рассылку на сайте http://вашсайт.ru<br /> <br /> <br /><br /><br /> © «REFINERY29» 2014.</td>
</tr>
</tbody>
</table>
<table class="deviceWidth" style="width: 40%;" border="0" cellspacing="0" cellpadding="0" align="right">
<tbody>
<tr>
<td class="center" style="font-size: 13px; color: rgb(80, 80, 80); font-weight: normal; font-family: 'Neucha', cursive; line-height: 26px; vertical-align: top; text-align: right; padding-right: 10px;" valign="top"><a href="https://twitter.com/"><img title="Twitter" src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-128.png" alt="Twitter" width="38" height="38" border="0" /></a> <a href="https://vk.com/"><img title="vk.com" src="https://cdn1.iconfinder.com/data/icons/round-simple-social-icons/58/vkontakte.png" alt="Twitter" width="38" height="38" border="0" /></a> <a href="http://tumblr.com/"><img title="Tumblr" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/circle-tumblr-128.png" alt="Tumblr" width="38" height="38" border="0" /></a> <br /> <a href="#"><img style="padding-top: 5px; height:90px" src="http://s2.r29static.com/blog/q91dog/assets/images/logos/big_logo.png" alt="" border="0" /></a><br /> <a style="text-decoration: none; color: #fff; font-weight: normal;" href="mailto:help@mail.ru">help@mail.ru</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End 4 Columns --></td>
</tr>
</tbody>
</table>
<!-- End Wrapper -->
<p> </p>
</body>
</html>

Untitled-2

Этот файл нужно открыть в Блокноте.

Сам шаблон выглядит вот так:

Screen Shot 2014-11-22 at 01.07.37

Теперь поговорим об изменениях

 

Изменить цвет первого блока можно в строчке:

<td style="padding: 10px;" align="center" valign="top" bgcolor="#00CC99">

Параметр bgcolor отвечает за цвет, в данном случае шапки письма. Цвет можно подобрать на сайте онлайн палитры или тут попроще. Поставить ваш логотип и ссылку на сайт можно в этой записи:

<a href="#"><img src="http://s2.r29static.com/blog/q91dog/assets/images/logos/big_logo.png" alt="" /></a>

где

href="#"

ссылка на ваш сайт, а значит вам нужно заменить знак # на адрес вида http://вашсайт.ru

Далее вам нужно вставить ваш логотип вместо адреса:

http://s2.r29static.com/blog/q91dog/assets/images/logos/big_logo.png

Шапка письма готова. Переходим к телу письма, в котором мы видим вот такие строки

<p align="center">Уважаемый (-ая), клиент !</p>

Данный текст (и ему подобный) вы можете заменить на свой, а тег

<p align="center">

показывает, что ваш текст будет находиться на новой строке и посередине. Цвет блока можно изменить тут

<td style="font-size: 18px; color:#000; font-weight: normal; text-align: left; line-height: 24px; vertical-align: top; padding: 10px 8px 10px 8px;" bgcolor="#CCFFCC">

А именно

bgcolor="#CCFFCC"

где

#CCFFCC

цвет блока, который вы можете подобрать, например, на сайте онлайн палитры или тут попроще.

В подвале письма мы видим ссылки на социальные сети, которые нужно дополнить вашим адресом.

<a href="https://twitter.com/">
<a href="https://vk.com/">
<a href="http://tumblr.com/">

И не забываем заменить логотип на свой в строке

<img style="padding-top: 5px; height:90px" src="http://s2.r29static.com/blog/q91dog/assets/images/logos/big_logo.png" alt="" border="0" />

Ниже в письме указан адрес почты, который также надо заменить на ваш

<a style="text-decoration: none; color: #fff; font-weight: normal;" href="mailto:help@mail.ru">help@mail.ru</a>

Теперь письмо готово и его можно отправлять. А как это делать, я расскажу в следующей статье.

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог.

end