Советы по дизайну электронной почты и распространенные ошибки, на которые следует обращать внимание

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

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

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

Советы по дизайну шаблонов писем

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

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

Ошибки, которых следует избегать

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

2. Не используйте изображения вместо текста, потому что

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

3. Не используйте корпоративный цвет в качестве основного цвета письма, если он слишком жирный и яркий.

4. Не используйте для текста яркий или сложный фон.

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

Лучшие практики, которым нужно следовать

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

2. Если вы решили проводить A / B-тесты, тестируйте отдельные элементы, а не все письмо целиком. Таким образом, вы будете точно знать, какие детали более или менее эффективны, чтобы стиль вашей компании оставался узнаваемым для аудитории.

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

4. Поместите самую важную информацию и CTA в первую прокрутку и убедитесь, что все письмо выглядит сбалансированным. Если заголовки и описания составлены аккуратно, кнопки призыва к действию привлекают внимание, а изображения высокого качества, получатели будут плавно направлять на протяжении всего письма прямо к призыву к действию.

5. Постарайтесь сделать ваши письма шириной 600 пикселей, чтобы они корректно отображались в любом почтовом клиенте.

6. Чередуйте текстовые блоки и изображения. Это важно не только для удобочитаемости, но и для лучшей доставки ваших писем, особенно если вы начали рассылать электронные письма не так давно. Как правило, мы рекомендуем использовать соотношение текста и изображения 80:20 или 60:40.

7. Помните, что для яркого фона всегда лучше использовать контрастный тусклый заполнитель.

8. Если вы не можете полагаться на помощь дизайнера, вы можете создавать шаблоны электронной почты самостоятельно, используя редакторы электронной почты с перетаскиванием.

Теперь давайте рассмотрим несколько примеров, демонстрирующих эти лучшие практики в действии.

Мы взяли первые два примера с Behance. Оба шаблона, один для приветственных писем, а другой для еженедельных писем «Новое вдохновение», построены по схожим принципам, но выглядят немного по-разному. Приветственное письмо имеет крупный и четкий заголовок, высококачественные изображения, разорванную сетку и хорошо читаемый шрифт. Блоки текста и изображения чередуются, что упрощает чтение электронной почты.

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

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

Советы по созданию адаптивного электронного письма

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

Ошибки, которых следует избегать

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

2. Не делайте кнопки CTA слишком маленькими. Увеличение масштаба для нажатия кнопки может сильно расстроить получателей.

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

Лучшие практики, которым нужно следовать

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

2. Используйте готовые адаптивные шаблоны писем от SendPulse или создайте свои собственные в нашем конструкторе перетаскивания, если вы не хотите возиться с кодом. Они уже адаптированы как для настольных компьютеров, так и для мобильных устройств; Кроме того, вы всегда можете предварительно просмотреть свой шаблон электронной почты для обоих устройств.

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

Компоновка его мобильной версии немного отличается:

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

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

Ошибки, которых следует избегать

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

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

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

Лучшие практики, которым нужно следовать

1. Выберите один или два основных шрифта для заголовков и основного текста, не более.

2. Используйте базовые шрифты, которые будут правильно отображаться в большинстве почтовых клиентов, таких как Gmail, Yahoo, Outlook и другие. Если сервис не может распознать ваш шрифт, он заменит его другим шрифтом, что может плохо повлиять на общий дизайн шаблона электронного письма. Самыми безопасными считаются шрифты Arial, Lucida Grande, Tahoma, Trebuchet, Verdana, Georgia, Palatino, Times New Roman, Courier New, Courier и Impact.

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

4. Разделите текст на разделы, используя заголовки и короткие абзацы. Хорошо структурированный текст всегда легче читать.

5. Сделайте размер шрифта не меньше 14 пикселей.

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

Советы по использованию цвета в дизайне шаблонов электронных писем

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

Ошибки, которых следует избегать

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

2. Воздержитесь от слишком большого количества градиентов. При непрофессиональном использовании они могут сделать ваше письмо неаккуратным или ухудшить видимость текста.

Лучшие практики, которым нужно следовать

1. Используйте смелые и яркие цвета только для выделения отдельных элементов или слов, выбирая более успокаивающие цвета для фона.

2. При выборе цветовой темы учитывайте предпочтения вашей аудитории. Например, Kissmetrics сообщил, что мужчины предпочитают контрастные цвета, а женщины - более мягкие цветовые палитры. Чтобы узнать, какие цвета больше всего нравятся вашим пользователям, проведите A / B-тесты и попробуйте изменить цвет одного или нескольких элементов за раз, чтобы точно измерить результаты.

3. Используйте такие инструменты, как Adobe Color, чтобы выбрать идеальную цветовую палитру, которая будет визуально сбалансированной.

B&Q, например, использует свой фирменный оранжевый цвет в качестве хайлайтера и придерживается более нейтральных тонов для остальных элементов.

Советы по дизайну заголовка электронного письма

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

Ошибки, которых следует избегать

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

2. Не используйте изображения плохого качества в заголовке и где-либо еще в электронном письме, так как это создаст впечатление любительского дизайна.

Лучшие практики, которым нужно следовать

1. Выделите основную информацию вашего заголовка и позвольте другим элементам быть немного меньше или менее яркими.

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

Взгляните на минималистичный заголовок в письме от TheRealReal:

Советы по дизайну нижнего колонтитула электронной почты

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

Ошибки, которых следует избегать

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

2. Никогда не скрывайте ссылку для отписки, не делайте ее слишком маленькой или малозаметной. Если пользователю сложно отказаться от подписки, он, скорее всего, нажмет «Спам», что всегда является плохой новостью для вашей репутации отправителя.

Лучшие практики, которым нужно следовать

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

2. Будьте честны со своей аудиторией и сделайте ссылку для отказа от подписки хорошо заметной.

3. Добавьте креативную подпись электронной почты в нижний колонтитул, чтобы завершить электронное письмо на дружеской заметке и позволить получателю с нетерпением ждать ответа от вас в следующий раз.

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

Советы по использованию изображений в дизайне электронной почты

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

Ошибки, которых следует избегать

1. Не создавайте электронные письма, состоящие только из изображений, так как 43% пользователей отключают изображения в своих почтовых клиентах; однако имейте в виду, что содержание вашего электронного письма должно оставаться четким, даже если изображения не видны.

2. Не делайте изображения больше рекомендованного. Например, если вам рекомендуется использовать изображения шириной 300 пикселей, не используйте те, которые имеют ширину 1200 пикселей.

Лучшие практики, которым нужно следовать

1. Оптимизируйте изображения перед добавлением их в электронную почту. Электронное письмо с тяжелыми изображениями будет загружаться дольше, особенно на мобильных телефонах. Скорее всего, пользователь не будет ждать загрузки изображений и просто закроет письмо. Для оптимизации изображений используйте такие инструменты, как Squoosh или TinyPNG.

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

3. Увеличьте размер значков в 2 раза, чтобы они хорошо смотрелись на устройствах iPhone и Macbook с экраном Retina. Например, если вам нужно использовать значок 70 × 20, загрузите версию 140 × 40 на сервер, а затем измените размер значка в своем электронном письме, используя следующий атрибут: width="70" .

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

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

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

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

Между тем, журнал The New York Times Magazine использует высококачественные изображения и уникальные иллюстрации, чтобы украсить свои электронные письма, заполненные текстом.

Советы по дизайну CTA

Призыв к действию в электронном письме - это ссылка или кнопка, созданная для получения какого-либо ответа от пользователя - регистрации, покупки или контакта с менеджером. Четкий призыв к действию и его правильное размещение помогут вам повысить ваш CTR, в то время как ошибки в CTA могут усложнить способность вашего подписчика выполнить желаемое действие, делая вашу электронную почту просто бесполезной.

Ошибки, которых следует избегать

1. Не прячьте ни одной кнопки призыва к действию в конце письма или даже за первой прокруткой.

2. Не заставляйте пользователей гадать, что им нужно делать - вместо этого дайте им четкий сигнал.

3. Не скрывайте свои гиперссылки, если вы используете их вместо кнопок CTA. Они не должны теряться среди других элементов электронного письма. Они также не должны быть слишком маленькими или ненасыщенными.

Лучшие практики, которым нужно следовать

1. Поместите ваш основной CTA в первый свиток. Если ваше электронное письмо длинное, вы можете повторить CTA несколько раз на протяжении всего письма.

2. Убедитесь, что ваша тема и ваш призыв к действию посвящены одной и той же теме.

3. Сделайте кнопку CTA яркой и заметной. Он должен контрастировать с фоном, текстом и другими элементами электронного письма.

В одном из своих электронных писем LinkedIn, например, не только дважды повторил свой призыв к действию, но и сделал его жирным и контрастным.

В другом примере от Нила Пателя вы можете увидеть, что тема письма коррелирует с текстом CTA:

Контрольный список советов по дизайну электронной почты

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

Мы считаем, что, имея под рукой все эти советы, вы сможете создавать отзывчивые и хорошо продуманные электронные письма, и не без SendPulse. Сервис также поможет вам A / B протестировать различные элементы вашего электронного письма и выбрать лучшие варианты для вашей кампании.