В прошлой статье мы разбирались, как работать с . Сегодня поговорим о дизайне email рассылок .
Когда-то уже посвящал этой теме отдельную статью, но с тех пор утекло много воды, и я решил, что информацию неплохо бы обновить — особенно в той части, которая касается примеров действующих рассылок.
Структура
(1) Прехедер (preheader),
(2) Шапка,
(3) Тело письма,
(4) Подвал (футер).
Отдельным пунктом можно добавить границы и фон .
Шапка и футер остаются практически неизменными от рассылки к рассылке. В прехедере меняется только текст аннотации. Таким образом, основное “поле битвы” разворачивается в теле письма.
Впрочем, и здесь годятся шаблонные решения . Они упрощают вёрстку и помогают изготовить каждый выпуск рассылки быстрее.
Стандартные элементы
Как правило, email кампании проводятся слишком часто и на разработку уникального дизайна для каждого письма недостаёт времени.
Приходится либо готовить рассылки почти без оформления, либо стандартизировать дизайнерские решения , которые и помогают выполнить бо́ льшую часть работы. Письма в таком случае собираются как на конвейере — быстро и с определённым уровнем качества. Возможно, это не штучный продукт, но и не грубое кустарное производство.
Компоновка
Стандартная ширина письма составляет 600px (чтобы рассылка без проблем “вписывалась” в большинство почтовых программ и устройств).
Исходя из этого, набор компоновочных решений для рассылок довольно невелик:
(1) Картинка сверху,
(2) Картинка слева,
(3) Картинка справа,
(4) 2 столбца,
(5) 3-4 столбца.
(Последний вариант используется реже из-за узкой контентной части).
На первый взгляд маловато, однако нетрудно подсчитать, что такой набор даёт больше сотни вариантов компоновки.
Основные элементы
(1) Картинки,
(2) Заголовки,
(3) Подзаголовки,
(4) Текст.
Может быть, не в каждом письме они встречаются в полном составе, но пара-тройка найдётся практически везде:
Декоративные элементы
Особенности ограничивают выбор выразительных средств, которые можно задействовать в оформлении.
Если только вы не предпочитаете верстать рассылки сплошными картинками (что, по-моему, моветон),
то приходится сдерживать полёт фантазии, когда дело касается шрифтов, возможных вариантов компоновки, фоновых изображений и прочих визуальных “изысков”.
Остаётся сосредоточиться на том, что ещё можно пустить в ход письме, невзирая на “коварство” почтовых программ:
(1) Линейки,
(2) Буллиты (маркеры списка),
(3) Оформление ссылок и кнопок,
(4) Рамки и тени,
(5) Иконки.
Именно благодаря декоративным элементам некоторые рассылки выглядят в целом интересно:
Дизайн как конструктор
Теперь, когда мы разложили оформление рассылок по полочкам (5 решений по компоновке, 4 основных и 5 декоративных типов элементов), остаётся только разработать универсальный шаблон , который позволит “собирать” письма, как башни из кубиков конструктора:
Если вы опасаетесь, что получится однообразно, прогуляйтесь по галерее email шаблонов Themforest , чтобы взглянуть, на что способен подобный арсенал.
Кстати, html-редакторы некоторых исповедуют тот же подход к дизайну (например, Drag&Drop в Мэйл Чимп). И представление о письме, как о наборе стандартных блоков, которые можно перетасовывать любым способом, здесь отлично срабатывает:
К примеру, нам нужно анонсировать текущую акцию и десяток товарных предложений. Используя готовые блоки, мы можем сделать это совершенно по-разному:
При этом каждый вариант письма структурирован и неплохо выглядит. У маркетологов появляется свобода для манёвра. Теперь не нужно глубоко знать вёрстку или хорошо рисовать в фотошопе, чтобы создавать по-настоящему красивые письма (правда, толика художественного вкуса всё же не помешает:-)
О пользе стандартизации
Помимо озвученного преимущества — быстроты и удобства подготовки кампаний, у стандартизации дизайна есть и другие плюсы. Она упростит жизнь всем, кто привлечён к выпуску рассылки.
Копирайтер понимает, какого объёма тексты писать, чтобы они “ложились” на компоновку. Дизайнер знает размер картинок, которые нужно подготовить для письма. Верстальщик по-хорошему принимает участие в проекте только однажды — подготавливая базовый шаблон-конструктор. Маркетолог без труда “упаковывает” весь контент в рассылку.
Наконец, в выигрыше оказываются и подписчики, которые привыкают к определённому формату подачи материалов, и учатся быстрее извлекать из писем интересующую их информацию.
Для тренировки разберём «по кусочкам» небезызвестную
рассылку Мегаплана
:
→ Прехедер
Скрытый текст в аннотации + декоративный элемент — иконка-«самолётик», ссылающаяся на просмотр письма в браузере:
→ Шапка
Крупный заголовок с названием выпуска, подзаголовок, раскрывающий тему, и крупная картинка на всю ширина письма (баннер):
→ Тело письма
Текст, структурированный заголовками, подзаголовками и отступами; «разбавлен» картинками, иллюстрирующими содержание выпуска:
Декоративный элемент — цитирование:
→ Футер
Компоновка «картинка слева» и «2 столбца»:
Декоративные элементы — линейки, кнопки, рамки вокруг картинок, скругляющие углы:
→ Границы и фон
Зелёный фон (видимо, из фирменной расцветки Мегаплана). Границ как таковых нет, вместо них контрастный переход от фона к светлому телу письма, но есть скругление по углам.
Рассылка ведётся , где легко внедрить все перечисленные элементы отдельными блоками в режиме Drag&Drop. Шаблон несложный, и его вполне достаточно, чтобы автор текстов мог своими силами верстать большие, ярко оформленные выпуски — не вдаваясь глубоко ни в html, ни в работу с графическими редакторами.
Если вы раздумываете над оформлением собственной рассылки — найдите в почтовом ящике письма, дизайн которых вам нравится. «Разберите» их на такие же составные части. После этого подготовка своего шаблона пойдёт гораздо легче.
Заключение
Если во время работы с шаблоном у вас возникнет творческий порыв — сделать что-то по-новому, его всегда можно поставить себе на службу. Добавить блок с новым дизайном в базовый набор, и таким образом стандартизировать и это решение.
P.S. Опрос подписчиков блога всё ещё показывает, что самая интересная тема для статей — аналитика:
Поэтому следующий пост анонсирую с особенным удовольствием: в будущем месяце вас ждёт !
P.P.S. Если вы ещё не - самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂
В наше время простым электронным письмом, представляющим однообразную страницу с текстом, сложно кого-то заинтересовать. Сегодня, во времена огромного потока спама, маленькой победой уже можно считать решение адресата просмотреть ваше сообщение. Но главной задачей электронной рассылки остаётся привлечение покупателей вашего товара, чему имеет шанс поспособствовать только качественно и грамотно оформленное сообщение.
Что даёт HTML-письмо?
Почтовые письма – мощное маркетинговое оружие. Такая реклама хороша тем, что не предполагает обязательного наличия самостоятельной веб-площадки. Качественное письмо, получаемое в результате комплексной работы, способно за короткие сроки существенно увеличить объёмы продаж товара. Ведущие фирмы и компании знают о рентабельности электронных рассылок, поэтому активно её используют, как важную часть всей маркетинговой стратегии.
Как заказать верстку электронного email письма?
Для верстки необходим дизайн электронного сообщения , который также можно заказать у нас. Предоставленный графический макет будет в точности адаптирован под все почтовые сервисы с использованием валидного HTML-кода. В случае отсутствия собственного веб-сервера мы предлагаем наш сервер для хранения картинок сообщения.
3 - 7 дней
Сделать заказКак делаются такие письма?
Верстка электронных писем строится на тех же принципах, что и верстка страниц сайта. Только есть определённые особенности в техническом плане и способе представления информации. Если верстка сайта – это борьба только с браузерами, то верстка HTML-писем несёт в себе ещё не один набор «головных болей». Помимо строгого использования только табличной верстки с использованием «древних» атрибутов (cellspacing, cellpadding и.т.д.), каждый почтовый клиент имеет не всегда одинаковие способы интерпретации информации. Пренебречь каким-то почтовым сервисом – потерять покупателя, а этого не хочет никто.
Вся работа по созданию электронного письма разделяется на четыре этапа:
- Составление рекламного текста и подбор необходимой информации для email рассылки.
- Графическое оформление страницы письма (создание дизайна рассылки).
- Верстка макета электронного сообщения.
- Проверка отображения электронного письма во всех популярных почтовых агентах и сервисах.
Максимальный эффект достигается только при качественной работе профессионалов на каждой стадии. Верстка считается самым ответственным моментом, ведь работа верстальщика – заключительный этап создания электронного письма, который может перечеркнуть все плоды рекламного и дизайнерского решений.
Пример
Адаптивный дизайн в современном маркетинге - это обязательное условие успешной e-mail рассылки. Одинаково удобное «прочтение» на любом виде устройств, гибкий дизайн, который подстраивается под размер экрана, оптимальное расположение всех кнопок и ссылок. Чтобы понять, как он выглядит и работает, посмотрите пример ниже.
Ширина общего макета, включая рамки, отступы и тени не должна превышать 660px. И, конечно, ширина большого баннера не должна превышать ширины письма.
Шрифты нужно использовать только стандартные, которые отображаются на всех устройствах: Arial, Verdana, Trebuchet, Courier, Courier New, Tahoma, Georgia, Times, Times New Roman.
Корпоративные шрифты можно использовать для надписей на баннерах и статическом тексте, который будет в верстке картинкой. В верстке писем не используется:
- Flash-анимация
- Java Script
- Формы
- Эффекты наведения (:hover)
Используются: gif-изображения.
Блоки не должны мешать друг другу при вёрстке, слои не накладываются друг на друга, это относится как к разным блокам, так и к однотипным. Блок при блочной адаптации не должен превышать 320px по ширине (вместе с отступами).
Дополнительно
Хранение файлов
Для каждого нового проекта на сервере создаётся новая папка, в которую загружаются картинки. Пути к картинкам указываются абсолютными.
Экраны Retina
Для этих экранов размер иконок.png должен быть в 2 раза большим, чем на самом деле будет отображаться. Т.е. если нам надо вывести иконку размером 70×20, на сервер надо загрузить ее в размере 140×40. И уменьшить ее, указав в коде атрибут width=»70«.
Вёрстка
Подробная статья о вёрстке email рассылок в нашем блоге:
Используется DOCTYPE HTML 4.01 Transitional:
Что касается кодировки, это utf-8:
Всё письмо целиком оборачивается в table с шириной в 100%, минимальной шириной и каким-либо фоном (белый, если не нужен другой):
|
Всё дело в блоках со свойством inline-block. В момент, когда блокам не хватает ширины, правый переносится вниз.
Вёрстка под MS Outlook
Если вы хотите добавить что-то, что будет понимать только Outlook, используйте комментарии вида:
В наших письмах они используются для организации таблицы у плавающих блоков (т.к. Outlook не понимает display: inline-block). А так же для фиксации общей ширины письма.
Материал из Email Маркетинг Вики
Особенности вёрстки email Вёрстка email-сообщений несколько отличается от web-вёрстки. Если для web-вёрстки современных сайтов используется CSS3, то для вёрстки email проблематично использование даже более ранних стандартов CSS. Это связано с тем, что многие пользователи до сих пор используют старые устройства и старые версии почтовых клиентов. Вместе с этим количество новых устройств постоянно растёт. А значит, чтобы письма корректно изображались на большинстве существующих устройств, придется сделать шаг назад и больше полагаться на возможности HTML-вёрстки.
В идеальном варианте при разработке письма дизайнер должен постоянно советоваться с верстальщиком.
Основные параметры
* Размер
Оптимальная ширина письма – 600-650px. При адаптивной вёрстке в медиа-запросах или в файлах стилей чаще всего прописывают максимальную величину экрана в 480px. При этом размеры контентных блоков и самого письма лучше задавать в процентах и указывать максимальную ширину. Так письмо будет автоматически сжиматься на экранах меньше 600px. Правда, этого приёма будет не достаточно для адаптивной вёрстки с учётом особенностей мобильных устройств.
* Фон и цвет
Для удобства чтения и привлечения внимания часто используют светлый фон, отличный от белого. Как обозначать цвета. RGB-запись цвета воспринимается не всеми почтовыми клиентами. Поэтому лучше использовать шестнадцатиричную запись кода цвета и не сокращать его .
* Разбивка контента на сегменты
Для писем и email рассылок используют табличную вёрстку. Несмотря на то что многие веб-дизайнеры считают такой подход устаревшим, для email он оптимален.
* Размеры элементов
Размеры элементов должны задаваться в абсолютных значениях. Размеры ячеек таблицы указываются в процентах, размеры элементов – в пикселах. При этом лучше указывать размер без обозначения px. Так можно избежать некоторых проблем отображения в Outlook (например, width="400").
* Доктайп (DOCTYPE)
Любой HTML-документ начинается с элемента DOCTYPE. Он сообщает браузеру, как интерпретировать код. Существует несколько версий языка HTML с разным синтаксисом. Для писем рекмендуется использовать доктайп:
* Шрифты
Список шрифтов, которые можно использовать в email-шаблонах :
Font-family: Arial, Helvetica, sans-serif;
font-family: "Arial Black", Gadget, sans-serif;
font-family: Georgia, serif;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-family: "MS Serif", "New York", sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
* HTML-теги, которые можно использовать в email
* CSS-стили
В вёрстке email использование стилей CSS ограничено, практически не используется CSS3. Все стили прописываются инлайн (то есть рядом с элементом, к которому они относятся). Стили, прописанные внутри тега
CSS-стили в email-вёрстке
Стили CSS позволяют задать основные параметры для элементов на странице (размеры, выравнивание, цвет фона и т.д.). Существует 4 способа задания стилей для HTML-тегов :
* Внедрённый стиль
Стиль задаётся в теге
документа. Например:
Здесь 1 раз задаётся стиль для тега
, и все элементам с тегом будет присвоен описанный стиль.
* Импортированный стиль
Импортированный стиль также прописывается в теге
документа, но при этом все его параметры загружаются из файла. Пример:
* Стиль из файла
Этот способ задания стиля похож на предыдущий, с той лишь разницей, что не используется стиль
* Inline-стиль Стиль указывается непосредственно в теле тега. Например:
контент
В веб-разработке CSS-стили позволяют уменьшить количество кода. Для email-писем этот приём не работает, так как большинство почтовых программ игнорирует атрибуты, заданные в
, а также внешние css-файлы. Именно поэтому для вёрстки email следует использовать inline-стили. В разных сервисах есть разные ограничения на поддержку CSS-атрибутов. Подробная таблица поддержки стилей для наиболее популярных почтовых сервисов была создана специалистами campaignmonitor. Здесь ее можно посмотреть онлайн: … для 10 основных сервисов или скачать таблицу для 18 сервисов. Многие сервисы для email-маркетинга имеют свои инлайнеры, которые конвертируют код в инлайн-вёрстку автоматически.Использование табличной вёрстки
Блочная вёрстка, которая используется для создания современных веб-сайтов, не подходит для email. Для вёрстки email лучше использовать таблицы. Так, скорее всего, шаблон не разъедется в устаревших почтовых клиентах. Сначала нужно создать контейнер, т.е. основную таблицу, которая обозначит границу письма. Таблицы внутри этого контейнера будут выполнять роль ячеек. И уже внутри ячеек можно будет расположить собственно контент письма. При этом следует избегать объединения ячеек (атрибуты colspan, rowspan), а для форматирования контента в ячейках использовать вложенные таблицы. Простейший код основной таблицы письма может выглядеть так :
|
Если изначально в макете применяется больше одной колонки, то для правильного отображения на мобильных телефонах, эти ячейки нужно будет выстроить друг под другом. Для адаптивной вёрстки код основной таблицы может выглядеть так :
|