Сервис Email- и SMS-рассылок
42,10
рейтинг
22 марта 2011 в 14:03

Разработка → Костыли при верстке рассылок

Привет, %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'ов на незагруженных картинках. К тому же соблюдение установленных размеров картинок не ломает верстку при отключении изображений.

Итог


С одной стороны, костыли порой бесят, но с другой, их не так уж и много, и соблюсти при верстке рассылки все вышеуказанное не составит огромного труда. Спасибо за внимание, и удачи в работе!
Автор: @dudeonthehorse
UniSender
рейтинг 42,10
Сервис Email- и SMS-рассылок
Реклама помогает поддерживать и развивать наши сервисы

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

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

  • –7
    В некоторых странах спам наказуем!
    • +2
      Можно ведь не только спам рассылать, но и какие-нибудь корпоративные рассылки устраивать, или для подписчиков сайта.

      Честно — до этого момента игнорировал темы относительно верстки почтовых рассылок, но сейчас заглянул — есть интересные моменты относительно этих самых «костылей» и причин возникновения необходимости их использовать.
    • 0
      Жаль что это нельзя сказать про троллинг
  • 0
    Было бы чудесно, если бы вы сделали информационный проект, в котором изложили бы опыт, описанный во всех предыдущих постах.

    Можно и рекламу туда повесить, чтобы материальная эффективность была
    • 0
      Кое что на основе моих статей планируется. Об этом будет несколько позже.
  • 0
    интересные и полезные наблюдения!
    спасибо, пойду читать предыдущие посты
  • 0
    Огромное Вам спасибо за всю серию статей! Такого объема материала по теме нигде нет, пишите еще!
    • 0
      Спасибо, напишу.
  • 0
    Яндекс почта

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

    <a target="_blank" style="color:#ffffff !important;" href="#"><span style="color:#ffffff !important;">Текст</span></a>
    • 0
      Благодарю, добавил в пост.
  • 0
    Большое спасибо.
  • 0
    Классный пост всё по существу без воды. В будущем буду работать с этими вещами очень пригодится автору спасибо.

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

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