15 найкращих практик email-дизайну

Бажаєте створити професійну конкурентоспроможну розсилку, та не знаєте, з чого почати? Топові практики email-дизайну для 2021 року, наведені нижче, допоможуть. 

1. Напишіть переконливу тему

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

(Десктопний пристрій)

Звертаємо вашу увагу, що поштові клієнти показують до 65 символів теми на десктопних пристроях і до 30-35 символів на мобільних. Тому слушним рішенням буде зробити тему якомога коротшою.

(Мобільний пристрій)

2. Прехедер має зачіпати

Прехедер доволі часто називають продовженням теми. Він знаходиться поруч із нею на десктопі та під нею у мобільній версії.

Зверніть увагу:

• у вас є лише 100 символів на мобільних пристроях і 30 на десктопі, щоб переконати читача відкрити вашого листа;

• обов'язково заповнюйте прехедер. Якщо ви нічого не напишете, клієнт побачить фрагмент тексту, який знаходиться на початку вашого листа (зазвичай це пропозиція відкрити веб-версію повідомлення). Виглядає це, чесно кажучи, не дуже;

• використовуйте прехедер для підсилення свого меседжу. Знижки, акції, конкурси... — усе, що збільшує шанси листа на відкривання, буде доречним у прехедері;

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

Ви можете заповнити прехедер пробілами після короткого тексту, як це зробили Gap Flash Sale.

Або залишити його зовсім порожнім, як у листі від Banana Republic.

3. Дотримуйтеся корпоративного стилю

Це виключно важлива умова. Робіть це потрібно скрізь: на сайті, в email-розсилках, соцмережах та ін. Бренд має використовувати однакові фірмові шрифти, тон спілкування і кольорову схему.

Коли клієнти відкривають вашого листа, вони мають візуально впізнавати стиль та кольори, які бачили на вашому сайті. І тому вам треба послідовно дотримуватися ідентичності бренду від однієї email-кампанії до іншої, зокрема у тригерних листах.

У Stripo ви можете створити файл «Brand Guidelines». Він містить набір стилів дизайну та брендової айдентики (лого, контактна інформація тощо), узятих із будь-якого листа вашої компанії на ваш вибір.

4. Створіть власний хедер

Про хедери листів уже написано сотні тисяч слів.

Тому обмежимося кількома найважливішими рекомендаціями за темою:

• назва та логотип вашої компанії — дві невід'ємні частини хедера. Вже просто факт присутності цих двох елементів покращує впізнаваність вашого бренду серед тисяч інших листів;

• наявність меню навігації в хедері допомагає одержувачеві оперативно перейти на сайт, не читаючи весь масив інформації;

(Джерело: шаблон Stripo)

• прикріплюйте до логотипу компанії відповідні посилання.

5. Додавайте до листів анотації для вкладок промо у Gmail

Всесвітньо відома корпорація Google кілька років тому розробила анотації для листів. Але використовувати їх чомусь прагнуть далеко не всі. І це дивно, адже за допомогою цієї фішки можна додавати до листів зображення, описи цінних пропозицій, терміни дії знижок... — і в такий спосіб підвищити показники відкривання розсилок.

Анотації надають клієнтові можливість побачити ваш продукт або послугу, не відкриваючи листа.

(Джерело: розсилка від Rozetka)

У Stripo ви можете використовувати цей інструмент, а також багато інших — усе зручно зібрано в одному місці. Бажаєте спробувати?

6. Використовуйте читабельні шрифти

Що стосується дизайну електронних листів, тут треба відзначити важливу обставину: шрифти, що погано читаються, можуть негативно вплинути на сприйняття тексту листа і відповідно на CTR навіть попри правильну подачу інформації. Тому:

• уникайте курсиву, оскільки він суперечить правилам доступності листів;

• краще не використовувати більше ніж 3 типи шрифтів, адже лист виглядатиме неохайно;

• переконайтеся, що вибраний шрифт добре читається.

У нашому блозі є стаття «Найкращі шрифти для розсилок», у якій ми досліджуємо шрифти, щоб з'ясувати, які з них найлегше читаються і коректно відображаються незалежно від пристрою.

7. Створюйте смислові банери

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

Банер завжди знаходиться на першому екрані вашого листа і містить у собі центральний меседж усієї кампанії.

Перевірте, чи достатньо змістовний ваш банер і чи зроблено в ньому акцент на основній меті розсилки. Обов'язково прикріплюйте до банерів посилання, які ведуть клієнта безпосередньо на потрібну сторінку вашого сайту.

Існує 9 основних типів банерів. Усі вони описані нами в блоговій статті «Типи банерів: як створити банер у Stripo Email Builder за лічені хвилини». У ній ви також знайдете мануали зі створення банерів.

8. Додавайте відповідні GIF-анімації

Навіщо використовувати гіфки в електронних листах? Для того, щоб:

• заволодіти увагою читача;

• розмістити кілька банерів на одному скролі екрану;

• привернути увагу користувача до конкретного елементу листа;

• продемонструвати широкий асортимент вашої продукції або різні кольорові варіанти певного товару.

(Джерело: розсилка від Victoria’s Secret)

Але будьте обережні з гіфками.

Правила, яких необхідно дотримуватися, додаючи до листів GIF-анімації:

• додавайте лише один GIF-файл на один скрол екрану, аби уникнути нападів фотосенситивної епілепсії в читачів;

• з цієї ж причини не використовуйте анімації з частотою понад 2 кадри на секунду;

• додавайте до GIF-файлів альтернативні тексти з коротким описом того, що на них зображено. У такий спосіб ви надаєте клієнтам інформацію на випадок, якщо GIF-файли не завантажаться;

• використовуйте для першого кадру найбільш інформативне зображення, оскільки деякі поштові клієнти відображають не всю GIF-анімацію, а показують тільки перший кадр.

9. Робіть кнопки заклику до дії помітними

Правильне використання заклику до дії надає вам можливість переконати і мотивувати читачів перейти на сайт, щоб отримати більш детальну інформацію.

(Джерело: розсилка від Brighton)

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

На екранах смартфонів кнопки мають бути достатньо великими, щоб користувачам було зручно їх натискати.

На жаль, деякі кнопки в Outlook втрачають свої стилі оформлення. Але ми знаємо, як вирішити цю проблему!

Просто активуйте опцію «Підтримка Outlook» — і ваша кнопка відображатиметься саме так, як ви бажаєте. Причому в усіх версіях Outlook.

10. Дотримуйтеся адаптивного email-дизайну для мобільних

Не є таємницею, що половина користувачів переглядає вхідну пошту на смартфонах. А це означає, що нам слід адаптувати наші листи для мобільних пристроїв.

Листи мають бути адаптивними і без горизонтального скролу — сьогодні це елементарна істина, яка навіть не обговорюється.

Тобто оптимізація email-дизайну для мобільних девайсів передбачає абсолютно новий рівень адаптивності, зокрема:

• кнопки із закликом до дії, розтягнуті на повну ширину екрану, щоб користувач не пропустив кнопку;

• відключення певних елементів листів на смартфонах. Ви можете навіть приховати деякі зображення в мобільному режимі;

• інверсію елементів за потреби;

• шрифти більшого розміру, зокрема для кнопок та заголовків, щоб зробити текст ідеально читабельним.

(Футер листа, розмір шрифту 12 пікселів, десктоп)

(Футер листа, розмір шрифту 16 пікселів, мобільний девайс)

Додаткову інформацію про налаштування стилів дизайну для мобільної версії листа ви знайдете у нашому блозі, стаття «Як зробити лист адаптивним».

11. Будьте лаконічними

До речі, про верстку... Мало хто полюбляє лонгріди. Тому будьте лаконічними. Однак це не означає, що лист неодмінно має бути коротким. Просто одразу переходьте до суті без довгих вступів.

12. Рішуче використовуйте інтерактивність та AMP

Просто кілька фактів та цифр:

• інтерактивні розсилки, в яких клієнти мали можливість оцінити компанію безпосередньо в листі, приносили у 8,33 рази більше оцінок, ніж звичайні HTML-розсилки;

• інтерактивна відкрита форма Stripo, яка дозволяє залишати коментарі безпосередньо в листі, генерує у 5,2 разів більше відгуків, аніж форма на зовнішньому ресурсі;

• запропонувавши покупцям опцію перегляду детальних описів товарів, залишених у кошику, Ecwid збільшили продажі на 82% — усе це завдяки технології AMP.

(Джерело: Mailmodo)

Ще більше вражаючої статистики ви знайдете тут.

13. Застосовуйте гейміфікацію листів

Гейміфікація дозволяє створювати для листів щось на кшталт вбудованих ігор. Давайте розглянемо деякі переваги цієї методики:

• гейміфікація листів збільшує конверсію;

• ви розважаєте клієнтів своїми листами — ви надаєте людям можливість трохи відпочити;

• гейміфікація підвищує відсоток відкривання — користувачі чекають на ваші нові листи;

• ROI (рентабельність інвестицій) зростає втричі;

• ігрові розсилки позитивно впливають на впізнаваність вашого бренду.

У нашому блозі є стаття «Гейміфікація в email-маркетингу», в якій ми ділимося рекомендаціями щодо швидкого створення ігор і пропонуємо кілька готових механік.

Час робити розсилки фановими!

14. Приділіть увагу доступності листів

Цей пункт є одночасно і рекомендацією, і правилом.

Ваші розсилки мають бути доступними! Важливо пам'ятати, що частина людей має проблеми із зором. Тому можливість прочитати ваш контент слід надати всім одержувачам — і тим, хто читає самостійно, і тим, хто використовує програми для читання екрану.

Ось ключові рекомендації із дизайну доступних листів:

• використовуйте контрастні кольори різних відтінків;

• завжди! Чуєте, ЗАВЖДИ! додавайте альтернативний текст до всіх зображень та GIF-анімацій;

• якщо GIF-файл виконує навчальну місію, обов'язково додайте до нього детальний текстовий опис;

• уникайте двох або більше GIF-анімацій на одному екрані;

• проставляйте знаки пунктуації в кінці кожного речення або пункту маркованого списку;

• вкажіть тип контенту <charset=”utf-8″> у заголовку коду листа, щоб усі символи, які використовуються в повідомленні, були легко читаними;

• встановіть мову в заголовку коду;

• вирівнюйте тексти за лівим краєм, але в жодному разі не за центром.

15. Додавайте підпис, або футер

Користувачам потрібно знати, як підписатися на вас у соцмережах, як зв'язатися з вами у разі потреби та ін.

Якщо ви відправляєте проморозсилки від імені всієї команди, не забудьте про це згадати.

Якщо ж від свого імені — обов'язково додайте своє фото, контактну інформацію та щось на кшталт «Незабаром зустрінемося».

(Джерело: шаблон Stripo)

І загальні правила створення ефективних листів

Є кілька універсальних моментів, які варто згадати, говорячи про найкращі практики дизайну email-шаблонів:

• не забувайте про стискання картинок, щоб зменшити час завантаження;

• робіть контент актуальним для клієнтів. Інакше кажучи, персоналізуйте пропозиції та контент розсилок;

• додавайте посилання для відписки!

(Джерело: розсилка від Gap Flash Sale)

На завершення

Кожен розділ цієї статті написаний для того, щоб допомогти вам покращити ваші розсилки. Пам'ятайте, що для удосконалення навичок email-дизайну не існує жодних обмежень. Тому не бійтеся експериментувати, шукайте найефективніші методики для свого бренду і створюйте розсилки разом із Stripo — ми допоможемо вам на всіх етапах!