Tutorial

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

Верстка адаптивных писем с Foundation for Emails

При верстке email письма обычно используется табличная верстка и весьма ограниченный набор css свойств . Табличная верстка подразумевает достаточно большую вложенность, и редактирование уже готового шаблона может стать настоящей головной болью. После принятия решения о переходе на адаптивные письма возник вопрос, как делать эти самые письма. Наш выбор пал на довольно популярный фреймворк Foundation , вернее на его недооцененного младшего брата Foundation for Emails .

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

Gulp: автоматизации процесса разработки
Inky шаблонизатор: конвертирует собственную разметку в HTML код
Sass: CSS препроцессор
Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
Inliner: переводит из таблиц стилей в инлайн стили
BrowserSync: перезагрузка страницы после изменения исходных файлов
Image Compression: сжатие изображений в процессе компиляции

Установка достаточно проста и состоит всего из нескольких шагов:

1. Устанавливаем foundation-cli , возможно понадобится использовать sudo

Npm install --global foundation-cli
2. Переходим в директорию проекта и выполняем команду

Foundation new --framework emails
CLI спросит у вас имя будущего проекта, после чего будет загружен шаблон проекта и установлены необходимые зависимости. Весь процесс занимает не больше минуты. Для старта достаточно запустить команду npm start , после чего в вашем браузере откроется веб-адрес по умолчанию (обычно это http://localhost:3000) с дефолтным шаблоном. Команда npm run build запускает компиляцию, в процессе которой разметка Inky компилируется в HTML разметку, стили переводятся в инлайн стили, убираются все пробелы и оптимизируются изображения. На выходе вы получаете один HTML файл и оптимизированные изображения.

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

Для корректного отображения вашего письма вам приходится использовать таблицы с довольно большой вложенностью. Использование шаблонизатора Inky упрощает разметку email писем и делает код более простым, и читаемым.

Пример кода с использованием Inky:

Put content in me!

HTML на выходе:

Put content in me!

Но не стоит увлекаться слишком большой вложенностью, т.к. вы можете столкнуться с проблемой, которая у нас была в самом начале использования данного фреймворка. Gmail не любит большие письма и обрезает часть письма, когда контента становится больше, чем 102 кБ (но по факту обрезать он начинает уже после 98 кБ)

Думаю, все мы понимаем, какой процент пользователей нажмет «показать целиком».

Более подробно с документацией Foundation for Email можно ознакомиться .

1. Реализация адаптивности в письмах - довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.

Foundation for Emails в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x» , но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})
2. Если вы планируете рассылку, в которой будет один шаблон, а меняться будет только контент, либо у вас везде одинаковый футер, а шапка и контентная область разные, рекомендуем вам использовать Partials .

Ваш шаблон будет выглядеть примерно так:

Definitely STILL an Email! {{> header}} {{> body}} {{> footer}}
В целом Foundation for Emails дает возможность использовать достаточно большой набор функций на языке шаблонов Handlebars.

3. В первой версии письма мы обратили внимание на достаточно большой его размер. При более подробном рассмотрении оказалось, что все стили, находящиеся в head ,
дублируются, помимо этого дублировались теги head и body , как открывающиеся, так и закрывающиеся. Полистав более подробно документацию, удалось выявить проблему. Она заключалась в том, что Foundation сам создает head и body со всем необходимым, а вам остается только сверстать само письмо.

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data . Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

Title: Page Title description: Lorem ipsum. ---

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

Stuff on top

Stuff on bottom

HTML на выходе:

Stuff on top

Stuff on bottom

6. Если вы решили использовать spacer для задания высоты, но в мобильных клиентах он вам кажется слишком большим, вы всегда можете его скрыть, добавив в вашу разметку класс.show-for-large и дописав в ваш медиа-запрос отступ к нужному блоку средствами CSS, мобильные клиенты с этим справляются лучше. Также хотим обратить ваше внимание на класс.hide-for-large . Не рекомендуем использовать этот класс, т.к. он не поддерживается в Gmail и Yahoo.

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

HTML на выходе:

Button

8. Не все почтовые клиенты поддерживают background-image , но так как наша основная шапка и тело письма как раз имели такой дизайн, мы выбрали подход graceful degradation, при котором в основных почтовиках используется фоновая картинка, а в почтовых клиентах, которые не имеют этой поддержки, используется заливка цветом. Таким образом мы не теряем читаемость текста.

9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation .

В нашем примере уголок сделан с помощью псевдоэлемента:before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

Добро. Больше чем уверен, Вам понравится эта статья. А точнее понравится то, что лежит в архиве. А точнее в архивах, а если еще точнее то в 10-и архивах. :)) Затянул. Выкладываю я, дорогие подписчики, 10 офигенных адаптивных шаблонов email писем.

Каждое письмо почищено, проверено, упаковано в архивчик и залито для того, чтобы вы нажали кнопочку «Скачать» и сохранили шаблон email письма у себя на компьютере. Это настоящий подарок для того, кто увлекается email рассылками. Мне же интересны эти шаблоны с точки зрения уведомлений посетителям, которые оставили заявку на обратный звонок на сайте или заказали какой-либо товар на одном из моих интернет магазинов. Хотя многие из этих email шаблонов запросто можно использовать как и обычный промо-сайт. Но все таки лучше посмотреть , благо их уже собралось не малое количество.

Верстать email шаблоны дано не каждому, так как там есть свои правила. Но больших отличий email писем от обычных сайтов на html нет. Единственные отличия, это css внутри html и наличие уже устаревшей на сайтах табличной верстки. Поэтому знания html будет достаточно для создания email письма. Для этого не нужно проходить профессиональное обучение web-дизайну. Но ведь гораздо легче скачать варианты, которые ходят в интернете в свободном доступе. И вот один из таких вариантов. Смотрим, радуемся, качаем.

Email шаблон под кодовым названием «Focus»

Идеально подойдет для интернет магазина одежды или аксессуаров. На фотографиях этого email шаблона представлены кожанные сумка, кошелек и чехлы для телефона.

Скачать

Крутецкий email шаблончик «Summers coming»

Скачать

Полностью адаптивный резиновый легкий простой email шаблон

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

Скачать

Симпатичный шаблон email письма в синих тонах под названием «Minty»

Смешной и стильный шаблон email письма с несколькими блоками. Наверное, лучше всего подойдет для рассылки статей с новостного портала или блога.

Скачать

Email шаблон «Nexit» для интернет магазина

Серьезное email письмо. Судя по картинкам - это рассылка интернет магазина женской одежды. Отлично представлены скидки, акции и популярные позиции с ценами. Отличный рекламный email инструмент.

Скачать

Строгий стильный шаблон для email письма «Simples»

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

Скачать

Email шаблон «Tempo» на тему туризма

Мини сайт в формате email письма. Здесь есть и меню и мини баннер. Очень хорошо подойдет для рассылки горящих туров (если это туристическая компания) или свежие предложения квартир (риелторская контора или агентство недвижимости)

Скачать

Простой двублочный шаблон «Tubor» для email рассылки

Простой, не обозначенный тематически, шаблон email письма под названием «Tubor».

Скачать

Коричневый странный html шаблон email «Underscore»

Скачать

Шаблон email письма «Wooshi» email рассылки ресторана или кафе

Скачать

Каждый шаблон имеет адаптивную верстку, поэтому они будут также молодцом держаться на мобильных девайсах. Также, каждое email письмо в этой сборке сделано по всем правилам email письма. Есть ссылки на головной сайт, мобильную версию и ссылка, чтобы отписаться от рассылки. Хороший получился пост. Надеюсь, Вы почерпнули из него нужные вам шаблончики. Рад был помочь, до новых постов. Также вы можете скачать сразу все 10 шаблонов email писем, нажав на кнопка «Скачать», которая ниже.

Сегодня пользователи все чаще читают электронные письма на мобильных устройствах. Каково бывает просмотр большого HTML-email"а на телефоне? Приходится много масштабировать и скроллить, в целом читать становится очень неудобно. Поэтому и письма электронной почты следует делать адаптивными.

Подготовка

Прежде всего определим основные особенности адаптивных email"ов:

Чистый и лаконичный контент: на маленьких экранах гораздо важнее эффективно использовать полезное пространство.
Одна колонка: очевидно, что на экране телефона контент не должен разбиваться на несколько колонок.
Краткая тема письма: письма с короткими заголовками выделяются среди множества других в inbox"е.
Большие «call to action» кнопки: Apple iOS Human Interface Guidelines рекомендует делать кнопку не менее 44×44 px.
Правильный шрифт: текст должен быть удобочитаем на любом устройстве.
Pre-header: начальный текст письма должен максимально отражать содержание.
Выравнивание текста по левому краю: Большинство пользователей уделяют больше внимания левой части экрана. Кроме того, некоторые ОС могут не полностью отображать письмо, поэтому контент должен выравниваться по левому краю.
Вертикальная иерархия: наиболее важная информация, в том числе кнопки «call to action», должна располагаться в верхней части письма.
Минимум изображений: пользователь не ожидает увидеть в письмах большие картинки. К тому же, у многих отключено отображение изображений.

Начало

HTML-письма своей структурой немного отличаются от обычных простых HTML-страниц. К примеру, CSS-стили должны быть прописаны непосредственно в разметке, кроме того, некоторые почтовые клиенты вовсе игнорируют любые CSS-стили внутри тега head. Для удобства можно использовать специальные шаблоны с грамотной разметкой HTML-письма. Например HTML Email Boilerplate .

Doctype

Hotmail и Gmail принудительно добавляет в код XHTML 1.0 doctype.

Viewport и Media Queries

Для корректного отображения на мобильных устройствах, следует использовать метатег viewport. К сожалению, он не работает на Blackberry:

Также желательно определить content-type тег title. Многие почтовые клиенты это будут игнорировать, но не стоит забывать о «версии для браузера» письма. Еще можно добавить немного CSS, чтобы самим задать некоторые параметры отображения.

Email subject or title
При добавлении Media Queries скрываем элементы с классом hide с помощью display:none, если ширина экрана меньше 600 px:

@media only screen and (max-width: 600px) { table, img, td { display:none!important; } }
Это стандартный подход при верстке адаптивных email"ов: перезапись CSS в head с помощью!important. При этом GMail будет игнорировать стили в head. Поэтому необходимо следить за тем, чтобы контент везде корректно отображался. С помощью Media Queries можно также ограничить ширину блока с контентом:

@media only screen and (max-width: 600px) { table { width: 92%!important; } }

Кнопки

После прочтения письма пользователь, в идеале, должен совершить какое-то действие. Поэтому роль «call to action» элементов очень важна. Кнопки должны быть крупны, заметны и располагаться, по возможности, в верхней части письма.

К сожалению, не существует единого кроссплатформенного решения для кнопок в письмах. Один из вариантов:

@media only screen and (max-width:600) { a{ display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-align: center; text-decoration: none!important; } }
Ну совсем простой способ - обычная ссылка. Однако при этом страдает юзабилити на устройствах с тач-скрином:

Click me!
Скачать пример , описанный в статье.

«Резиновые» письма

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

Примеры адаптивных email"ов

Вот пара хороших примеров того, как адаптивные письма должны отображаться на большом и мобильном экранах:

Заключение

По причине того, что существует большое количество видом платформ, устройств и экранов, очень сложно создать универсальное решение при верстке адаптивных email"ов. Если подвести итог всего вышесказанного, можно придти к одному простому правилу - «Простота - залог хорошего юзабилити писем».

Представим ситуацию: Сергей - выпускник «Нетологии», начинающий маркетолог. Он работает в небольшом интернет-магазине, одна из его задач - запустить рассылку по клиентской базе. Стратегия, план и тексты для писем готовы.

Что делать с дизайном и адаптивной версткой? Бюджет на исходе, поэтому у Сергея серьезный выбор: сэкономить и сделать все самому, в редакторе сервиса рассылки. Либо нанять фрилансера.

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

Выбираем встроенный редактор или услуги верстальщика

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

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

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

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

Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.

Если вы проработали структуру, написали текст и подобрали картинки, то на создание письма уйдет от тридцати минут до двух часов. Напомним, что вы не платите за верстку, работа с редактором включена в стоимость аккаунта.

Команда из дизайнера и верстальщика на фрилансе сделают письмо за два-три дня, стоить это будет от 5 000 до 15 000 рублей. Если заказываете в агентстве - в разы дороже. Помните историю из вступления? Для Сергея выбор очевиден: он будет собирать письмо сам, в его ситуации это дешевле и быстрее.

Простое адаптивное письмо лучше собрать во встроенном редакторе. Если хотите нестандартных решений - отдавайте на аутсорс.

Как собрать письмо во встроенном редакторе

Тем, кто собирает письмо в редакторе, знать код не обязательно. Единственное, что нужно - продумать структуру письма, подобрать картинки и написать текст. Никакой «ручной» верстки - вы соберете письмо из блоков, как в конструкторе посадочных страниц.

Шаг 1. Схема или прототип письма

Начните с черновика, начертите на бумаге схему будущего письма: где будет заголовок, где картинка, где кнопка и т. д. Если есть время, соберите полноценный прототип в Balsamiq или NinjaMock . Такой прототип не стыдно показать директору и передать в работу дизайнеру.

Шаг 2. Верстка письма в редакторе

Добавляете нужное количество колонок, исходя из уже готовой схемы или прототипа

Перетаскиваете нужные элементы в тело письма

Обычно во встроенных редакторах действует принцип Drag-and-drop. Если в вашем не так, посмотрите статьи из Базы знаний - принципы работы в редакторе описаны там.

Настраивайте содержимое элементов: отступы, интервалы, выравнивание и начертание

Здесь же вписываете нужный текст, добавляете фотографию или иллюстрацию, с ссылками или без. Не забывайте, что вы можете добавить анимированную картинку, большинство редакторов поддерживает формат GIF.

Только не переборщите с размером файла. Почтовые клиенты не любят «тяжелые» письма и могут скрыть их содержимое под кнопку «Показать полностью» - так, например, делает Gmail. Подбирайте файлы так, чтобы готовое письмо весило не более 600 Кб, это оптимальный размер.

Не забудьте настроить кнопки и добавить к ним ссылки для перехода.

Шаг 3. Проверка адаптивности во встроенном редакторе

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

В 90% случаев все будет в порядке, блоки «перестроятся» автоматически. Если верстка все-таки «слетает» или результат вас не устраивает - проверьте значения отступов в блоках, они должны быть одинаковыми. Если один один блок отступает на 10 пунктов, а другой на 30, в мобильной версии они могут перестроиться некорректно. Если оба блока отступают на 10 пунктов, скорее всего, все будет в порядке.

Шаг 4. Проверка адаптивности на сторонних сервисах

______________________________________________________________________________________

Если вы хотите научиться профессиональной верстке, то изучите курс « », а делать крутые рассылки поможет « », а « » поможет делать рассылки красивыми, а значит, и эффективными.

Делимся советами по созданию идеального адаптивного письма.

Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.

Простое адаптивное письмо лучше собрать во встроенном редакторе. Если хотите нестандартных решений - отдавайте на аутсорс.

Как собрать письмо во встроенном редакторе

Шаг 1. Схема или прототип письма

Начните с черновика, начертите на бумаге схему будущего письма: где будет заголовок, где картинка, где кнопка и т. д. Если есть время, соберите полноценный прототип в Balsamiq или NinjaMock. Такой прототип не стыдно показать директору и передать в работу дизайнеру.

Шаг 2. Верстка письма в редакторе

Добавляете нужное количество колонок, исходя из уже готовой схемы или прототипа

Перетаскиваете нужные элементы в тело письма

Настраивайте содержимое элементов: отступы, интервалы, выравнивание и начертание

Не забудьте настроить кнопки и добавить к ним ссылки для перехода.

Шаг 3. Проверка адаптивности во встроенном редакторе

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

Шаг 4. Проверка адаптивности на сторонних сервисах

Проверьте результат через Litmus или Email on Acid. Эти сервисы покажут, как письмо отобразится на разных устройствах, в разных браузерах и разных почтовых клиентах.

В некоторых редакторах проверка через Litmus интегрирована по умолчанию. Если в вашем редакторе такой возможности нет, отправляйте тестовую копию письма на специальный e-mail, который дадут после регистрации в Litmus.

Услуга платная, месячная подписка в Litmus начинается от 79 $, в Email on Acid - от 45 $. Если вы отправляете по одному письму раз в месяц, выходит дороговато. В крайней случае, попробуйте Browser Shots, он старый и неудобный, зато бесплатный. Помните, что подобные сервисы не дают 100% гарантии. Даже если в Литмусе все хорошо, это не повод сразу же запускать рассылку. Отправьте письмо на личную почту и откройте его там.

Выбирайте редактор, в котором показано, как выглядит письмо на разных устройствах. Идеально, если редактор интегрирован с сервисом Litmus. Если интеграции нет, проверяйте адаптивность вручную через личную почту.

Как оценить результат работы - своей или верстальщика

Если собираете письмо сами, проверьте адаптивность внутри редактора и посмотрите письмо с личной почты - этого достаточно. Хотите проверить адаптивность на многих устройствах, браузерах и почтовых клиентах сразу - тогда покупайте аккаунт в Litmus или Email on Acid, смотрите результат там.

Тем, кто отдавал верстку на аутсорс, покупать аккаунт не обязательно, попросите скриншоты из Litmus у верстальщика. Если он профессионал, то проверяет письма на подобных сервисах, отправить скриншот для него не проблема.При проверке присмотритесь к почтовым клиентам, в основном, косяки всплывают здесь. Обязательно проверьте, как открывается письмо в Outlook, Gmail, Yandex и Mail.ru - это самые популярные почтовые клиенты в России.

Не стоит тратить время на исправление макета, если он некорректно отображается на третьем айфоне, в седьмой версии Internet Explorer или в почтовом клиенте The Bat. Да, всегда найдутся те, кто пользуется третьим айфоном, но их меньшинство. Стоит ли переделывать макет ради 1-2% от общей базы? Зависит от количества и «качества» базы.

Надеемся, вы ее сегментировали и про своих подписчиков знаете все. Если 1-2% - это 10 000 человек, то заморочиться стоит. Если вы работаете в b2b и эти 1-2% - управляющие компаний, собственники бизнеса и другие вип-клиенты, придется адаптировать письма под них.

Проследите за тем, чтобы письмо адекватно отображалось в Outlook, Gmail, Yandex и Mail.ru - этого достаточно.

Памятка маркетолога

Определитесь с форматом письма, каким оно будет: стандартным и простым или сложным и креативным. Письма со сложной структурой отдавайте дизайнеру и верстальщику. Простые письма собирайте в редакторе сервиса рассылки, они адаптируются по умолчанию.
Проверяйте результат во встроенном редакторе и, если позволяет бюджет, на сторонних сервисах. Принимая письмо у верстальщика, просите скриншоты, которые подтверждают, что письмо отображается корректно - по крайней мере, в популярных почтовых клиентах и популярных браузерах.
Обязательно просмотрите письмо через личную почту, хотя бы в основных почтовых клиентах и с актуальных моделей смартфонов на iOS и Android.

Плюсануть

Один из читателей блога Вебсовет попросил рассказать о верстке писем для рассылки. Сам я этим практически не занимаюсь. Помнится, в свое время я много возился с шаблонами для Subscribe.ru, и помню, что дело это было муторное. Проблема в том, что почтовые сервисы плохо работают с блочной версткой. А еще хуже со стилями css. Столько лет прошло, а воз и ныне там. Сейчас подавляющее большинство писем для рассылок верстаются все так же по старинке - при помощи таблиц. И это в 2016 году, когда на сайтах уже давно рулит html5, css3 и прочие современные вкусняшки.

В принципе, исчерпывающие статьи по верстке писем уже есть на Хабре, здесь и здесь. Также рекомендую почитать тамошнего обитателя по имени Артур Кох, у которого по верстке писем написана масса полезных статей. Примеры: ссылка 1, ссылка2.
Но чтобы пост не получился пустым, я все-таки кратко озвучу основные моменты верстки писем для e-mail рассылок.

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

Во-вторых, следует всегда принудительно обнулять значения отступов, полей и бордеров, ибо каждый почтовый клиент норовит отобразить их по-своему:

В-третьих, можете не заморачиваться с тегами doctype, head и body. Без doctype ваши письма будут одинаковыми везде, head и body практически бесполезны, т.к. все равно будут вырезаны большинством почтовых сервисов (пруф).

В-четвертых, если используете в письмах картинки, то обязательно прописывайте их размеры.

адаптивная верстка писем

Очень часто почтовики блокируют изображения в письмах, и если не задать их размеры, то письмо будет выглядеть коряво. Кроме того, обязательно добавляйте style=»display:block;. Это избавит от проблем с непонятными отступами (например, в gmail):

И ни в коем случае не используйте однопиксельные картинки в качестве распорок для ячеек таблицы! Ваше письмо гарантированно попадет в спам. Если нужна распорка, то следует применять картинку с размерами, как минимум, 20х20 пикселей, которой в стилях принудительно задать размер 1х1 пиксель.

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

И напоследок пара полезных ссылок. Здесь вы можете посмотреть, какие теги поддерживаются различными почтовыми сервисами. А здесь найдете еще несколько полезняшек - «Особенности верстки HTML-писем».

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

(2 votes, average:

Верстка адаптивных писем: памятка маркетолога

Большинство электронных писем на мобильных устройствах отображаются некорректно. Рисунки расходятся, а текст приходится скроллить и масштабировать.Чтобы письма хорошо выглядели на разных платформах, необходимо использовать адаптивную верстку.

Этот курс адресован HTML-верстальщикам, разработчикам и email-маркетологам с базовыми знаниями HTML и CSS. Вы узнаете, что такое мобильная и резиновая верстка, блочная и фланговая адаптация. Научитесь подготавливать изображения для писем и рассмотрите основные инструменты верстальщика.

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

2. Особенности адаптивной верстки

3. Подходы к адаптации email

4. Базовый шаблон адаптивного письма

5. Приемы мобильной адаптации

6. Инструменты HTML-верстальщика

7. Подведение итогов курса

8. Адаптивная верстка писем в email-маркетинге: итоговый тест

Безграничные возможности креативной верстки email рассылки, применение графических элементов и интересного наполнения — привлекают внимание клиента. Подобные письма не отправляют в спам.

Создание письма для рассылки

Для успешного применения системы Email-маркетинга недостаточно простой логики рассылки и письма с предложением.

30 бесплатных адаптивных шаблонов электронных писем

Для привлечения внимания информация должна подаваться в красивой «обертке», с нужными ссылками и привлекательными изображениями. Первое впечатление от письма — это внешняя оболочка, наполнение вторично.

Пользователям ежедневно приходит около сотни писем, вы должны привлечь внимание аудитории «ярким» и захватывающим заголовком и предложением внутри. Для успешной реализации дизайна и верстки писем для рассылки вы должны продумать стратегию реализации проекта:

продумать идею и грамотно выстроить серию писем;
выделить главное, завоевать доверие клиента, предоставив интересный продукт;
письма должны побуждать к действию, мотивировать на приобретение продукта;
привлекательный дизайн, профессионалы сделают html верстку писем для рассылки.

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

Верстка html писем

Идея продвижения продукта/услуги и ее реализация в текстовом формате.
Дизайн письма для рассылки.
Верстка электронных писем.
Тестирование результата на всех платформах и почтовых сервисах.

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

Простые узнаваемые шаблоны, правильная ширина, информация о компании и форма отписки — если все это учесть, ваша рассылка будет вызывать доверие, и у клиента не возникнет и мысли нажать кнопку “спам”.