Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга

Верстка писем: инсайды. Часть 2

Ознакомьтесь с первой частью статьи.

Адаптивная верстка писем

При создании профессиональных емейл-рассылок следует учитывать особенности своей аудитории. Как показывает статистика, чем она моложе, тем больший процент открытий писем осуществляется с мобильных устройств. В среднем, около 25-30% всех подписчиков используют мобильные устройства для просмотра своей корреспонденции (данный показатель может сильно варьироваться в зависимости от специфики бизнеса).

Чтобы не быть голословным, приведу показатели компании «Техносила» (tehnosila.ru) на начало 2014 года:

Отображение письма на разных устройствах

Использование разных типов устройств для просмотра сообщений подписчиками ("Техносила", 2014 г.)

Для начала следует отметить, как себя ведут обычные письма на экранах мобильников:

  • на устройствах под управлением iOS все письмо масштабируется, чтобы оно полностью уместилось на экран (поэтому письма становятся нечитабельным и требуют ручного масштабирования);
  • устройства же на Android отображают письмо в масштабе 100%, в связи с чем мы видим лишь небольшой фрагмент письма и не можем в полной мере оценить ни дизайна, ни контента, что значительно снижает процент кликов (CTR).

Многие пользователи отказываются взаимодействовать с неадаптивным письмом, открывая его на своем мобильном телефоне. То есть, не учитывая специфику аудитории, вы можете терять до 30% своей прибыли с емейл-канала.

Отображение письма с неадаптивной версткой на экране мобильного телефона:

Отображение письма с неадаптивной версткой на экране смартфона

Отображение письма с адаптивной версткой на экране мобильного телефона:

Отображение письма с адаптивной версткой на экране смартфона

Адаптивные письма обеспечивают корректное отображение на любых устройствах, тем самым повышая лояльность подписчиков. Мы можем сделать так, чтобы кнопки CTA (call to action) были видны на первом экране без необходимости прокрутки, тем самым повысив CTR. Из недостатков можно отметить лишь то, что на разработку дизайна и верстку адаптивных писем требуется больше времени, то есть выше их себестоимость.

Виды мобильной адаптации

Существует несколько подходов адаптации писем для мобильных устройств:

  • мобильная верстка;
  • резиновая верстка;
  • применение медиазапросов;
  • комбинирование нескольких подходов.

Мобильная верстка

Данный подход применяется только если порядка 70 % всех открытий производится с мобильных устройств, что на данный момент не характерно для российского рынка. От обычной (не адаптивной) верстки он отличается только шириной макета – 320 px. На экране мобильного телефона такое письмо будет выглядеть отлично, стоимость его разработки не будет превышать стоимости обычного, но вот на мониторе компьютера оно будет выглядеть по меньшей мере странно =)

Отображение письма с мобильной версткой на экране десктопа

Резиновая верстка

Подход почти противоположен вышеизложенному. В «чистом» виде практически не применяется. Состоит он в следующем: используются лишь относительные размеры всех блоков и изображений (в процентах). За счет чего письмо занимает всю площадь экрана, вне зависимости от его размера. Данный подход имеет ряд ограничений по структуре расположения объектов.

Отображение письма с резиновой версткой

Применение медиазапросов

Как это видно из названия, основан на использовании медиазапросов CSS3. Обеспечивает наилучшее отображение письма на экране любого размера, позволяет менять параметры отображения текста, расположения блоков и т.д. Основной недостаток данного подхода в том, что адаптироваться письма будут только в приложениях, поддерживающих медиазапросы — это стандартное приложение на iOS «Mail» и стандартное приложение на Android «Почта». Пользователи мобильных приложений Gmail, Mail.ru, Yandex и т.д. увидят простое (не адаптивное) письмо.

Отображение на мониторе компьютера, приложении Mail на iOS и в приложении Gmail на Android:

Отображение письма при верстке с использованием медиазапросов

Комбинирование нескольких подходов

Подход использования медиазапросов несомненно хорош тем, что позволяет обеспечить наилучшее отображение, но, к сожалению, дает небольшой охват мобильной аудитории. Поэтому я предлагаю взять на вооружение сразу несколько подходов, а именно — резиновая верстка + применение медиазапросов. Такое сочетание обеспечивает хорошее отображение письма на любых устройствах и в любых приложениях, вне зависимости от поддержки медиазапросов. В дальнейшем буду описывать именно этот подход.

Разработка общего макета адаптивного письма

Необходимо понимать, что наше письмо должно корректно отображаться как на мобильных устройствах, так и в десктопных почтовых клиентах и веб-интерфейсах. Поэтому к тем приемам и ограничениям, что были описаны ранее при адаптивной верстке добавляются новые. Во-первых, ширина письма: будем ориентироваться на ширину мобильного телефона 320 px — подавляющее большинство устройств этого класса имеет именно такую ширину. Поэтому для перестроения, например, двух колонок (при просмотре на компьютере) в одну (при просмотре на телефоне) оптимальной шириной будет 640 px, а вернее чуть меньше 600 px (с учетом отступов в некоторых мобильных почтовых клиентах). Это лишь рекомендуемая ширина письма, а не какое-то жесткое ограничение, можно сделать как больше, так и меньше — главное помнить, что максимальная ширина блока, который может поместиться на экран, 320 px. Итак, общий шаблон адаптивного письма будет иметь вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title> - </title>
<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (min-device-width: 600px) {
	.table600{
		width:600px !important;
	}
}
@media only screen and (max-device-width: 600px), only screen and (max-width: 600px){ 
	*[class="table600"]{
		width: 100% !important;
	}
}
.table600{
	width:600px;
}
</style>
</head>

<body style="padding:0px;margin:0px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" bgcolor="#ffffff">


<!--[if gte mso 9]>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<![endif]-->

<table border="0" cellspacing="0" cellpadding="0" class="table600" width="100%" style="max-width: 600px;min-width:320px;">
	<tr><td>
	контент
	</td></tr>
</table>
<!--[if gte mso 9]>
</td></tr>
</table>
<![endif]-->
 
</td></tr>
</table>
</body>
</html>

Тут нужно пояснить: некоторые мобильные приложения, в том числе стандартное Mail на iOS по умолчанию увеличивают шрифт в письме. Чтобы этого избежать, необходимо добавить стиль:

html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;.

Чтобы добиться эффекта «резиновости», но при этом ограничить максимальную ширину задается таблица с ограничением максимальной ширины, однако Outlook игнорирует данный параметр, поэтому специально для него с помощью условных комментариев задана еще одна таблица с точным описанием ширины. А чтобы избежать проблем в Outlook 2003 и ряде других почтовых клиентов, необходимо прописать ширину родительской таблицы через класс, описанный в шапке. Также можно указать минимальную ширину письма.

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

Изображения

Retina-экраны, вернее сказать, экраны с повышенной плотностью пикселей характерны именно для мобильных устройств, поэтому ваше письмо может выглядеть немного размытым на экране, например, iPhone. Чтобы этого избежать, используйте изображения в два раза больших размеров. Например, вместо иконки 40×40 используйте иконку 80×80, прописав размеры как 40×40. Подобный «блур»-эффект может наблюдаться именно на иконках (социальные сети, логотип и т.д.). На фотографических изображениях обычно этот эффект слабо заметен. Эффекта плавающего изображения (чтобы текст обтекал изображение справа или слева) можно добиться следующим образом:

<table width="104" border="0" cellspacing="0" align="left" cellpadding="0" style="float:left;mso-table-rspace:5pt;border-collapse:collapse;">
    <tr><td height="95" width="104" align="left" valign="top">
        <a href="#" target="_blank"><img src="img/image.png" width="93" height="89" alt="" border="0" style="display: block;" /></a>
    </td></tr>
</table>

Условные комментарии Outlook

Используя условные комментарии, можно заставить почтовый клиент Outlook 2007-2013 отображать или не отображать определенный фрагмент кода. Делается это следующим образом:

<!--[if gte mso 9]>
	Код, только для Outlook 2007-2013
<![endif]-->

Или же наоборот — фрагмент кода, который Outlook проигнорирует:

<!--[if !mso]><!-->
Код не для Outlook 2007-2013 
<!--<![endif]-->

Приемы при создании адаптивного письма

Для обеспечения кроссплатформенности приходится использовать различные приемы, на которых я бы хотел остановиться отдельно.

Фланговая адаптация

Часто бывают ситуации, когда информационная составляющая на баннере сосредоточена в одной из его частей — справа или слева.

Смещение полезной информации на баннере

При этом, если его масштабировать целиком, текст станет слишком мелким и нечитаемым. В такой ситуации удобно «отрезать» ненужный фрагмент, отображая на мобильном устройстве лишь основную часть.

Фланговая адаптация при верстке писем

<style type="text/css">
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px){ 
	.mob_hidden{ display:none; } 
	.mob_100{ width:100% !important; float:none !important; } 
} 
</style>
<!-- creative --> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
   <tr><td class="mob_100" width="60%" align="right" bgcolor="#ffffff"> 
      <img src="img/creative1_1.jpg" width="100%" alt="" border="0" style="display: block;" /></td>
   <td class="mob_hidden" width="40%" align="left" bgcolor="#ffffff">
      <img src="img/creative1_2.jpg" width="100%" alt="" border="0" style="display: block;" /></td></tr>
</table> 
<!-- creative END -->

*Стили прописываются вместе с остальными.

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

Блочная адаптация

Блочная адаптация при верстке писем

Перестроение блоков на мобильных устройствах друг под друга реализуется следующим образом:

<!--[if gte mso 9]> 
<table width="600" border="0" cellspacing="0" cellpadding="0"> 
<tr><td> <![endif]--> 
Блок1 
<!--[if gte mso 9]> 
</td><td> 
<![endif]-->
Блок2 
<!--[if gte mso 9]> 
</td></tr> 
</table>
<![endif]-->

Где каждый из блоков описывается следующей структурой:

<div style="float: left; display: inline-block; width:150px;"> 
<table width="150" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">       
   <tr><td align="left" valign="middle"> 
         Содержимое блока
    </td></tr>
</table></div>

Плавающие блоки не поддерживает Outlook 2007-2013, поэтому они помещаются в табличную структуру, которая строится в условных комментариях. Свойство display:inline-block используется для корректного отображения структуры в веб-интерфейсе Outlook.com, который вырезает свойство float.

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

Адаптивная верстка письма

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title> - </title>
<style type="text/css">
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (min-device-width: 700px) {
	.table700{
		width:700px !important;
	}
}
@media only screen and (max-device-width: 700px), only screen and (max-width: 700px) { 
	table[class="table700"]{
		width: 100% !important;
	}
	div[class="mob_100"]{
		width:100% !important;
	}
	table[class="mob_100"]{
		width:100% !important;
	}
	td[class="mob_center"]{
		text-align: center !important;
	}
	div[class="mob_center"]{
		text-align: center !important;
	}
	div[class="mob_center_bl"]{
		float:none !important;
		display: block !important;
		margin: 0 auto;
	}	
	.iage_footer a{
		text-decoration:none;
		color:#929ca8;
	}
}
.table700{
	width:700px !important;
}
</style>
</head>

<body style="padding:0px;margin:0px;">
<div id="mailsub" class="notification" align="center">

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;"><tr><td align="center" bgcolor="#282f37">


<!--[if gte mso 10]>
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<![endif]-->
<table border="0" cellspacing="0" cellpadding="0" class="table700" width="100%" style="max-width: 700px;min-width:320px;">
<tr><td align="center"><div style="min-width:300px;">

<table border="0" cellspacing="0" cellpadding="0" width="86%" style="min-width:300px;">
	<!--preheader -->
	<tr><td>
	<!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<tr><td align="left"><!-- 

			Item --><div class="mob_100" style="float: left; display: inline-block; width:75%;min-width:270px;">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
					<tr><td align="left" valign="middle">
						
						<table width="100%" border="0" cellspacing="0" cellpadding="0" >
							<tr><td class="mob_center" align="left" valign="top">
								<font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#ffffff" style="font-size:13px;">
								<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;">
									iAGE
								</span></font>
							</td></tr>
						</table>
						
					</td></tr>
				</table></div><!-- Item END--><!--[if gte mso 10]>
				</td>
				<td >
			<![endif]--><!-- 

			Item --><div class="mob_center_bl" style="float: right; display: inline-block; width:25%;min-width:85px;">
				<table width="85" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;">
					<tr><td align="left" valign="middle">
						
						<table width="85" border="0" cellspacing="0" cellpadding="0" >
							<tr><td class="mob_center" align="right" valign="top">
								<a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;text-decoration:underline;">
								<font face="Tahoma, Arial, Helvetica, sans-serif" style="font-size:13px;" size="2" color="#ffffff">
									Отписаться
								</font></a>
							</td></tr>
						</table>
					</td></tr>
				</table></div><!-- Item END--></td>
		</tr>
	</table>
	<!-- padding --><div style="height: 8px; line-height:8px; font-size:6px;">&nbsp;</div>
	</td></tr>
	<!--preheader END-->
	<!--header -->
	<tr><td align="center" bgcolor="#ffffff" style="border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#282f37;">
	<!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
	<table width="90%" border="0" cellspacing="0" cellpadding="0">
		<tr><td align="left"  valign="top"><!-- 

			Item --><div class="mob_center_bl" style="float: left; vertical-align:top;display: inline-block; width:55%;min-width:210px;">
				<table class="mob_center" width="210" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
					<tr><td align="left" valign="middle">
						<!-- padding --><div style="height: 15px; line-height:15px; font-size:13px;">&nbsp;</div>
						<div class="mob_center_bl" style="width:210px;">
						<table width="210" border="0" cellspacing="0" cellpadding="0" >
							<tr><td align="left" valign="top">
								<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 18px;"  >
								<font face="Arial, Helvetica, sans-serif" style="font-size: 18px;" size="4" color="#596167">
								<img src="img/logo.png" width="210" height="45" alt="iAge" border="0" style="display: block;" /></font></a>
							</td></tr>
						</table>
						</div>
						<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
					</td></tr>
				</table></div><!-- Item END--><!--[if gte mso 10]>
				</td>
				<td align="right" valign="top">
			<![endif]--><!-- 

			Item --><div class="mob_center_bl" style="float: right; vertical-align:top;display: inline-block; width:240px;">
				<table width="240" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;">
					<tr><td align="right" valign="middle">
						
						<table width="100%" border="0" cellspacing="0" cellpadding="0" >
							<tr><td class="mob_center" align="right" height="33" valign="top" style="line-height:14px;">
								<font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#282f37" style="font-size:12px;">
								<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#282f37;">
									<a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">О компании</font></a>
									&nbsp;&nbsp;
									<a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">События</font></a>
									&nbsp;&nbsp;
									<a href="#" target="_blank" style="color:#282f37;"><font color="#282f37">Проекты</font></a>
								</span></font>
							</td></tr>
							<tr><td align="right">
								<!--social -->
								<div class="mob_center_bl" style="width:208px;">
								<table border="0" cellspacing="0" cellpadding="0">
									<tr><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc1.png" width="36" height="36" alt="f" border="0" style="display: block;" /></font></a>
									</td><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc2.png" width="36" height="36" alt="t" border="0" style="display: block;" /></font></a>
									</td><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc3.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></font></a>
									</td><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc4.png" width="36" height="36" alt="in" border="0" style="display: block;" /></font></a>
									</td><td width="36" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc5.png" width="36" height="36" alt="s" border="0" style="display: block;" /></font></a>
									</td></tr>
								</table>
								</div>
								<!--social END-->
							</td></tr>
						</table>
					</td></tr>
				</table></div><!-- Item END--></td>
		</tr>
	</table>
	<!-- padding --><div style="height: 12px; line-height:12px; font-size:10px;">&nbsp;</div>
	</td></tr>
	<!--header END-->
	<!--content -->
	<tr><td align="center" bgcolor="#ffffff" style="border-top-width:1px;border-top-style:solid;border-top-color:#ffffff;">
		<!--sep -->
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr><td height="14" bgcolor="#f27071" style="height:14px;line-height:14px;font-size:10px;">&nbsp;</td></tr>
		</table>
		<!--sep END-->
		
		<table width="82%" border="0" cellspacing="0" cellpadding="0">
			<tr><td align="left">
				<!-- padding --><div style="height: 45px; line-height:45px; font-size:40px;">&nbsp;</div>
				<!--hello -->
				<div style="line-height:24px;">
					<font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
					<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
						<strong>Добрый день, Анна!</strong><br /><br />
						Ваш экземпляр <strong>&laquo;Programmatic: теория с примерами&raquo;</strong> в PDF-формате доступен для скачивания.
					</span></font>
				</div>
				<!--hello END-->
				<!-- padding --><div style="height: 25px; line-height:25px; font-size:23px;">&nbsp;</div>
				
				<!--item -->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr><td><!-- 

					Item --><div class="mob_center_bl" style="float: left; display: inline-block; width:210px;">
						<table width="210" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
							<tr><td align="left" valign="middle">
							<div style="">
								<table width="100%" border="0" cellspacing="0" cellpadding="0" >
									<tr><td align="left" valign="top">
										<div class="mob_center_bl" style="width:180px;"><img src="img/ico1.png" width="180" height="180" alt="" border="0" style="display: block;" /></div>
									</td></tr>
								</table>
								<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
							</div></td></tr>
						</table></div><!-- Item END--><!--[if gte mso 10]>
						</td>
						<td >
					<![endif]--><!-- 

					Item --><div class="mob_100" style="float: left; display: inline-block; width:230px;">
						<table class="mob_100" width="230" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
							<tr><td align="left" valign="middle">
							<div style="">
								<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
								<table width="100%" border="0" cellspacing="0" cellpadding="0" >
									<tr><td align="left" valign="top" style="line-height:24px;">
										<font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
										<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
											Персональная для каждого пользователя коммуникация, программируемый маркетинг, процесс настройки кампании и другие трюки.
										</span></font>
										<!-- padding --><div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</div>
										<!--Button Begin-->
										<table border="0" cellspacing="0" cellpadding="0">
											<tr><td align="center" width="217" height="39" bgcolor="#f27071" style="line-height: 39px;">
												<a href="#" target="_blank" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;text-decoration:none;" >
												<font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff">
												<img src="img/button.png" width="217" height="39" alt="Получить PDF" border="0" style="display: block;" /></font></a>
											</td></tr>
										</table>
										<!--Button End-->
									</td></tr>
								</table>
								
							</div></td></tr>
						</table></div><!-- Item END--></td>
					</tr>
				</table>
				<!--item END-->
				
				<!-- padding --><div style="height: 50px; line-height:50px; font-size:45px;">&nbsp;</div>	
			</td></tr>
		</table>
		
		<!--sep -->
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr><td height="10" style="line-height:10px;font-size:8px;border-top-width:2px;border-top-style:solid;border-top-color:#282f37;">&nbsp;</td></tr>
		</table>
		<!--sep END-->
		<!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>	
		<table width="82%" border="0" cellspacing="0" cellpadding="0">
			<tr><td align="left">		
				<!--item -->
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr><td>
						<table class="mob_center_bl" width="200" border="0" cellspacing="0" align="right" cellpadding="0" style="float:right;mso-table-rspace:5pt;border-collapse:collapse;">
							<tr><td height="200" align="right" valign="top">
								<div class="mob_center_bl" style="width:180px;"><img src="img/ico2.jpg" width="180" height="180" alt="" border="0" style="display: block;" /></div>
							</td></tr>
						</table>
						
						<div style="line-height:24px;">
							<font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
							<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
								Спасибо за проявленный интерес к нашей компании!<br /><br />Хотите быть в курсе последних событий компании iAGE, получать от нас интересные материалы, статьи и презентации?<br />Подпишитесь на нашу рассылку!
							</span></font>
							<div style="height: 26px; line-height:26px; font-size:23px;">&nbsp;</div>
							<table border="0" cellspacing="0" cellpadding="0">
								<tr><td align="center" width="217" height="39" bgcolor="#f27071" style="line-height: 39px;">
									<a href="#" target="_blank" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 16px;text-decoration:none;" >
									<font face="Arial, Helvetica, sans-serif" size="3" color="#ffffff">
									<img src="img/button1.png" width="217" height="39" alt="Да, я с вами!" border="0" style="display: block;" /></font></a>
								</td></tr>
							</table>
						</div>
						</td>
					</tr>
				</table>
				<!--item END-->	
				
				<!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>	
				
				<div style="line-height:20px;">
					<font face="Tahoma, Arial, Helvetica, sans-serif" size="3" color="#282f37" style="font-size:16px;">
					<em style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px; color:#282f37;">
						Ваш iAGE
					</em></font>
				</div>
				<!-- padding --><div style="height: 45px; line-height:45px; font-size:40px;">&nbsp;</div>		
			</td></tr>
		</table>
	</td></tr>
	<!--content END-->
	<!--footer -->
	<tr><td class="iage_footer" align="center" bgcolor="#282f37">
		<!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>	
		
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr><td align="left" valign="top"><!-- 

				Item --><div class="mob_100" style="float: left; vertical-align:top;display: inline-block; width:65%;min-width:280px;">
					<table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;">
						<tr><td align="left" valign="middle">

							
							<table width="100%" border="0" cellspacing="0" cellpadding="0" >
								<tr><td class="mob_center" align="left" valign="top" style="line-height:15px;">
									<font face="Tahoma, Arial, Helvetica, sans-serif" size="2" color="#929ca8" style="font-size:13px;">
									<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#929ca8;">
										&copy; ООО &laquo;АйЭйдж&raquo; 2003 - 2014 All rights reserved.<br />
										<a href="http://www.iage.net" target="_blank" style="color:#929ca8;text-decoration:none;"><font color="#929ca8">www.iage.net</font></a><br /><br />
										127051, Москва, ул. Трубная, д. 21,<br />
										тел. +7(495) 649-4219&nbsp;390037<br /><br />
										г. Рязань, ул. Советской армии, д. 19, корп.2, тел.<br />+7(4912)&nbsp;901-002
									</span></font>
									<!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
								</td></tr>
							</table>
							
						</td></tr>
					</table></div><!-- Item END--><!--[if gte mso 10]>
					</td>
					<td valign="top">
				<![endif]--><!-- 

				Item --><div class="mob_center_bl" style="float: right; vertical-align:top;display: inline-block; width:208px;">
					<table width="208" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;">
						<tr><td align="left" valign="middle">
							<table width="100%" border="0" cellspacing="0" cellpadding="0" >
								<tr><td align="right" valign="top">
								<!--social -->
								<table border="0" cellspacing="0" cellpadding="0">
									<tr><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc6.png" width="36" height="36" alt="f" border="0" style="display: block;" /></font></a>
									</td><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc7.png" width="36" height="36" alt="t" border="0" style="display: block;" /></font></a>
									</td><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc8.png" width="36" height="36" alt="vk" border="0" style="display: block;" /></font></a>
									</td><td width="43" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc9.png" width="36" height="36" alt="in" border="0" style="display: block;" /></font></a>
									</td><td width="36" align="left" style="line-height:36px;">
										<a href="#" target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"  >
										<font face="Arial, Helvetica, sans-serif" size="2" color="#596167">
										<img src="img/soc10.png" width="36" height="36" alt="s" border="0" style="display: block;" /></font></a>
									</td></tr>
								</table>
								<!--social END-->
								<!-- padding --><div style="height: 40px; line-height:40px; font-size:36px;">&nbsp;</div>	
								
								<div class="mob_center" style="line-height:15px;">
									<a href="#" target="_blank" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;text-decoration:underline;">
									<font face="Tahoma, Arial, Helvetica, sans-serif" style="font-size:13px;" size="2" color="#ffffff">
										Отписаться
									</font></a>
								</div>
								
								</td></tr>
							</table>
							
						</td></tr>
					</table></div><!-- Item END--></td>
					
			</tr>
		</table>
		
		<!-- padding --><div style="height: 30px; line-height:30px; font-size:28px;">&nbsp;</div>	
	</td></tr>
	<!--footer END-->
</table>

</div></td></tr>
</table>
<!--[if gte mso 10]>
</td></tr>
</table>
<![endif]-->
 
</td></tr>
</table>
			
</div> 
</body>
</html>

Тестирование

Существуют отличные инструменты для предварительного просмотра емейлов на разных платформах, но самым качественным методом по-прежнему остается ручная проверка отображения писем на основных емейл-платформах. Я рекомендую проверять отображение в наиболее популярных веб-интерфейсах (Mail.ru , Yandex.ru, Gmail.com, Rambler.ru), а также проверять качество отображения писем в Outlook. Если верстка адаптивная, то необходимо проверить отображение в стандартных приложениях «Mail» на iOS и «Почта» на Android, а также в приложении Gmail.

Ознакомьтесь с первой частью статьи.

Поделиться статьёй:
Ac
Антон Чирков
Антон Чирков
Руководитель отдела разработки, EMAILMATRIX
Все рецепты автора
Комментарии