7 советов для «чайников» по созданию эффективного дизайна емейл-рассылок

О значимости дизайна при создании емейл-рассылок в интернете полным-полно статей. Тем не менее, я все-таки решилась вслед за многими осветить эту тему. А все потому, что эта статья основана исключительно на эмпирических знаниях — моем личном опыте, который я получила, работая над рассылками Serpstat с помощью сервиса емейл-маркетинга SendPulse. Я расскажу вам какой дизайн лучше выбрать и каких ошибок избежать — обо всем том, что сама проверила на практике.

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

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

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

Обо всем остальном расскажу в следующих пунктах этой статьи.

Не забывайте, что вашу рассылку могут читать не только с компьютеров, но и с мобильных устройств. Чтобы письма нормально отображались, важно использовать кроссплатформенную верстку с помощью стандартного размера — от 500 до 600 пикселей. То есть ширина HTML-макета вашего письма не должна превышать 600 пикселей и быть меньше 500 символов.

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

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

Чтобы обеспечить хорошую читабельность текста, обратите внимание на такие характеристики шрифтов:

Слишком мелкий шрифт и небольшой интервал между строчками — плохое решение. Более читабельным и удобным для пользователя считается шрифт в диапазоне от 12 до 14 кегель и полуторный интервал между строчками (минимум 1,15).

Наиболее распространенный вариант шрифта — это черный шрифт на белом фоне. Однако бывает и прямо противоположный вариант — белый шрифт на черном фоне. И тот, и другой вариант приемлем — буквы не сливается, текст читается легко. Руководствуйтесь общим правилом: чем выше контрастность, тем лучше читабельность.

Белый шрифт на синем фоне — неплохое решение, однако именно этот оттенок синего (наш корпоративный цвет) уж слишком плохо смотрелся под белым шрифтом. И виной тому низкая контрастность.

Практические отсутствие границ и интервалов между строчками тоже не сыграло на руку тексту. От этого он стал еще более низкочитабельным (предварительно его «подпортило» сочетание цветов шрифта и фона).

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

1. Один для заголовка или приветствия.
   
2. Второй для самого текста.
   
3. Третий — если нужно что-то выделить и поставить ссылку.
   
   

Что касается типа шрифта, то выберите шрифт без заcечек (как Times New Roman) — Arial, Tahoma или Verdana. Так не должно возникнуть проблем с отображением.

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

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

Картинки — одна из самых важных составляющих частей вашей рассылки. Именно они украшают письмо и привлекают больше всего внимания. Здесь важно многое учесть:

Говорят, в картинках лучше всего использовать «круглые крупные яркие, выполненные в теплых оттенках, изображения детей, групп людей, а также людей, которые находятся в движении». Я согласна с этим утверждением, однако решила пойти немного дальше. А все потому, что просто фотографии с людьми из фотостоков уже всем надоели ;) Это скучно и уже давно никому не интересно.

При поиске картинок используйте так называемый метод непрямой ассоциации. Находите то, что находится за гранью того, «что первое приходит в голову». Чтобы лучше объяснить этот метод, хорошо подойдут картинки, которые я нашла на блоге Максима Ильяхова:

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

Вторая же картинка — напротив, необычная и прикольная, и не является прямой ассоциацией к словосочетанию «удаленная работа». Здесь, главное, не переборщить и не использовать слишком далекую ассоциацию.

Но это еще не все! Вдохновившись рассылками Netpeak, я поняла, что недостаточно использовать разные картинки, найденные непрямой ассоциацией. Будет лучше и интереснее связать все картинки в одном письме единой тематикой, чтобы в комплексе друг с другом они интересно сочетались.

Как именно? Покажу на примере картинок одной из наших рассылок:

Поняли какой смысл я пыталась вложить в эти картинки?

1. Первое изображение про поиск нерелевантных страниц → ассоциация → лучше всего с поиском всего на свете справятся сыщик Шерлок Холмс (Бенедикт Камбербэтч) и его друг Ватсон .
   
2. Вторая картинка про новые внешние статьи про Serpstat → ассоциация → Шерлок (Василий Ливанов) увлеченно читает статью в газете.
   
3. Третье изображение про SEO-инсайды, которые можно найти из логов серверов → ассоциация → Шерлок (Роберт Дауни Младший) пытается найти выход из комнаты.
   

Нетрудно догадаться, что связующей темой ко всем картинкам стал Шерлок Холмс ;)

В каждом изображении, даже в логотипе в хедере письма должен быть прописан тег «alt».

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

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

Во-вторых, прописывая атрибут «альт» в картинке, которая находится в хедере письма, вы показываете эту часть письма в превью. То есть пользователь видит этот текст наряду с именем отправителя и названием письма, перед тем, как открыть само письмо.

Вот здесь:

Не заполняя этот тег в первой картинке, вы впустую расходуете дополнительное место воздействия на пользователей, как это делала я ;)

В письме, которое вы видите выше в картинке, тег «alt» не прописан, а подтягивается первый текст из хедера — слоган Serpstat. Не повторяйте моих ошибок, дайте сразу знать своим подписчикам, что их ожидает. Как вариант, можно вписать в этот тег приветствие.

Кроме того, рекомендую делать картинки именно в формате .png, потому как в других форматах (в .jpg, например) в письмах получателей они могут открываться нечеткими (прим. картинка 1). Даже если картинка у вас открывается более-менее нормально (прим. картинка 2).

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

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

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

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

Что эффективнее — картинки с ссылками или кнопки? Этого ответа, увы, я не знаю, поэтому нередко использую и то, и другое.

При создании кнопок руководствуйтесь следующими принципами:

• высота кнопки — от 40 до 50 пикселей;
  
• цвет кнопки должен быть в корпоративном стиле;
  
• оставьте небольшое пространство вокруг кнопки;
  
• проверьте кликабельна ли она на мобильных устройствах.

Давайте вспомним ключевые моменты этой статьи:

1. Оформление писем должно соответствовать дизайну вашего сайта и корпоративному стилю.
   
   
2. Расположите логотип компании в верхнем левом углу или создайте тоненькую картинку-плашку по всей ширине письма.
   
   
3. Чтобы письма нормально отображались, важно использовать кроссплатформенную верстку с помощью стандартного размера — от 500 до 600 пикселей.
   
   
4. Задайте рамки — границы письма и не выходите за их пределы.
   
   
5. Более читабельным и удобным для пользователя считается шрифт в диапазоне от 12 до 14 кегель и полуторный между строчками (минимум 1,15).
   
   
6. Шрифт должен хорошо контрастировать с фоном. Руководствуйтесь общим правилом: чем выше контрастность, тем лучше читабельность.
   
   
7. Не используете больше трех выделений шрифта.
   
   
8. Найдите интересные фотографии и картинки методом непрямой ассоциации, объединенные одной тематикой.
   
   
9. Прописывайте тег «alt» к каждой картинке, особенно, к первой из хедера.
   
   
10. Делайте картинки не слишком большими и в формате .png
    
    
11. Никогда не создавайте макет рассылки с несколькими столбцами, если не уверены на 100%, что ваше письмо откроется у пользователей нормально.
    
    
12. Даже если вы используете яркие красочные картинки предварительно «затемните» их немного, чтобы подчеркнуть текст в картинках.
    
    
13. Не игнорируйте социальные кнопки и кнопки призыва к действию, однако не привлекайте к ним слишком много внимания.