0,0
рейтинг
21 января 2011 в 22:27

Разработка → С версткой почтовых рассылок все не так уж плохо

CSS*
И снова рад приветствовать хабражителей!

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

Не знаю как давно mail.ru решил плюнуть в душу ослу встать на путь истинный, но сегодня я, воспользовавшись такими сервисами, как pardot и webasyst, совершил тестовую рассылку на ящик mail.ru со следующим содержанием, которое соответствует рекомендациям моего предыдущего топика.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Заголовок</title> 
<table width="750" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse; "> 
	<tbody> 	
		<tr> 
			<td><img height="109" width="750" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=ZGVtb2NvbXBhbnktaHV0LnBuZw==" /></td> 
		</tr> 
		<tr> 
			<td> 
			<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-top-color: #cccccc; border-right-color: #cccccc; border-bottom-color: #cccccc; border-left-color: #cccccc; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; "> 
				<tbody> 
				<tr> 
				<td width="10" height="10"><img height="10" width="10" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=YmxhbmsuZ2lm" /></td> 
				<td /> 
				<td /> 
				</tr> 
				<tr> 
					<td /> 
					<td><span style="font-family: Arial; font-size: 12px; color: #404040; ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem I</span>
					</td> 
					<td /> 
				</tr>
				<tr><td colspan="3" height="20"><img height="20" width="20" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=YmxhbmsuZ2lm" /></td></tr>
				<tr> 
					<td /> 
					<td>
					<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
						<tr><td valign="top" align="center" style="width:30px;">•</td><td><span style="font-family: Arial; font-size: 12px; color: #404040; ">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</span></td></tr>
						<tr><td valign="top" height="5"><img height="5" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=YmxhbmsuZ2lm"></td><td/></tr>
						<tr><td valign="top" align="center" style="width:30px;">•</td><td><span style="font-family: Arial; font-size: 12px; color: #404040; ">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</span></td></tr>
						<tr><td valign="top" height="5"><img height="5" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=YmxhbmsuZ2lm"></td><td/></tr>
						<tr><td valign="top" align="center" style="width:30px;">•</td><td><span style="font-family: Arial; font-size: 12px; color: #404040; ">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</span></td></tr>
					</table>
					</td> 
					<td /> 
				</tr>
				<tr>
					<td colspan="3" height="20"><img height="20" width="20" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=YmxhbmsuZ2lm" /></td>
				</tr>
				<tr> 
					<td /> 
					<td><span style="font-family: Arial; font-size: 12px; color: #404040; ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem I</span>
					</td> 
					<td /> 
				</tr>
				<tr> 
					<td /> 
					<td /> 
					<td width="10" height="10"><img height="10" width="10" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=YmxhbmsuZ2lm" /> </td>
				</tr> 
				</tbody> 
			</table> 
			</td> 
		</tr> 
		<tr> 
			<td><img height="63" width="750" src="http://dudeonthehorse.webasyst.net/common/html/scripts/getimage.php?user=QUsyMTUw&msg=101&file=ZGVtb2NvbXBhbnktZm9vdGVyLnBuZw==" /></td> 
		</tr> 
		<tr>
			<td align="center"><span style="font-family:Arial; font-size:10px; color:#0077c0;"><a href="#" style="font-family:Arial; font-size:10px; color:#0077c0;">Unsubscribe</a></span></td>
		</tr>
	</tbody> 
</table>


В результате мне в ящик падает прекрасное письмецо вида:

Ура, товарищи! Mail.ru заботится о нервах верстальщиков!

P.S. Не забывайте ставить ссылку на отписку от рассылки. Это сильно снизит риск попадания письма в спам.
UPD: Так же стоит заметить, наличие в письме версии plain/text(без картинок и стилей) так же снижает риск попадания в спам, но не все сервисы рассылки это поддерживают.
Артур Кох @dudeonthehorse
карма
71,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (21)

  • +1
    Еще бы оно нормально поддерживало буквы украинского языка (і, є, ґ) — можно было бы назвать терпимой почтой…
    • +2
      Сущности вам в помощь. Используйте юникод и экранируйте все символы кроме латиницы и кириллицы.
      • 0
        Это конечно хорошо, прикручивать костыли к почте, но я уж лучше вообще такой почтой пользоваться перестану (учитывая отсутствие там IMAP и еще некоторые недочеты)
        • 0
          Вы то может быть и перестанете, а вот куча людей(ваших клиентов) навряд ли. Да и не назвал бы это таким уж костылем в виду того, что не только с украинским языком такие беды. Немецкие умляуты, французские, испанские и итальянские символы так же нуждаются в экранировании, даже при использовании юникода.
          • +4
            Мдя… Почта на KOI-8 это печально.
          • 0
            Зачем при использовании юникода экранировать умляуты и иже с ними?
            Какой тогда вообще смысл использовать юникод для языков с латинской графикой?
            • 0
              Использование именно юникода не критично, но он поддерживает кириллицу и латиницу, а экранирование остального, как это не печально — костыль, перестраховка.
  • +2
    Хм. Немного странная вёрстка. А теперь попробуйте запустить её в веб-интерфейсе яху, гмейла или хотя бы стандартного сквирл-мейл :) Вся табуляция появится отдельными символами (у мыла.ру также было, но видимо пофиксили, за что им спасибо). Поэтому ещё один нюанс, который я чётко уяснил для себя — никакой табуляции в веб-письмах. Да и переноса строк по возможности как можно меньше. Мало ли, какая система как распознает — все не перепроверишь, а хочется делать «охват» по максимуму :)
    • +1
      Гмыло и Яху — все ок! Проблем с табуляций уже давным давно не наблюдается. Тестировалось на большом списке почтовиков/вебсервисов.
      • 0
        С футером в Яху все хорошо — неудачно скрин срезал.
      • 0
        шагнул всё-таки прогресс! :) Ну искренне рад за это )) спасибо за информацию!
  • 0
    Вот смотрю у Вас письмо в UTF-8 кодировке, мне интересно Тема письма и поле От кого тоже в UTF-8?
    И как mail.ru с ними работает?
    • 0
      utf8 (без дефиса) не понимает, а в остальном нормально работает.
    • 0
      Как правило сабжект пишется в виде:
      =?UTF-8?B?utf-8 base64 text?=
      и всё прекрасно распознается
    • 0
      Не в курсе принципа отправки «сабжа» и «от_кого», но при использовании вебассиста и пардота проблем не наблюдалось при рассылках на 7 языках.
  • 0
    А в почтовых программах типа the bat или ms outlook письмо будет так же отображаться?
    • +1
      Да, но все же перед рассылкой всегда нужно проводить массовый тест на кроссмейлерность.
  • 0
    на сколько мне известно, парсер mail.ru в любом случае вырезает стили, в которых есть position
    • 0
      От position нужно вовсе отказаться при верстке не только для mail.ru.
  • 0
    Прекрасная статья спасибо! Возник вопрос по ширине все рассылки, об этом как то не сказано. Так какова оптимальная ширина для рассылки? что бы не было скроллинга в почтовиках на 1024на 768? я беру за правило максимальную ширину 650 пикселей с ней всё выглядит аккуратно.

    У вас в постах ширина в 800 и 750 пикселей.

    Как быть?
    • 0
      железных правил нет. я, чаще всего использую макеты 600px(для коротких) и 750px(для более длинных писем) — вполне нормально. на нетбуках и айпадах скролла нет.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.