Приступаючи до роботи новим новим дизайном емейл-листа, ви завжди шукаєте нові тенденції і намагаєтеся реалізувати їх у своєму власному прикладі, досліджуєте рішення конкурентів або занурюєтеся в творчі ідеї, не розуміючи, що насправді люди хочуть отримати. Навіть якщо ви покладаєтесь на кращі поради від гуру емейл дизайну, у вас немає гарантій, що ваш кінцевий результат, тобто ваш лист, буде працювати так, як ви очікували.
Як бути впевненим, що ваша робота принесе найкращі результати? У цій статті ви знайдете цю відповідь і приклади кращих варіантів дизайну елементів емейлу в 2019 році.
Як вибрати правильний шаблон для емейлу?
Фактично, структура, кількість блоків та загальний розмір електронного листа залежать від сфери діяльності компанії та теми повідомлення. Багато емейл дизайнерів використовують шаблони з двома колонками для контенту, але існує теорія, що ліпше обирати темплейт з однією колонкою, тому що він ліпше адаптується під мобільні пристрої.
Проте, якщо ви використовуєте адаптивний шаблон емейл листа з двома колонками для контенту, він буде адаптований до структури з однією колонкою для мобільних телефонів. Таким чином, насправді, не має значення, скільки стовпців ви будете використовувати, якщо ваш шаблон дійсно адаптивний. Згідно зі статистикою 67,2% користувачів перевіряють електронну пошту за допомогою мобільних пристроїв, тому варто подбати про свою мобільного аудиторії.
Основною вимогою при розробці шаблону електронного листа є вимога простоти і розміщення та форматування контенту таким чином, щоб його було зручно читати й переглядати. Важливо, щоб дизайн емейл темплейту вдало поєднувався з суто брендовими елементами, як, наприклад, логотип компанії.
Якщо це вітальне повідомлення, спробуйте зробити дизайн електронного листа схожим на веб-концепцію, яку ви використовуєте. Варто звернути увагу на можливість зміни шаблону без зміни контенту. Stripo дозволяє це зробити.
Виберіть шаблон емейлу, який відповідає вашим основним вимогам і просто додайте або видаліть необхідні або зайві блоки, використовуючи функцію перетягування. Неважливо, чи вибрали ви правильну кількість блоків відразу, або за одну сесію редагування, тому що їх можна видалити або додати пізніше, сам темплейт можна зберегти і повернулися до редагування пізніше, як це легко зробити в редакторі Stripo:
Оптимальна ширина для створення шаблону листа складає 600 пікселів для десктопної версії і 320 пікселів для шаблону, який буде доступний через мобільні пристрої. Довжина може відрізнятися бо вона залежить від кількості і довжини самого контенту. Обмежень щодо довжини листа немає, але це не означає, що його можна зробити нереально довгим. Не відправляйте ті повідомленні, які вам самим важно доскролити до кінця – їх ніхто не буде читати повністю.
Якщо ви вирішили зробити оригінальний дизайн електронного листа, подібний якому ви ніколи і ніде не бачили, і жоден з ваших конкурентів не робив нічого подібного, то вам не слід спиратися на ті темплейти, що ви можете знайти і скачати у вільному доступі. Вам необхідно створити шаблон електронного листа самостійно, тобі він дійсно буде унікальним.
Якщо ви правите чужий HTML код, є велика вірогідність того, що там лишиться бага зайвого коду. Цього звісно можна уникнути, якщо ви робите емейл дизайн від початку і до кінця. Кращі практики для дизайну електронних листів, які ми зібрали для вас, безумовно, принесуть нові ідеї і натхнення, тому їх слід враховувати починаючи роботу над дизайном. Краще створити кілька шаблонів на одну й ту саму тематику й перевірити, який з них принесе кращі результати.
Як повинен виглядати хедер емейлу?
Хедер листа часто містить назву компанії і логотип. Це хороший вибір, щоб стисло ідентифікувати свою компанію і до того ж підвищити рівень впізнаваності.
Рекомендується додати панель меню або панель навігації для листа в хедер. В такому випадку одержувач може відвідати ваш офіційний сайт чи то інтернет магазин, навіть не читаючи сам листу або зможе легко знайти цікаву інформацію за один клік.
Не використовуйте декоративні шрифти в хедері листа, тому що вони не будуть відображатися правильно. Використовуйте тільки стандартні шрифти. Не намагайтеся помістити туди довге речення, а також не використовуйте caps lock для написання привітання чи то теми електронної пошти. Єдиний виняток для caps lock – це пункти меню, але тільки в тому випадку, коли доцільний такий дизайн. В багатьох випадках надмірне або недоцільне використання Caps Lock тільки дратує одержувача.
Ось ідеальне дизайнерське рішення для реалізації меню в хедері:
Що таке прехедер і чому він дуже важливий?
Прехедер – текстовий рядок, який містить короткий опис теми емейлу, або навпаки – містить коротке повідомлення про акцію чи конкурс. Прехедер видно ще до того, як корисувач відкриє листа у списку вхідних повідомлень одразу після теми. У вас є всього-на-всього 70-100 символів, щоб зацікавити читача відкрити ваш лист, тому не витрачайте цю можливість даремно.
Існує два типи підзаголовків: видимий і прихований. В деякий емейл клієнтах, як, наприклад, Apple Mail, прехедер прихований по дефолту, але його все одно можна прочитати в превью в папці вхідних, до відкриття емейлу. В самому листі тексту прехедеру видно не буде. Зазвичай ви можете управляти опцією видимості.
Ось вам один з прикладів, як зробити дизайн прехедеру, але не обов’язково розміщувати текст в верхньому лівому кутку листа, оскільки завжди текст прехедеру – це саме текст, а не картинка, ви можете завжди скористатися опцією вирівнювання тексту:
Якщо ви не заповните текст прехедеру, одержувачі онлайн-кореспонденції перед відкриттям можуть бачити текст стандартного повідомлення, що лист можна переглянути як веб версію у разі проблем з відображенням. Навіть натяк на якісь проблеми має свій негативний вплив на кількістний показник відкриття листів. Також туди можуть потрапити alt логотипу компанії, або alt іконок соціальних медіа чи першого зображення.
Якщо розмір емейлу перевищує розмір в 100кб для Gmail, то повідомлення урізається. В такому випадку емейл маркетологи звикли ставити опцію відписки від розсилки в прехедер. У разі, якщо ви не написали текст для прехедеру, відразу після теми повідомлення людина побачить слово “Відписатися” ще до відкриття листа. Це більше закликає людину дійсно відписатися від розсилки ніж до прочитання емейлу.
Якщо ви не задаєте текст для прехедеру ви позбавляєте себе можливості заохотити одержувача до прочитання листа. Цього робити звісно ж не треба.
Багато інтернет-магазинів використовують прехедер для повідомлення або нагадування про знижки, розпродажі, акції, конкурси і т. Д .. Фактично, прехедер є додатковим полем для посилення або розширення вашої теми електронної пошти.
Який шрифт вибрати?
Не використовуйте декоративні або авторські шрифти, тому що немає ніякої гарантії, що вони будуть відображатися належним чином у різних поштових клієнтах і на різних пристроях. Щоб використати нестандартний шрифт, ви повинні підгружати його з окремого файлу, і на те, щоб задекларувати шрифт витрачається не одна строка коду. Це все зайве, коли можна зробити дійсно крутий дизайн з використанням стандартних шрифтів.
На мій погляд не стыльки важливо який шрифт ви обрали, а більш важливий його розмір і розмір міжстрокового інтервалу. Ось список стандартних шрифтів, які підтримуються всіма поштовиками і встановлені по дефолту на більшості пристроїв:
Хороша практика HTML емейл дизайну стверджує, що вам слід використовувати тільки один шрифт для основного контенту і використовувати інший лише для заголовків і підзаголовків. Це правило повсякчас порушується, але принаймні звучить логічно.
Можна сказати, що вистачить навіть одного шрифта, просто використовуйте інший розмір для заголовків і підзаголовків. В будь-якому разі вам слід використовувати не більше трьох шрифтів для створення емейл темплейту. Цього 100% вистачить на будь-які потреби.
Якщо ви неправильно використовуєте шрифти, ви можете зробити свій лист нечитабельним. Будьте обачні, обов’язкове тестуйте ваш емейл перед відправкою і краще проявляйте креативність не в виборі шрифтів, чи їхньому форматування, а проявіть творчість у самому контенті.
Зменшіть розмір зображення
Насправді є два найпопулярніших формати зображень для емейл розсилок: PNG і JPEG. Також часто використовуються анімовані GIF файли, але вони мають порівняно великий розмір, тож слід не використовувати більше однієї анмації в листі. Зазвичай GIF анімація привертає набагато більше уваги, ніж статичні зображення. Рекомендують також використовувати не більше трьох зображень PNG або JPEG форматів, але це правило повсякчас порушується.
Ви можете використовувати безкоштовні онлайн-компресори для GiF або PNG і JPEG, щоб зменшити розмір зображень, і, як наслідок, весь розмір повідомлення. Хороша практика – використовувати емейл редактор, який автоматично оптимізує розмір зображення при його загрузці, як це робить редактор Stripo.
Крутою фічею редактора емейлів Stripo є те, що вам не потрібно використовувати Photoshop або будь-якої іншої інструмент для редагування зображень. Ви можете використовувати вбудований редактор фотографій і значно скоротити час на редагування зображень і позбавитись або мінімізувати рутинні процеси. Ось як в Stripo виглядає редактор зображень:
Наступна важлива річ полягає в тому, що вам обов’язково слід додавати альти для зображень. Поштові клієнти, які не відображують зображення, все ще існують, тому краще додати альти, щоб у разі невідображення картинок, людина переглянула лист як веб версію. Якщо не проставити альти людина може навіть не зрозуміти, що там би мала бути картинка, але вона не відображається.
У емейл дизайні існує крута практика, яка рекомендує використовувати іконки замість зображень, в результаті розмір повідомлення значно зменшується, а текст все одно лишається структурованим і не сприймається як безкінечне простирадло.
Ось приклад, де ця практика імплементована:
Виглядає відмінно, чи не так?
Персоналізація
Створення персоналізованої кампанії – це стара, як світ практика, яка використовується в маркетингу на кожному кроці. Статистика стверджує, що повідомлення з персоналізованою темою відкривають на 26% частіше, ніж будь які інші. Ще один факт зі статистики полягає в тому, що персоналізована розсилка забезпечує в 6 разів більше прибутку і на 14% більше open rate, ніж неперсоналізована.
Єдина порада по персоналізації листів – збирайте тільки ту інформацію, яку ви дійсно будете використовувати. Не витрачайте час на збір і аналіз аналітики, яка жодним чином не має впливу на ключові показники емейл кампанії і дані котрої ніяк не можуть поліпшити якість листів.
Ми рекомендуємо вам збирати таку інформацію як:
- Ім’я;
- Вік;
- Стать;
- Сімейний стан;
- Місто і країна;
- Інтереси;
- Історія продажів (тільки для інтернет-магазинів);
- Історія діяльності;
- та ін.
Весь цей набір даних допомагає зібрати сам сабскрайбер. Існує два способи дізнатися цю інформацію, використовуючи анкети і онлайн опитування або відстежуючи активність користувачів на вашому вебсайті через аналітику.
Якщо ви проводите опитування, то слід надати користувачам бонус: ексклюзивний контент для завантаження або невелику знижку, щоб мотивувати юзерів активно приймати участь в опитування і надавати правдиві дані.
Персоналізація – це більше, ніж просто використання імені клієнта в листі, це поняття більше про надання саме тої інформації, яку очікує отримати користувач, саме тому вона настільки важлива.
Банери в емейл дизайні
Основна мета банерів – привернути увагу і збільшити інтерес до читання текстової частини листа. Однією з кращих практик дизайну емейл шаблонів є використання банерів на початку вашого листа відразу після хедеру.
Класичний банер – це картинка з коротким меседжем – це або привітання, або короткий заголовок рівносильний темі листа за змістом і СТА за значенням. Деякі емейл маркетологи використовують більше одного банера, це дійсно доцільно, коли у вас багато тексту і його треба якимось чином структурувати.
Чим відрізняється банер від звичайної картинки? А відмінність ця полягає в тому, що банер обов’язково містить СТА в текстовому, але частише в вигляді кнопок або лінок. На кнопки зазвичай більше звертають увагу, але якщо ви використовуєте лінки, то обов’язково робіть їх у вигляді анорів, і текст анкору має відображати суть того, що доступно за цим посиналанням. Не використовуйте незмістовні фрази типу “тут” або “поислання” тому що іх важко помітити і вони незмістовні.
Це дійсно хороша практика, розділити великий текст декількома банерами. Юзери зазвичай реагують на СТА єлементи більше, коли вони разташовані на банері, а ен в тексті. Використання СТА єлементів разом з банерами забезпечить вас трафіком на ваші цільові сторінки, а товари, які ви продаєте, обов’язково знайдуть свого покупця. Ось приклади хорошого дизайну банера для вашого натхнення:
Ось мінімалістичний банер:
Кнопки і заклик до дії
Існує правило для створення електронного листа: одне повідомлення – одна тема, одна мета і один заклик до дії. Кнопки привертають більше уваги, ніж посилання.
Якщо ви попросите користувача щось купити, прочитати нову статтю і оформити собі преміум аккаутн на вашому сайті, одержувач, ймовірно, не виконає жодної з цих дій. Також дійсно дратує, коли ви занадто часто дублюєте заклик до дії: «Купіть це, купите це, купите зараз!». Принаймі, єдине, що користувач хоче зробити, це попрощатися з цією підпискою.
Формулюйте чіткий виклик дій, користувач має чітко розуміти, що ви від нього хочете. Важливо правило використовувати СТА елементи не всупереч контенту. Якщо ви просите людину спочатку відвідати один з розділів сайту, де ви обновили товари, щоб ознайомитись з ним, а потів в тому ж повідомленні надаєте скидку на ці товари, то очікуйте поганих результатів емейл кампанії. Спершу має йти скидка, потім можливість перейти в певний розділ сайту.
Нижче наведено приклад чіткого заклику до дії в практиці емейл дизайну:
Тут все зрозуміло завдяки короткому описові і виразній кнопці з коротким і яскравим закликом до дії. Якщо ви створите свій заклик до дії подібним чином, не сумнівайтесь в його результативності – він спрацює!
Цей зразок має класний дизайн, але заклик до дії знайти важко, бо його майже не видно:
Футер vs Підпис: Що Вибрати?
У вас може виникнути питання, що краще використовувати підпис або футер в процесі дизайну шаблону електронного листа. Ви можете подумати, що якщо ви робите персоналізовану розсилку, ви повинні використовувати підпис, але це невірно. Футер більш функціональний ніж просто підпис, він надає можливість шерінгу емейлу, ознайомлення з політикою конфіденційності і правами використання контенту, дозволяю відписатися від розсилки або перейти в потрібний розділ сайту за допомогою меню.
Всі промо, трігерні, івентні або інформаційні листи повинні мати футер. Футер вказує на те, що лист відправила саме компанія, а не одна людина.
Судячи з результатів практичних експериментів користувачі з більшою ймовірністю будуть використовувати панель меню в футері, ніж в хедері, тому що вони складають своє враження про цінність емейлу тільки після того, як ознайомились з його вмістом.
Використовуйте підпис тільки в приватній переписці. Для всіх інших ситуацій використовуйте футер і не прогадаєте, ось приклад футеру, який надає повну інформацію про компанію, контактну інформацію та можливість поділитися контентом в соціальних мережах:
Досить великий, чи не так? Якщо ви хочете заощадити місце, не вказуйте повну адресу компанії, бо ніхто не приїде до вас в офіс завдяки розсилці, зробіть мінімалістичний футер:
Ось приклад, де всі правила були проігноровані:
На мій погляд, написати багато тексту після футеру, який є маркером кінця листа, є абсолютно неправильно. Ця інформація точно не принесе користі ні компанії-відправнику ні самому читачеві, тож нащо її вказувати взагалі? Лінки для відписки від повідомлення і переходу на цільові сторінки сайту треба ще пошукати. Взагалі сірий колір шрифта – погана практика емейл дизайну. У різних користувачів різні настройки контрастності й яскравості на їхніх девайсах тож сірий шрифт в багатьох випадках буде майже невидимим.
Висновок
Безсумнівно, що після прочитання цієї статті у вас буде натхнення на переробку старих шаблонів електронних листі та створення нових. Якщо ця стаття принесла вам натхнення, ми задоволені і досягли нашої мети.
Створіть кілька емейл шаблонів на одну й ту ж саму тему і проведіть А/Б тестування, щоб вибрати ліпший варіант. Пам’ятайте не тільки про творчість і оригінальний підхід, але також про оптимізацію розміру листа та релевантність контенту. Сподіваюсь, що ліпші практики емейл дизайну порають вам натхнення і допоможуть досягти нечувано кращих результатів.
0 коментарів