Pull to refresh

Верстка почтовых рассылок: взгляд изнутри

CSS *
Tutorial
И снова здравствуйте!

На сколько я могу судить, мой дебютный топик о верстке рассылок был полезен большому количеству хабровчан, и в этом я хотел бы не просто привести список правил и рекомендаций, а рассказать «что? зачем? и почему?». Какие либо моменты я могу опустить, но это лишь потому, что они были четко описаны в предыдущем топике.

Прежде всего хотелось бы заострить внимание на одном из персонажей, который часто употребляется в топике — это «различные веб-интерфейсы и почтовые клиенты». Немного нудно каждый раз повторять эту конструкцию слов, и мне кажется, что будет проще дать этому одно обобщающее слово. И так читая дальше воспринимайте слово «Демоны»(по другому их трудно назвать), как «различные веб-интерфейсы и почтовые клиенты». Ну что ж, начнем!

Сделайте мою голову стильной!


Как бы нам не хотелось, хедерные стили по прежнему под запретом. Демоны жадно ищут в коде письма конструкцию типа
<style>
//some css rules...
</style>
и нагло съедают ее, честно говорю, к экзорцисту не ходи. Нужно прописывать все стили inline для каждого отдельного элемента. Специально для злых языков, утверждающих, что демон mail.ru режет инлайновые стили привожу пруф.

Эта табличка меня не сильно полнит?


Это ни в коем случае не правило, а скорей рекомендация, которую я бы причислил к негласному стандарту: для основной таблицы, которая является главной конструкцией письма устанавливайте значения ширины в 600 и 750 пикселей. Меньшее значение предусмотрено для небольших открыток подписчикам, большее же по ширине письмецо несет в себе много текста(ну или что вы там шлете своему клиенту).

Нулевой коллапс — спасение!


Случай с коллапсом более частный, нежели другие. Коллапсируйте и обнуляйте ваши таблицы! Для тех кто не понял, табличку надо оформлять так:
<table style="border-collapse:collapse;" cellpadding="0" cellspacing="0">
...
</table>
Обнуление необходимо для того, чтобы избежать казусов. Демоны такие демоны, что каждый из них считает правильным устанавливать свои значения отступов, причем не только для таблиц, но и для всех элементов. При чем, если вы установите значения отступов больше нуля, они просто могут не сработать или сработать не так.
Что касается частного случая с коллапсом, так эта мера просто необходима для уникального MS Outlook, который просто добавит однопиксельные отступы между всеми ячейками таблицы, что иногда вредит нашему отображению.

Ну не совсем 3.2


Как бы ни писалось в подобных статьях, что мы возвращаемся в средневековую эпоху HTML 3.2, нужно отметить, что стоит отказаться от использования тега font. Почему? Причины две: технический и человеческий фактор. Человеческий заключается в том, что зачастую верстун лишь верстает макет, и дальнейшая судьба его может быть и неизвестна. Почему то во многих компаниях решили, что провести рассылку может и просто манагер, но вот как он это сделает, они не подумали. Тут как раз и вытекает фактор технический. Многие системы организации почтовых рассылок имеют в своем репертуаре такую вещь, как визуальный редактор. Для чего он сделан? Для того, чтобы, простой манагер смог внести текстовые изменения в сверстанный макетик. Но разработчики визуальных редакторов(не все, но такие есть) тоже не слуги бога, они допустили одну оплошность — визуальный редактор может резать тег font, перебивая его на span. При этом конвертация атрибутов и стилей меняется с ужасным результатом! Поэтому только span с инлайновыми стилями.

Хочу цвет #ccc


Не выйдет! Демоны не жалуют такой формат цвета! Как для фона, так и для форматирования текста нужно указать #cccccc. Только полные шестизначные кодировки цвета. К тому же демоны слегка очевидны и принимают фактические значения цветов типа red, blue и т.д.

Демонам в школе не преподавали юникод


Ничего не поделаешь, такие уж они бездари. Нет, вы, конечно можете отправлять ваши письма в юникоде или в любой другой кодировке, поддерживающей кириллицу и латиницу. Дело в том, что некоторые демоны просто не принимают все символы юникода. Всякие умляуты, французские, испанские и итальянские символы, копирайты и трейдмарки надо экранировать в сущности. Тут всплывают недавно приводимые в пример визуальные редакторы. Многие из них, как раз тупо экранируют все что необходимо, за что им отдельное спасибо!

Удивительно, но факт


Всеми почитаемая и обожаемая гуглопочта(не смею называть ее интерфейс демоном) так же имеет свои недостатки в парсере. Если вы используете изображение в роли ссылки, вам необходимо обнулить border изображения(спасибо Кэпу), и в то же время установить для самой ссылки text-decoration:none;, иначе изображение(о, боги!) будет подчеркнуто как ссылка.

Демонический догмат


Догмы, как вы можете знать, вещи не опровержимые и не подлежат обсуждению и выяснению причин их существования, поэтому просто читайте и запоминайте:
  • Никаких фоновых изображений никогда и ни под каким предлогом
  • Никакого java-script
  • Напрочь забудьте об абсолютном позиционировании
  • Имитируйте абцазы и списки, как это описано в предыдущей статье
  • Устанавливайте target="_blank" для ссылок, дабы не открывать сайты в окне почтового демона.
  • Всегда! Запомните, всегда устанавливайте ссылку на отписку от рассылки в тело письма! Вам за это скажут спасибо нецелевые подписчики, и пожалеет спам-фильтр.

P.S. Топик не претендует на категорическую уникальность относительно первого поста, но я полагаю, какие то моменты я смог открыть для читателя с несколько иной стороны, а кому то, возможно понравится немного другая подача материала. Спасибо за внимание!
Tags: версткарассылкиcss3htmlhtml 3.2задротствопочтапочтовые рассылкиверстка почтовых рассылокэкзорцизм
Hubs: CSS
Total votes 102: ↑89 and ↓13 +76
Comments 23
Comments Comments 23

Popular right now

Top of the last 24 hours