Pull to refresh
0
UniSender
Сервис email- и SMS-рассылок

Костыли при верстке рассылок

Reading time 3 min
Views 14K
Привет, %username%!

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

Как уже стало принятым в топиках о рассылках, привожу библиографию для тех, кто что-либо пропустил:

Gmail


Как уже писалось ранее, парсер Gmail имеет свойство подчеркивать изображения-ссылки. Лечится просто, отменой декорирования ссылки:

<a href="ссылка" style="text-decoration:none;" target="_blank"><img src="путь_к_картинке" border="0" width="ширина" height="высота" alt="описание"/></a>


Почта Mail.ru


Очень странный баг, но он имеет место быть. Заключается он в дублировании тегов BR в блоке по такому вот принципу. Если мы имеем конструкцию:
<span style="font-family:Arial; font-size:12px; color:#666666;">Lorem[br/]ipsum[br/]dolor[br/]sit amet</span>

то парсер это интерпретирует так:
<span style="font-family:Arial; font-size:12px; color:#666666;">Lorem[br/]ipsum[br/]dolor[br/]sit amet[br/][br/][br/]</span>

ну а лечить это мы будем так:

<div><span style="font-family:Arial; font-size:12px; color:#666666;">Lorem</span></div>
<div><span style="font-family:Arial; font-size:12px; color:#666666;">ipsum</span></div>
<div><span style="font-family:Arial; font-size:12px; color:#666666;">dolor</span></div>
<div><span style="font-family:Arial; font-size:12px; color:#666666;">sit amet</span></div>

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

Примечание: в кодах заменил скобки у тегов BR, потому что хабрапарсер съедает эти теги.

Yahoo Mail


Этот почтовик еще более загадочен, чем mail.ru. Парсер по неизвестному принципу выбирает некоторые ссылки в письме и преобразует их из:
<a href="ссылка" target="_blank" style="font-family:Arial; font-size:12px; color:#666666;">текст</a>

вот в такую вещь:
<a href="ссылка" target="_blank" style="font-family:Arial; font-size:12px; color:#666666;"><span class="yshortcuts">текст</span></a>

что приводит к тому, что ссылка оформляется не инлайновыми слитями, а стилями класса yshortcuts тега span. Рещение просто — можно нарушить правило вынесения стилей в head. В заголовке документа объявляем класс yshortcuts, и дублируем стили ссылки туда. Для особо невниматеьных повторюсь — класс присваевается тегу span, а не самой ссылке.

Яндекс почта


Проблема заключается в том, что все ссылки при наведении становятся красными. Наверное — фирменный стиль Яндекса. Стили в head не решают проблему. Костыля не нашел, но буду признателен тому, кто поделится решением.

И в комментах пользователь note показывает действительно рабочее решение проблемы.

Outlook Express


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

<table style="border-collapse:collapse;">...</table>

The Bat!


Сам лично не сталкивался, но до меня часто доходила информация, что старые версии Bat'a не хавают прозрачные .gif файлы. А точнее, просто, закрашивают прозрачные пиксели черным цветом. Как решение проблемы — использование гифов с заменением прозрачных пикселей цветом фона. Тоже самое касается однопиксельной .gif распорки — делаем ее не прозрачной, а цветом фона того места, где она вставляется в документ.

Вне формата


Если не указывать ширину и высоту изображений, то пользователь не увидит alt'ов на незагруженных картинках. К тому же соблюдение установленных размеров картинок не ломает верстку при отключении изображений.

Итог


С одной стороны, костыли порой бесят, но с другой, их не так уж и много, и соблюсти при верстке рассылки все вышеуказанное не составит огромного труда. Спасибо за внимание, и удачи в работе!
Tags:
Hubs:
If this publication inspired you and you want to support the author, do not hesitate to click on the button
+20
Comments 12
Comments Comments 12

Articles

Information

Website
www.unisender.com
Registered
Founded
Employees
51–100 employees
Location
Россия