Банери в листах: типи, розміри та як їх створити за кілька хвилин

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

Банер — це перший елемент, який бачать одержувачі. Тому він має бути привабливим, зачаровувати та викликати емоції. Правильний вибір розміру банера — запорука його гармонійного поєднання з email-дизайном.

Ми розглянемо деякі з найпопулярніших типів банерів, обговоримо найкращі практики дизайну та покажемо, як легко втілити ваші ідеї за допомогою Stripo.

Ключові висновки

1. Ідеальний розмір банера для десктопів зазвичай становить близько 650-700 пікселів у ширину та 90-200 пікселів у висоту, а для мобільних пристроїв — 350 пікселів у ширину та до 100 пікселів у висоту.
2. Темний режим — це клопітка справа, коли йдеться про банери в листах, оскільки він може змінити колір тексту, кольори фону та прозорі елементи банера. При цьому банери у вигляді одного зображення зазвичай залишаються без змін.
3. Створювати банери для Outlook зазвичай складніше, оскільки потрібна кропітка робота з кодом, щоб забезпечити їх привабливий вигляд, адаптивну поведінку, відображення динамічного тексту поверх банерів і, загалом, правильну роботу банерів з фоновим зображенням.

Що таке банер у листі?

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

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

(Джерело: Email Love)

Банер у хедері та банер у підписі

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

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

(Джерело: Email Love)

Тим часом банер у підписі листа знаходиться поруч із підписом (зазвичай одразу під ним). Його головна мета — ненав’язливо просувати щось (завдяки невеликому розміру) у звичайних листах та забезпечувати постійну видимість бренду.

(Джерело: Mysignature.io)

У чому полягає важливість банерів у листах

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

Види банерів у листах для різних цілей

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

Промобанери

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

(Джерело: Email Love)

Сезонні та святкові банери

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

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

(Джерело: Email Love)

Банери про вакансії

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

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

Банери з соціальним доказом

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

(Джерело: Email Love)

Банери для корпоративного брендингу

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

(Джерело: Email Love)

Оптимальні розміри банерів у листах

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

• ідеальний формат банера для десктопів — ширина 650-700 пікселів і висота 90-200 пікселів;
• мобільний банер шириною 350 пікселів і висотою до 100 пікселів чудово підійде для екранів смартфонів;
• банер у підписі шириною 600 пікселів і висотою 150 пікселів буде добре виглядати у футері;
• загальний розмір файлу у форматі PNG повинен становити близько 40 КБ.

Найкращі практики дизайну банерів у листах

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

Дотримуйтесь стилю бренду

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

Більшість компаній мають власні фірмові шрифти, тому використання цих шрифтів під час створення тексту — це надійний спосіб створити брендований банер для листа. Крім того, не забувайте про логотип та супутні елементи дизайну (як це зробила компанія PlayStation із іконками кнопок геймпада).

(Источник: Email Love)

Колір, контрастність і читабельність

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

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

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

(Джерело: Email Love)

Типографіка для будь-якого поштовика

Почнемо з загального і скажемо, що додавання тексту на банери — не завжди вдала ідея. Залежно від вибраних шрифтів цей текст може створити певні проблеми, оскільки існує висока ймовірність того, що ваші кастомні шрифти в банерах можуть не підтримуватися поштовиками. У результаті він буде замінений стандартними підтримуваними шрифтами, як-от Arial, Helvetica та іншими.

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

(Джерело: Email Love)

Візуальна ієрархія та один чіткий CTA

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

(Джерело: Email Love)

Як крок за кроком створити банер для листа в Stripo

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

Перетягніть блок «Банер» у лист

Для початку потрібно додати банер у шаблон листа. У нас є спеціальний блок «Банер», який потрібно перетягнути в шаблон.

Завантажте зображення

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

У нашому прикладі вибрано варіант «Фотосток». Достатньо просто клікнути на потрібне зображення (якщо ви одразу не бачите потрібних зображень для своїх дизайнерських ідей, введіть пошуковий запит у відповідне поле), і воно автоматично додасться в банер.

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

Налаштуйте розмір зображення

Щоб вказати правильний розмір банера в листі, перейдіть на вкладку «Налаштування». У розділі «Розмір» можна налаштувати необхідні параметри.

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

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

Просто вкажіть потрібні розміри за допомогою цих кнопок.

Крім того, у розділі «Форма обрізки» можна вибрати одну з попередньо встановлених орієнтацій (вертикальну чи горизонтальну).

А щоб банер у вашому листі правильно відображався на екранах мобільних пристроїв, перейдіть до налаштувань мобільної версії в Stripo, вибравши опцію «Мобільний вигляд».

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

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

Зміна форми обрізки здійснюється так само, як і у версії для десктопів.

Додайте зображення, текст і посилання

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

Для цього в налаштуваннях блоку «Банер» виберіть пункт «Зображення».

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

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

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

Ви додали зображення з CTA, щоб привернути увагу. А як зробити банер клікабельним? Достатньо просто ввести посилання у відповідне поле. Після цього весь банер перетвориться на одну велику кнопку з CTA, яка спрямує одержувача на потрібну вам сторінку.

Якщо вам потрібні додаткові можливості для оформлення зображення банера, можна додати текст на нього. Для цього клікніть на опцію «Текст» над банером.

Текстовий блок автоматично з'явиться в центрі банера, і ви побачите вкладку з різними параметрами тексту.

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

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

Що стосується власне тексту, можна зробити наступне:

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

Типи структури банерів

1. Банери з одним зображенням та ціннісною пропозицією

Це найпоширеніший тип банера в промолистах. Його можна використовувати як для анонсу розпродажу на всьому сайті, так і для просування одного конкретного товару. Вирішувати вам.

(Джерело: Email Love)

2. Банери з двома зображеннями

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

(Джерело: Email Love)

3. Банери в рамці

Рамки використовуються або для розділення двох зображень у банері, або для виокремлення заклику до дії в банері.

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

За допомогою рамок можна створювати більш оригінальні розсилки.

Для довідки: під час завантаження зображення, яке вже було обрамлено за допомогою стороннього інструменту поза Stripo, ви не зможете вносити в нього жодних змін ані в нашому, ані в будь-якому іншому конструкторі шаблонів. Рамки також завантажуються у вигляді додаткових зображень.

(Банер без рамок)
(Джерело: шаблон Stripo)

(Банер з рамкою)
(Джерело: шаблон Stripo)

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

4. Банери з CTA-кнопкою

Ще один (найпоширеніший) підхід до створення банерів для листів — додавання до них CTA-кнопки. І це чудове рішення, якщо ви хочете, щоб банер був не лише ефектним, а й став корисною частиною email-дизайну.

(Джерело: Email Love)

5. Банери з прозорими додатковими зображеннями

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

(Джерело: Email Love)

6. GIF-анімовані банери

Анімований банер у форматі GIF — це складна тема, і ми вже обговорювали, чому їх варто використовувати в email-розсилках. GIF-анімації допомагають привернути увагу до ціннісної пропозиції та продемонструвати ширший асортимент товарів на одному екрані.

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

7. Банери з відео

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

Відеоролики, додані на першому екрані, виконують роль банерів у листах.

Використовуйте їх у своїх email-кампаніях, коли це необхідно. У нашій статті «Як додати відео в лист» ми показуємо, як за лічені секунди вбудувати відео в листи за допомогою Stripo.

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

8. Банери з AMP-каруселлю

По суті, цей тип банера — це набір із 3-16 банерів, розташованих на одному екрані. А необхідність для користувачів клікнути на кнопку «Слайд» допомагає підвищити залученість аудиторії та краще взаємодіяти з нею.

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

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

Забезпечте належну роботу банерів у будь-яких умовах: на мобільних пристроях, у темному режимі та в поштовиках

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

Адаптивна поведінка на мобільних пристроях

Зробити так, щоб банер у листі добре виглядав як на десктопі, так і на мобільному пристрої, — непросте завдання. Ось кілька можливих варіантів, які допоможуть вам у цьому:

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

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

Дізнайтеся більше про те, як зробити банер у листі (та лист загалом) адаптивним, у нашій спеціальній статті. 

Як банери відтворюються в темному режимі

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

Банери-зображення

Банери цього типу зазвичай зберігають свій вигляд незалежно від режиму відображення. Поштовики змінюють колір фону всього листа, тоді як зображення банера залишається незмінним, що характерно для всіх форматів (JPG, PNG, GIF). Єдина проблема, яка може виникнути в цьому випадку, — це якщо вихідне зображення банера має яскраві кольори, які на фоні темного режиму виглядатимуть ще яскравіше.

Банери з динамічним текстом

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

Прозорий контент

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

Щоб уникнути різних проблем з банерами та темним режимом, ось кілька порад, які варто врахувати під час розробки дизайну:

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

Найпростіший спосіб перевірити, як виглядатиме лист у темному режимі, — це скористатися функцією прев'ю. У Stripo є детальна функція, яка дозволяє перевірити зовнішній вигляд шаблону листа на десктопі та на мобільному пристрої.

Крім того, одним кліком на кнопку можна перейти до прев'ю темного режиму.

Відмінності між Outlook, Gmail та Apple Mail

Окрім адаптивності й темного режиму відмінності у відображенні банерів у популярних поштовиках, як-от Outlook, Gmail та Apple Mail, можуть спричинити чимало клопоту. Ці відмінності важливо враховувати під час розробки банерів, тому давайте коротко їх розглянемо.

Основні проблеми, які можуть виникнути під час рендерингу в Outlook:

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

Gmail набагато кращий, але в нього все ж є свої нюанси:

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

Apple Mail загалом є найнезручнішим з усіх застосунків. Єдине, що варто зазначити: для зручнішого використання в темному режимі слід застосовувати окремий атрибут @media (prefers-color-scheme: dark).

Банери з зображеннями та банери з динамічним текстом: вплив на доставлюваність

При виборі способу оформлення банера для листа у вас є два варіанти його створення: у вигляді зображення або з динамічним текстом. Між ними є різниця:

• у графічному банері всі елементи, тексти і навіть CTA-кнопки об’єднані в одне зображення;
• у текстових банерах використовується HTML-текст, розміщений на зображенні чи фоновому кольорі.

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

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

Ми не закликаємо вас повністю відмовитися від використання банерів з зображеннями та перейти на текстові. У них теж є свої недоліки, оскільки їх складніше ідеально оформити для всіх поштовиків. 

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

Наявність банерів у листах

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

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

1. За можливості використовуйте звичайний текст, щоб банери в листах були доступними для скринрідерів та інструментів перекладу, а також краще масштабувалися на мобільних пристроях.
2. Завжди додавайте змістовні alt-тексти, які точно пояснюють, яка інформація представлена на банері, особливо якщо він складається виключно з зображення або якщо важливий текст намальований безпосередньо на банері, а не знаходиться окремо на ньому.
3. Розробляйте дизайн з урахуванням зручності читання на мобільних пристроях: тексти на банерах мають легко читатися на екранах мобільних пристроїв.
4. Обережно використовуйте анімацію та GIF-ки: вони не повинні бути швидкими та яскравими. Найкраща анімація для банерів — це плинна, коротка та незначна для розуміння повідомлення.
5. Дотримуйтесь контрастності кольорів у всьому контенті банерів: згідно з рекомендаціями WCAG, коефіцієнт контрастності повинен становити не менше 4,5:1 для звичайного тексту та 3:1 для великого тексту.

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

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

Проведіть тестування та оцінку банера

Перш ніж вважати процес створення банера завершеним, завжди варто провести тестування та доопрацювати деталі.

Прев'ю та тестовий рендеринг 

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

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

Платформа Stripo напряму інтегрована з Email on Acid, і ви можете дізнатися, як це працює, у нашій спеціальній статті. 

Зробіть його клікабельним і відстежуйте ефективність

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

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

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

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

FAQ

1. Якого розміру має бути банер у листі?

Ідеальний розмір банера в листі для десктопів становить 650-700 пікселів за шириною та 90-200 пікселів за висотою, що є оптимальним варіантом. Водночас для мобільних пристроїв «золотою серединою» є розмір банера з шириною 350 пікселів та висотою до 100 пікселів. Розмір банера в підписі листа повинен становити 600 пікселів за шириною та 150 пікселів за висотою, а загальний розмір усіх банерів у форматі PNG слід підтримувати на рівні близько 40 КБ.

2. Що слід додавати в банер листа?

Основний контент банера складається з чіткого зображення, ефектного тексту і кнопки CTA.

3. У чому різниця між банером в хедері та банером в підписі?

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

4. Як зробити банер у листі клікабельним?

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

5. Чому банер у моєму листі на мобільному пристрої відображається некоректно?

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

6. Що краще використовувати для банера: зображення чи звичайний текст?

Графічні банери зберігають свій вигляд у будь-якому випадку. Однак вони можуть вплинути на доставлюваність листів. Банери з динамічним текстом простіші у створенні, але складніше забезпечити їхню цілісність у всіх поштовиках і режимах. Усе залежить від вашої дизайнерської концепції, часу та можливостей.