Верстка электронных писем, почтовых рассылок

Верстка писем является одной из сложных типов верстки. Связано это, прежде всего, с тем, что почтовые программы, как правило, ограничивают использование большинство современных технологий верстки. Это происходит из-за использования старых веб-браузеров внутри почтовых программ, либо внутренних правил обработки и отображения писем в почтовых системах.
В письмах, например, для обеспечения кроссплатформенного отображения, нельзя использовать следующие вещи, весьма привычные для обычной верстки:

• нельзя использовать нестандартные шрифты, так как большинство почтовиков заменит их на один из следующих шрифтов Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana.
• нельзя использовать текст поверх изображения или неоднородного фона, так как в большинстве программ фон не будет отображаться.
• нельзя использовать свойства для создания теней, скруглений, градиетов и т.д.
• нельзя использовать анимации и скрипты.

Большинство CSS свойств не будет работать в почтовых программах. Чтобы понять, насколько верстка обычного сайта отличается от верстки писем, попробуйте открыть сайт в эмуляторе Internet Explorer 5.
Тем не менее, в письмах можно реализовывать и красивые дизайны, если учитывать при верстке следующие правила:

• при разработке дизайна письма следует избегать изображений, которые не укладываются в сетку (тоесть требуют объеденения нескольких ячеек или столбцов или имеют не ровный край), как в случае, когда текст обтекает изображение.
• верстка писем делается по старой технологии посредством таблиц, при этом не используются такие свойства, как объединение ячеек или столбцов, а делается вложение одной таблицы в другую.
• письма не делаются в край, тоесть всегда надо предусматривать отступ по краям письма, чтобы почтовые программы могли обрезать её без потери содержимого.
• все стили прописываются прямо в атрибутах элементов, при этом прописываются все свойства, даже базовые.
• пустые пространства делаются отдельными ячейками с пустыми однопиксельными картинками внутри.
• у всех элементов, таких как таблицы, ячейки, картинки, прописываются размеры.
• текст поверх изображения делается цельным изображением и вставляется цельной картинкой.

Эти не хитрые приемы позволяют сделать кроссплатформенную верстку письма, которая будет нормально отображаться как в веб-почтовиках, так и в почтовых программах.
Помимо приемов, позволяющих сделать верстку писем под большинство почтовых программ, так же есть подходы, позволяющие добавить ряд эффектов для новых почтовиков. После того как базовая верстка письма готова, можно добавить анимации и разные эффекты, которые будут работать в новых устройствах. Также можно добавить адаптивные стили, которые будут восприниматься только новыми почтовыми программами, что позволит, например, адаптировать размер письма и расположение элементов для мобильных устройств. Так же для новых устройств можно предусмотреть вставку видео или аудио файлов прямо в тело письма, но при этом следует учесть, что в большинстве программ данный контент не будет отображаться.
В случае с версткой письма, разработчику может понадобиться разное время для создания разных по сложности писем:

• создание простого письма займет от 4 часов.
• создание сложного письма с множеством элементов займет от 8 часов.
• создание адаптивного письма под мобильные устройства займет от 12 часов.
• создание сложного адаптивного письма займет от 16 часов.

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