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

Я уверен, что получить красивенькое и стилизованное письмо всегда приятнее, чем получить обычный набор из двух-трёх абзацев, со скучными синими ссылками в их полном варианте, т.е. в виде http://e2pro.by/make-order.html.

Ведь всегда приятно увидеть достойное почтовое отправление. Мне, как пользователю, сразу становится ясно, что во-первых, о тебе заботятся. Во-вторых, к реализации проекта подошли люди с умом и терпеливостью, к тому же явно не пожалев денег и времени на разработку. В-третьих, информация, поданная в правильном виде, лично у меня, вызывает доверие и более четкое понимание. Вуаля — получаем классный способ повышения конверсии. Да-да, вот оно, косвенное влияние на продвижение.

Живые PrintScreen примеры

Это у нас номер 1. Обычное такое, с непримечатальным содержимым. Привлечение и концентрация внимания отсутсвуют. При выходе в свет ничего хорошего, настолько, что такое послание можно даже и не заметить во входящих.

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

Ну согласитесь, что вот эти два письма производят абсолютно разное впечатление на адресата.

Если выделить основные почтовые клиенты, которыми пользуется весь мир, то получим такой перечень iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. О, перечень достаточно обширный и затрагивает 99% всех ваших пользователей. Будет не лишним поговорить о правилах хорошего тона при верстке писем под эти почтовые клиенты.

Правила хорошего тона при верстке

Сегодня фактически все почтовые клиенты, уже как положено воспринимают блочную верстку на div. Исключение, пожалуй, составляют только, чуть менее чем все версии MS Outlook. Основываясь на инфу с habra, этим самым outlook пользуется порядка 1/4 всех пользователей сети интернет. А значит забываем о блочной верстке, забываем об отдельном *.css и основываясь на правилах хорошего тона, начинаем работать с < table> . За базовую ширину принимаем width="640px и вкладываем свою таблицу в родительский (блочный) элемент.

Вот как это выглядит в самом начале

В качестве легкого пояснения стоит сказать, что мы "обнуляем" стили у таблицы для получения более менее корректного результата атрибутами cellspacing , cellpadding и border-collapse.

После указываем ширину, бэкграунд, центрируем содержимое и даже задаём стили на любой вкус. Это всё можно проделываеть не только с тэгом < table> , но так же и с тэгами < tr> , < th> и < td> . Главное конечно не увлекаться и использовать стили по минимуму, а ещё лучше заменить их изображениями. Но используя изображения не стоит забывать правило "золотого сечения", а именно соотношение изображений к тексту, как 30%/70%. Все элементы, будь то < p> , < span> и < img> вклдываются внутрь < td> соотвественно. Если необходимо вспомнить про все хитрости табличной верстки, вам на помощь экспресс курс от htmlacademy.ru

Как правило, гуру и упоротые проггеры, не советуют использовать свойства padding: и margin: ввиду их неадекватного поведения в старых версиях почтовых клиентов. Но мы грешим, признаюсь. Да я открыто признаюсь, мы используем эти свойства, но в более конкретном виде, а именно padding-top: или же margin-left: и не испытываем проблем.

Насамом деле, блочная верстка отлично выглядит на 99% устройствах и их почтовых клиентах. Табличный "коддинг" это скорее дань памяти и наличие хорошего вкуса. Я верю что скоро это потеряет смысл, ну а пока все используют именно таблицы. Мы в том числе.

Мы всегда делаем свои проекты тщательно и с умом. От неприятных ситуаций мы защищаем себя сами. Ну а если уж очень захотелось использовать какой-бы то ни было стиль, на помощь приходит замечатальный ресурс от campignmonitor.com , на котором можно получить ответы на все свои вопросы, касательно поддержки параметров CSS. В итоге, получаем что получаем и отдаём дань памяти давно ушедшим в небытие таблицам.