Советы по созданию красивого и эффективного дизайна email рассылки.
Внешний вид
- Выбирайте цветовую гамму и придерживайтесь одного-двух цветов. Так вы добьетесь более цельного и простого для восприятия вида.
- В дизайне письма используйте корпоративные цвета вашей компании.
- Больше воздуха. Это сделает рассылку читабельной.
- В зависимости от задач рассылки используйте один из трех форматов изображений: PNG, JPG или GIF.
- Рекомендованное разрешение изображений - 72 dpi.
- Используйте так называемые «безопасные» шрифты (например, Arial, Tahoma, Times New Roman).
- Правильно подберите размер шрифтов. Рекомендуем размер для объемных рассылок — 12-14 пикселей, и 14-16 пикселей — для небольших рассылок из нескольких предложений.
- В одной рассылке используйте не более двух разных шрифтов
- Правильно подберите размер шрифтов. Рекомендуем размер для объемных рассылок — 12-14 пикселей, и 14-16 пикселей - для небольших рассылок из нескольких предложений.
- Визуально отделите хедер и футер от остального контента при помощи цвета.
Верстка
- Email верстка не идентична веб-верстке. Здесь действуют другие законы. В email дизайне используется табличная верстка, css прописывается инлайном для каждого объекта отдельно, поскольку некоторые платформы или email клиенты могут обрезать css в хедере.
- Для общей верстки используйте базовые HTML таблицы. Верстка при помощи CSS может некорректно отображаться на всех устройствах.
- При верстке шаблонов с адаптацией под мобильные устройства используйте свойство display:none. Так на мобильных устройствах не будут отображаться лишние элементы. То, что удобно для использования на компьютере, может быть совершенно непригодным для мобильных устройств.
- Не усложняйте визуальный аспект рассылки. Создавая сложные верстки с кучей графических элементов, вы рискуете получить дизайн, который не будет отображаться, как запланировано.
- Устанавливайте ширину для каждой ячейки, а не для таблицы в целом. Так вы обеспечите одинаковое отображение письма на всех устройствах.
- Не используйте внешние таблицы стилей. Они не будут корректно отображаться на всех устройствах.
- Не используйте CSS классы — всегда используйте Inline CSS, поскольку некоторые email клиенты не поддерживают CSS классы.
- Избегайте такое свойство CSS как position. Некоторые email клиенты игнорируют его. Вместо этого используйте функционал таблиц.
- Фоновые изображения не везде поддерживаются. Если вы все же хотите задействовать фоновое изображение, то используйте возможности HTML вместо CSS.
- Позаботьтесь о запасном цвете для фона, поскольку фоновые изображения поддерживают не все клиенты. Убедитесь, что для таблицы или ячейки прописан цвет.
- Не ставьте ничего перед тегом <body>. Все, что вы поставите перед ним, отсечется на некоторых платформах и не будет использовано.
- Не используйте Javascritpt — многие спам-фильтры воспринимают его как вредоносный код. Кроме того, он может просто не работать в некоторых клиентах.
Контент
- В одном письме должна содержаться одна ключевая идея. Если идей больше — сделайте серию писем.
- Сократите текст рассылки вдвое. Отложите ее и на следующий день повторите процедуру. Email рассылка должна быть лаконичной.
- Добавляйте изображения для разбивки текстовых массивов.
- Расставляйте приоритеты: вначале письма — самый важный посыл, передающий суть рассылки, а в конце — его логическое продолжение в виде призыва к действию. Не забывайте об обратной пирамиде email контента.
- Используйте заголовки и подзаголовки для повышения читабельности рассылки.
- Интеграция емейла с другими каналами — важный атрибут ваших рассылок. Проработайте внешний вид кнопок социальных сетей в соответствии с дизайном рассылки.
- Разбивайте текстовые массивы на небольшие блоки.
- Выровняйте контент. Центрированный контент выглядит хорошо, если его объемы невелики — например, одно большое изображение и пара предложений с призывом к действию. Если у вас большие текстовые массивы — выровняйте их по левому краю.
- Используйте свободное пространство и разделители для разбивки текстовых массивов.
- При отображении письма на мобильных устройствах области со ссылками должны быть готовы к нажатию пальцем. Это означает, что ссылки должны быть достаточно крупными и изолированными друг от друга. Если получатель не попадет по ссылке с первой попытки, второго шанса у вас может и не быть.
- Используйте прехедеры для усиления темы письма и дополнительного аргумента для его открытия.
- Добавьте ссылку на веб-версию письма на случай, если у получателя возникнут проблемы с отображением вашего письма.
- Не увлекайтесь встраиванием видео прямо в письмо, так как многие email клиенты по-прежнему не отображают видео в письме.
- GIF анимацию поддерживают не все почтовые клиенты. Используйте ее в письме, если в этом есть реальная необходимость.
Призывы к действию
- Призывом к действию может быть кнопка, текстовая ссылка или изображение. Определите, что вам больше подходит по стилистике письма.
- Не забывайте заполнять ALT теги под изображениями. При отключенных картинках на стороне получателя ALT теги могут спасти положение.
- Не используйте сплошное изображение для оформления кнопки с призывом.
- Используйте HTML и встраиваемые стили CSS для создания кнопок. Так они будут отображаться одинаково хорошо при любых условиях во всех email клиентах.
- Призыв к действию может повторяться в рассылке несколько раз, но у него должна быть единая цель. Запомните правило: «Одна рассылка — одно целевое действие».
- Размер кнопки с призывом должен быть не менее 40 пикселей. Дизайнеры компании Apple рекомендуют 44 пикселя для максимально комфортного отображения на мобильных устройствах.
- Оставьте достаточно свободного пространства вокруг кнопки. У пользователя не должно возникать проблем с нажатием на кнопку.
- Подбирайте цвет кнопки под дизайн вашей рассылки: она должна быть контрастной и выделяться на общем фоне письма.
- Не усложняйте! Для призывов к действию используйте простые и понятные формулировки.
- Подписчик интуитивно ищет комбинацию слов, которая больше всего подходит по контексту. Например, если в теме письма говорится о сезонных скидках, то призыв «Получить скидку» будет логическим продолжением рассылки.
- Формулируйте призыв к действию от первого лица. В идеале ваш призыв должен дополнять фразу «Я хочу».
Тестирование дизайна
- Тестируйте дизайн email рассылок на всех возможных устройствах и email клиентах. На сегодняшний день существуют очень удобные сервисы для тестирования отображения рассылок во всевозможных email клиентах.
- Начинайте проверять отображение писем с самого начала и делайте это на протяжении всего процесса создания email дизайна. Так вы сведете к минимуму возможность появления багов в процессе работы.
- Тестируйте отображение ваших писем с отключенными изображениями. Поскольку в некоторых email клиентах отображение картинок отключено по умолчанию, важно убедиться, что ваше письмо выглядит одинаково хорошо при любом сценарии.
0 коммент.:
Отправить комментарий