0,0
рейтинг
20 февраля 2011 в 09:14

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

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

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

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

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


Как бы нам не хотелось, хедерные стили по прежнему под запретом. Демоны жадно ищут в коде письма конструкцию типа
<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. Топик не претендует на категорическую уникальность относительно первого поста, но я полагаю, какие то моменты я смог открыть для читателя с несколько иной стороны, а кому то, возможно понравится немного другая подача материала. Спасибо за внимание!
Артур Кох @dudeonthehorse
карма
72,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

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

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

  • +6
    Молодец, хорошая подача :) демонический догмат полезен всем
  • +2
    отдельное спасибо Вам, а да поджарят на костре любителей почтовика БАТ!, и тех кто пользуеться и те кто создал этого демона!
    • 0
      На всех Демонов найдется изгоняющий верстун-экзорцист :)
      • –1
        бат на корню это срезает, делая html как вложение ((((((
        • 0
          Когда это было? за последние пол года ничего такого не наблюдаю.
          • 0
            вот недавно. как месяц примерно. какая версия я не знаю у меня в траке написали пользователи что стала приходить рассылка в бате как вложение — я сдал систему более полугода и все було джаз. походу эта какаято крайняя версия бата., но не могу точно утверждать так как у меня гмаил
            • 0
              Вот уж интересно! Узнайте версию бата или вообще проведите тестовую рассылку во все версии бата. Другого решения не вижу.
              • 0
                Я думал об этом. но у меня очень маленький процент таких пользователей. и этот эксперимент никто не оплатит ( поэтому пока на распутье
                • 0
                  Вы бы обиделись на рассыльщика будучи входящим в этот процент. Раскошельтесь, оно того стоит!
                  • 0
                    кто мне оплатит эту работу?
                    • 0
                      Это в ваших интересах :)
                      • 0
                        Хотя простите, возможно я немного запутался. Я счет вас за инициатора рассылки.
      • +1
        Хороший «разбор полётов», нежели предыдущие части :) Тока вот, уважаемый «верстун», поясни — почему стоит забыть о фоновых изображениях? Я подгружал в табличку через стандартный аттр background="" — и всё работало замечательно, даже в мейл.ру и яху :)

        А за совет по установке отписки от рассылки — отдельный респект! Правильные идеи движешь в массы! Как говорится, пешы ысчо! :)
        • 0
          За добрые слова спасибо! А насчет фона — слишком много демонов проглатывают фон, что не есть хорошо. Фоновые изображения использовать можно лишь в том случае, если не будет катастрофических потерь в случае «не появления» фона.
          • 0
            Ну в любом случае, даже при обычной вёрстке необходимо прописывать цвет фона сплошной заливки, на случай, если изображения не прогрузятся… Так что при «здравом» подходе, должно быть всё нормально! ))
            • 0
              Заливка цветом — не проблема. А с изображениями о здравом подходе не имеет смысла говорить. Веб-интерфейсы еще может и пропустят background, клиенты же в большинстве своем — отнюдь.
  • +1
    Спасибо, полезно, как и первая статья. Избавит от ненужных экспериментов.
  • +3
    xn__p2a в ответ на последний демонический догмат излагает вот какую мысль:

    Кроме тела письма неплохо бы добавлять ссылку на отписку от рассылки в служебный заголовок письма, именуемый List-Unsubscribe (определённый в RFC 2369).
    Некоторые почтовые клиенты и веб-почтовики (например, GMail) понимают этот заголовок и при его наличии в письме дают пользователю удобную возможность, нажав спец. кнопочку, быстро отписаться от этой рассылки.
    Это убережёт вашу рассылку от добавлении в спам-листы, т.к., например, в GMail, если пользователь пожалуется на спам в пришедшей рассылке, а в этом письме есть заголовок List-Unsubscribe, то GMail предложит пользователю вместо пометки как спам просто отписаться от этой рассылки.

    xn__p2a по определенным причинам не имеет возможности оставить коммент, поэтому я делаю это за него.
  • –1
    подскажите, пожалуйста, с чего начать: очень хочу придать своим
    иходящим письмам немного хтмл и логотип, пользуюсь гуглопочтой
    через веб-интерфейс… с чего начать? как верстать я знаю, теперь
    хочу узнать, через какой софт предпочтительно отправлять
    подобные хтмл-письма, да так, чтобы они сохранялись в исходящих
    гугла? все подряд качать тестировать очень не хочется
    • 0
      читайте тут и особенно комменты. гуглопочтой не обойдетесь
  • –1
    Никакого java-scpipt?
    • 0
      Спасибо, но можно и в личку
  • 0
    Спасибо!

    Отличный акцент на мелких (но очень противных) деталях.

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