Шапка листа: все, що треба знати

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

Якщо спитати практикуючого емейл-маркетолога про хедер та його місце в листі, то перш за все ви почуєте, що це верхня частина листа з логотипом і меню, тобто все, що знаходиться вище контенту або тіла листа. Насправді email header — більш широке визначення, до якого входять:

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

Давайте детальніше поговоримо про хедер як частину листа.

Header як елемент листа

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

В ідеалі хедер має бути привабливим, інформативним і відповідним до фірмового стилю компанії. Тоді листи працюватимуть на впізнаваність логотипу та бренду компанії.

Стандарти оформлення хедера

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

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

Посилання на веб-версію листа

Не в усіх поштових клієнтах лист відображається однаково добре. Так, треба тестувати й домагатися коректного вигляду верстки на всіх пристроях, в усіх браузерах та поштовиках, але на практиці цього досягти складно. Можуть не відображатися картинки, шрифти й інші елементи. Посилання "Переглянути в браузері" дозволяє всім підписникам побачити лист саме таким, яким його замислив дизайнер.

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

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

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

Іноді посилання на веб-версію розміщують у футері. Цей варіант припустимий, але тоді посилання не виконує основної функції: навряд чи до нього доскролять, якщо лист не відобразився.

Логотип

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

У прикладі нижче — лише лого й нічого зайвого в розсилках The Strategist.

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

Логотип і меню

Ще один популярний приклад оформлення шапки листа — компоновка логотипу й меню з найпопулярнішими категоріями товарів або розділами сайту. Більшість представників ecommerce використовують такий варіант. Варіації можуть бути різними:

лого вгорі, меню знизу;

лого ліворуч, меню праворуч.

Як зробити шапку листа оригінальною

Нижче – кілька прикладів шапки, зверстаної не за традиційною схемою. Ця добірка допоможе вошуку ідей та натхнення.

У хедері розсилки Bobby Brown розмістили рядок з інформацією про безкоштовну доставку, щоб одразу зацікавити підписника вигідною пропозицією:

Кнопку СТА додають до хедера з тією ж метою — привернути увагу при першому погляді на лист:

Одразу два варіанти меню додає до хедера компанія DzagiGrow: праворуч від лого та окремим додатковим блоком внизу:

Замість меню під лого можуть бути розміщені іконки соцмереж — так підписники з більшою ймовірністю приєднаються до ком'юніті:

Лого на основному банері може замінити собою хедер:

Логотип, соцмережі та телефони кол-центру:

Як зверстати шапку email-повідомлення в редакторі eSputnik

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

За замовчуванням для всіх полос у базових шаблонах системи попередньо налаштовано ​​область "Контент". Перше, що вам слід зробити, — змінити область верхньої полоси з "Контент" на "Хедер":

Призначте параметри для цієї частини листа у вкладці "Оформлення":

• розмір тексту;

• колір фону;

• колір фону контенту;

• колір тексту;

• колір посилань;

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

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

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

Найпростіший варіант — просто замінити лого в базовому шаблоні системи.

У прикладі нижче здійснено такі дії: структуру з банером перенесено зі смуги "Хедер" до смуги "Контент", оскільки банер знадобиться в листі. У структурі, що залишилася, замінили зображення потрібним логотипом, відкоригували його розміри (у цьому випадку збільшили), а потім видалили блок із декоративним роздільником:

Нижче — ще один приклад. Давайте зробимо шапку з логотипом та іконками соцмереж. Додаємо до полоси "Хедер" порожню структуру з двома контейнерами; в одному з них вибираємо блок із зображенням і додаємо туди логотип, а в іншому вибираємо блок з іконками соцмереж:

Не забудьте проставити посилання під зображеннями та підписати картинки alt-текстом.

Висновок

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

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

Не забудьте додати до header одну важливу деталь — посилання "Переглянути в браузері". Слід надати підписникам можливість переглянути лист у первинному вигляді, якщо в когось із них не всі блоки відобразилися коректно. Але не змушуйте підписників робити це — тестуйте лист перед відправленням.

Дизайн хедера має відповідати фірмовому стилю компанії, його контент може формуватися довільно залежно від завдань розсилки. Хедер може містити:

• логотип;

• меню;

• кнопку CTA;

• іконки соцмереж;

• телефони компанії;

• інше.

Хедер і футер можливо зробити наскрізними блоками — і тоді при внесенні змін до даних компанії не доведеться редагувати всі листи, оскільки шапка й футер оновляться автоматично.

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