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

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

    Итог


    С одной стороны, костыли порой бесят, но с другой, их не так уж и много, и соблюсти при верстке рассылки все вышеуказанное не составит огромного труда. Спасибо за внимание, и удачи в работе!
    UniSender 38,73
    Сервис Email- и SMS-рассылок
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

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

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

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

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

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

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

                Самое читаемое