/ Сайтостроение / Адаптивность / Верстка HTML под рассылку

Верстка HTML под рассылку

Верстка под рассылку имеет некоторые особенности. Если прописывать в head стили style, то данные стили не будут учитываться во многих почтовиках.

Верстка неадаптивной рассылки

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

<html>
<head>
	<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Arsenal:400,700&subset=cyrillic" rel="stylesheet">
<link href="https://site.ru/wp-content/themes/meisterwerk/css/oswald.css" rel="stylesheet"> 
    <style>
* {margin: 0; padding: 0;}
body {width: 100% !important; height: 100%; background: #f7f7fa;}
.button:hover {background: #b6231c !important; background-color: #b6231c !important;}
</style>	
</head>
<body><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tbody>
		<tr>
			<td align="center" bgcolor="#f7f7fa" style="padding: 0px 0px 30px 0px;" valign="top" width="100%">
			<table align="center" border="0" cellpadding="0" cellspacing="0" style="color: #606060; font-size: 12px; font-family: 'Trebuchet MS',arial,helvetica,sans-serif;" width="622"><!---------------- TOP ---------------->
				<tbody>
					<tr>
						<td align="center" style="color: #ccc; font-size: 13px; font-family: 'Trebuchet MS',arial,helvetica,sans-serif; line-height:normal; padding: 15px 40px 15px 40px;" width="640">
<a style="text-decoration: none; color: #ccc;" href="https://site.ru/">Сеть отелей UNDERSUN</a></td>
					</tr>
					<!---------------- HEADER ---------------->
					<tr>
						<td align="center" bgcolor="#ffffff" height="23" width="622">
						<table style="padding: 5px 0 15px 0; background-image: url(https://site.ru/wp-content/themes/meisterwerk/images/undersun-bg-orange.png);" bgcolor="#ff8d00" border="0" cellpadding="0" cellspacing="0" width="622">
							<tbody>
								<tr>
									<td align="left" style="padding: 15px 0px 15px 40px;" width="320"><img border="0" height="69" src="https://site.ru/wp-content/themes/meisterwerk/images/logo-sanremo.png" style="display:block;" /></td>
									<td align="right" style="padding: 15px 40px 15px 0px;" width="320">
									<table border="0" cellpadding="0" cellspacing="0">
										<tbody>
											<tr>
												<td align="right" style="color: #333333; font-size: 20px; font-family: 'Trebuchet MS',arial,helvetica,sans-serif; line-height:normal; padding-top: 25px;"><a href="tel:+79882389888" style="color: #333333; text-decoration: none; font-family: 'Oswald', sans-serif;" target="_blank"><span style="color: #fff000; font-size: 23px;">+7 (988) 238 98 88</span> </a></td>
											</tr>
                                            											<tr>
												<td colspan="2" align="right" style="padding-bottom: 4px;"><span style="color: #fff;">Круглосуточно</span></td>
											</tr>
										</tbody>
									</table>
									</td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
					<!-- end HEADER -->
					<!---------------- BANNER ---------------->
					<!--<tr>
						<td align="center" bgcolor="#c10f0b" width="680"><a href="#" target="_blank"><img border="0" height="275" src="http://s.usndr.com/templates-base/uni_016/banner.jpg" style="display:block;" width="680" /></a></td>
					</tr>-->
					<!-- end BANNER -->
					<tr>
						<td align="left" bgcolor="#ffffff" style="color: #515151; font-size: 13px; font-family: arial,helvetica,sans-serif; line-height: 19px; padding: 30px 40px 20px 40px;" valign="top" width="629">
<img style="margin-bottom: 30px; width: 100%; height: auto;" src="https://site.ru/wp-content/themes/meisterwerk/images/sanremo-image.png" />                        
                        
<h2 style="margin-bottom: 20px; font-size: 25px; font-family: 'Oswald', sans-serif; font-weight:400;">Оцените отель «Sanremo» Сочи</h2>

<p style="margin-bottom: 15px;font-size: 18px;line-height: 24px;font-family: 'Arsenal', sans-serif;font-weight: 100;color: #666;">Благодарим Вас за доверие к сети отелей Undersun. Надеемся, Ваше пребывание в отеле «Sanremo» оставило только самые хорошие впечатления.</p>

<p style="margin-bottom: 15px;font-size: 18px;line-height: 24px;font-family: 'Arsenal', sans-serif;font-weight: 100;color: #666;">Мы будем признательны Вам, если Вы оставите отзыв о нашем отеле, что в дальнейшем позволит Вам и другим гостям быть уверенными в высоком качестве оказанных услуг, а руководителям оперативно получать отзывы и пожелания по развитию.</p>

<table border="0" cellpadding="0" cellspacing="0" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  border-collapse: none !important; width:100%;">
							<tbody>
								<tr>
									<td align="center" height="44" style="font-weight: bold; padding:30px 0; font-size: 14px; font-family: 'Trebuchet MS',arial,helvetica,sans-serif;"><a class="button" href="https://site.ru/otsenite-nashu-rabotu/" style="color: #ffffff; line-height: normal; text-decoration: none; background: #d93324; padding:10px 35px; border: 1px solid #fff; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2); font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 17px;" target="_blank">Оставить отзыв</a></td>
								</tr>
							</tbody>
						</table>
                        
                    </td>
					</tr>
					<!---------------- FOOTER ---------------->

						<td align="center" style="color: #ccc; font-size: 11px; font-family: arial,helvetica,sans-serif; line-height: normal; padding: 20px 20px 0px 20px;" valign="top" width="629"><a href="https://sanremo.site.ru/" style="color: #ffb70b; outline: medium none; text-decoration: underline;" target="_blank">sanremo.site.ru</a>.</td>
					</tr>
					<!-- end FOOTER -->
			</table>
			</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Что интересно, к шаблону рассылки можно подключать файлы шрифтов обычным способом. Правда отображаются эти шрифты далеко не во всех почтовых сайтах.

Проверка рассылочного ящика

Проверяем уровень доверия ящика, с которого делаем рассылку — www.mail-tester.com

Сервисы и программы для рассылок

GroupMail — довольно мощный и удобный инструмент. Сложность лишь в том, что приходиться настраивать почтовый домен самостоятельно. И еще один минус нагрузка на сервер, при больших объемах писем. Рассылает не очень быстро (10 000 адресатов 2 часа).

Unisender — очень популярный сервис рассылок, имеет интеграцию во многих периферийных сервисах (Яндекс) и платформах (1С Битрикс). Рассылает очень быстро (20 000 адресатов 15 минут).

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Верстка HTML под рассылку
Переводы (.po .mo)
Рекомендации для васПереводы (.po .mo)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.