Привет, %username%!
Я рад, что мои предыдушие топики о верстке рассылок оказались тебе полезны. Если я прав, то хотел бы рассказать еще и о костылях при верстке, которые были выявлены мною при сотрудничестве с коллегами из Unisender. Так же я позволю себе пару раз повториться, по той простой причине, что этот топик будет являть собой шпаргалку для костыльмейкера верстки рассылок. Велкам под кат.
Как уже стало принятым в топиках о рассылках, привожу библиографию для тех, кто что-либо пропустил:
Как уже писалось ранее, парсер Gmail имеет свойство подчеркивать изображения-ссылки. Лечится просто, отменой декорирования ссылки:
Очень странный баг, но он имеет место быть. Заключается он в дублировании тегов BR в блоке по такому вот принципу. Если мы имеем конструкцию:
то парсер это интерпретирует так:
ну а лечить это мы будем так:
и в этом случае дубляжа не произойдет, а перенос строк мы осуществляем за счет помещения каждой строки в отдельный блок.
Примечание: в кодах заменил скобки у тегов BR, потому что хабрапарсер съедает эти теги.
Этот почтовик еще более загадочен, чем mail.ru. Парсер по неизвестному принципу выбирает некоторые ссылки в письме и преобразует их из:
вот в такую вещь:
что приводит к тому, что ссылка оформляется не инлайновыми слитями, а стилями класса yshortcuts тега span. Рещение просто — можно нарушить правило вынесения стилей в head. В заголовке документа объявляем класс yshortcuts, и дублируем стили ссылки туда. Для особо невниматеьных повторюсь — класс присваевается тегу span, а не самой ссылке.
Проблема заключается в том, что все ссылки при наведении становятся красными. Наверное — фирменный стиль Яндекса. Стили в head не решают проблему. Костыля не нашел, но буду признателен тому, кто поделится решением.
И в комментах пользователь note показывает действительно рабочее решение проблемы.
Об этом я так же писал, но повторюсь, что нужно коллапсировать таблицы для избавления отступов между ячейками, что может неблагоприятно сказаться на внешнем виде письма при обилии цветов или графики. Конструкция проста:
Сам лично не сталкивался, но до меня часто доходила информация, что старые версии Bat'a не хавают прозрачные .gif файлы. А точнее, просто, закрашивают прозрачные пиксели черным цветом. Как решение проблемы — использование гифов с заменением прозрачных пикселей цветом фона. Тоже самое касается однопиксельной .gif распорки — делаем ее не прозрачной, а цветом фона того места, где она вставляется в документ.
Если не указывать ширину и высоту изображений, то пользователь не увидит alt'ов на незагруженных картинках. К тому же соблюдение установленных размеров картинок не ломает верстку при отключении изображений.
С одной стороны, костыли порой бесят, но с другой, их не так уж и много, и соблюсти при верстке рассылки все вышеуказанное не составит огромного труда. Спасибо за внимание, и удачи в работе!
Я рад, что мои предыдушие топики о верстке рассылок оказались тебе полезны. Если я прав, то хотел бы рассказать еще и о костылях при верстке, которые были выявлены мною при сотрудничестве с коллегами из Unisender. Так же я позволю себе пару раз повториться, по той простой причине, что этот топик будет являть собой шпаргалку для костыльмейкера верстки рассылок. Велкам под кат.
Как уже стало принятым в топиках о рассылках, привожу библиографию для тех, кто что-либо пропустил:
- Верстка почтовых рассылок
- С версткой почтовых рассылок все не так уж плохо
- Верстка почтовых рассылок: взгляд изнутри
- Верстка почтовых рассылок: разбор полетов
- Верстка e-mail рассылок — «подводные камни». Часть первая. Картинки
- Верстка e-mail рассылок — «подводные камни». Часть вторая
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'ов на незагруженных картинках. К тому же соблюдение установленных размеров картинок не ломает верстку при отключении изображений.
Итог
С одной стороны, костыли порой бесят, но с другой, их не так уж и много, и соблюсти при верстке рассылки все вышеуказанное не составит огромного труда. Спасибо за внимание, и удачи в работе!