Вёрстка E-mail писем

29.05.2013
За последний год, на новом рабочем месте, мне очень часто приходилось иметь дело с крупными E-mail рассылками, не менее крупных немецких и французских автопроизводителей, причём исходными данными были только макет в png и база клиентов. Моей задачей было не только вёрстка письма, но и организация самой рассылки. 

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

Вёрстка

  1. Любое письмо начинается с элемента , лучше всего подходит следующий: в сложных письмах, где очень много нарезанных изображений, он позволит избежать отступов под изображениями в ячейке таблицы.
  2. Никаких тегов , они лишь введут вас в заблуждение, используйте только inline стили.
  3. Вся вёрстка только в табличном виде, никаких
    и

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

  4. Желательно иметь одну основную таблицу, которая и будет являться всем письмом. У этой таблицы также не забываем указать cellSpacing="0" cellPadding="0" и ширину в атрибуте width. У всех ячеек тоже должна быть проставлена ширина и в сумме ширина ячеек в одной строке должна равняться ширине таблицы, в противном случае предсказать результат будет сложно.
  5. Rowspan и colspan использовать можно, не без фанатизма. Верстать с их помощью заумные конструкции будет лишней тратой времени т.к. Outlook ваших старании не оценит и сделает всё по своему.
  6. У всех картинок должны быть проставлены атрибуты width, height, alt и style="display: block"
  7. Про фоновые картинки забываем, используем только тег
  8. Закругления краёв блоков придется делать по старинке с помощью изображений.
  9. Если ячейка таблицы содержит лишь одно изображение, то ей необходимо обязательно указать ширину (см. пункт 4) и, высоту указывать у неё не надо, т.к. это может вызвать появление «непонятных» полосок(отступов) под картинкой.
  10. В каждой ячейке не забываем обрамлять текст тегом , у которого в стилях указываем шрифт и его размер. Если необходимо сменить текст анкора у ссылки, то тут поможет только тег
  11. Бывает так, что необходимо добавить пустую ячейку, обычное указание её ширины не поможет, т.к. к примеру ячейка в Outlook’е просто «схлопнется», добавление неразрывного пробела внутрь не поможет, тут вам должен прийти на встречу заранее подготовленный прозрачный пиксель. Это обычная прозрачная картинка размером 1х1 пиксель. Её можно использовать как распорку, которая не даст ячейке схлопнуться, например  

  12. Обязательно в конце письма должна быть ссылка на отписку и причина, по которой клиент получил данное письмо. Это значительно уменьшит вероятность попадания вас в спам листы.

Рассылка

  1. Указываем в письме заголовок «Precedence: bulk», он укажет почтовым сервисам что данное письмо является частью массовой рассылки.
  2. «List-Unsubscribe: <*ссылка на отписку*>», заголовок исключительно для Gmail, если получатель укажет что ваше письмо – спам, Gmail ему тут же предложит перейти по указанной ссылке и отписаться от рассылки.
  3. DKIM (DomainKeys Identified Mail), без данной цифровой подписи вообще не рекомендуется рассылать письма по большим базам, т.к. велика возможность попадания в спам, а с DKIM эта возможность стремится к нулю. Как её настроить, это уже тема для отдельной статьи. Мы же для рассылки используем сервис Amazon SES и в нём DKIM включается одной кнопкой.
  4. Postmaster.mail.ru отличный сервис который позволит узнать о подробную статистику вашей рассылки, естественно статистика будет только по адресам mail.ru. А что бы система могла различать ваши письма, добавьте следующий заголовок в письма «X-Mailru-Msgtype: test01», где test01 уникальный идентификатор шаблона письма, по которому и будет происходить группировка писем. Если у вашим писем нет DKIM, то и статистика по ним собираться не будет.

На данный момент всё, постепенно я буду расширять данную заметку.