Як створити дизайн листа мрії: повний посібник

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

Коли ви вирішуєте зробити лист з нуля, виникає купа запитань. Які оптимальні розмір, ширина й висота шаблону листа? Яким має бути розмір розсилки? А що зі шрифтами й кольорами?

Щоб не збитися з курсу, потрібні чіткі орієнтири, — саме тому ми вирішили написати цей посібник. Чому ми? Ми створили 390+ ідеальних шаблонів листів і ще більше унікальних листів для наших клієнтів. Пройдімо разом увесь шлях створення ідеального листа — від розмірів до футера — і подивімося, як зібрати його в Blocks, нашому no-code редакторі листів.

Частина 1. Почнімо з початку

Насамперед треба зрозуміти, якими мають бути розміри шаблону листа. Правильні висота й ширина листа критично важливі, щоб контент коректно відображався, а повідомлення доходило до аудиторії. Оскільки розміри шаблону листа (разом із контентом) зазвичай вимірюють у пікселях (px), у посібнику ми теж триматимемося їх.

Якої ширини має бути лист?

Довгий час середня ширина листа становила 600px для десктопу, а на мобільних пристроях — 320px у вертикальній і 480px у горизонтальній орієнтації. Але з часом роздільна здатність екранів зросла. Сьогодні, за даними цієї статті Selzy, ідеальна ширина десктопної версії листа — 640px, а мобільна ширина лишилася тією самою.

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

І ще одне: якщо зробити мобільну версію листа завширшки 480px, користувачам доведеться повертати телефон, щоб побачити лист правильно. Як і з десктопною шириною, можна зробити її ширшою за 320px, але обов’язково все протестуйте.

Якої довжини має бути лист?

Висоту листа обмежує лише ваша фантазія (і розмір файлу). Ідеальна довжина листа — 1500px, але можна зробити його й довшим, навіть до 3000px! Проте пам’ятайте: що довший лист, то вища ймовірність, що користувач подумає «забагато букв» і просто його закриє.

А якщо контенту в листі багато, подбайте про структуру: використовуйте марковані списки, скорочуйте абзаци, додавайте заголовки. Крім того, частину інформації можна винести на зображення, використати GIF чи навіть додати відео!

Якою має бути вага розсилки?

Лист не повинен важити більше за 102 КБ. Завжди пам’ятайте про це й не перевантажуйте лист контентом (і йдеться не лише про зображення чи відео).

Вагу листа рахують за вагою HTML-коду. Що більше рядків коду, то більший файл. Тому стежте за обсягом контенту: кожен блок, так би мовити, на рахунку.

А що, як перевищити ліміт у 102 КБ? Результат простий: деякі поштові клієнти (наприклад, Gmail) обріжуть лист. Якщо обрізано футер, іноді з цим можна змиритися, але якщо лист обривається посередині — це зовсім інша історія. Стежте за цим.

Як створити лист з нуля в Blocks?

У Blocks можна створити гарний лист, не написавши жодного рядка коду! Почніть із порожнього шаблону, згенеруйте лист за допомогою ШІ або оберіть шаблон із галереї, а потім перетягуйте блоки контенту на полотно й налаштовуйте властивості елементів і параметри листа в панелі праворуч.

Частина 2. Як змусити лист сяяти

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

1. Прехедер і хедер (висота, ширина, вміст)

Прехедер — тонкий рядок над листом. Зазвичай він також показується після теми листа. Прехедер може розвивати тему (наприклад, розповідати про безкоштовну доставку чи додаткові знижки) або мати суто практичне призначення (як-от містити посилання «переглянути в браузері»).

Щодо форматування тексту прехедера, варто пам’ятати кілька речей. Шрифт у прехедері має бути меншим (але, звісно, не надто дрібним), ніж у тілі листа. Наприклад, якщо в тілі листа шрифт 14px, для прехедера тримайтеся близько 10–12px. Щодо висоти прехедера, 55–60px цілком достатньо: якщо зробити його більшим, він надто виділятиметься.

І, звісно, не забувайте про довжину тексту прехедера: вона має бути в межах від 50 до 100 символів.

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

Якщо в хедері логотип стандартного розміру, найкраща висота — 70px. Якщо додаєте в хедер кнопку чи текст (або використовуєте більший логотип), висоту можна збільшити до 100–150px. Для хедера з меню можна збільшити висоту аж до 200px. Але пам’ятайте: високий хедер перетягуватиме на себе забагато уваги.

Окрім верхніх і нижніх відступів, можна додавати відступи ліворуч і праворуч від блоків. На відміну від верхніх і нижніх, бічні відступи мають бути однаковими в усьому листі: якщо в тілі листа бічні відступи 40px, то й у прехедері та хедері вони мають бути 40px.

Щодо дизайну хедера, межа — лише ваша фантазія й загальний стиль листа. Пам’ятати треба одне: усі елементи мають виглядати узгоджено і на десктопі, і на мобільному.

2. Банер (висота, ширина, що можна й чого не варто)

Банер листа — це зображення у форматі JPG, PNG чи SVG, яке привертає найбільше уваги й стає ідеальним полотном для креативу. Можна гратися з розміром банера, стилями шрифтів (і їхнім розміром теж) і різними кольорами. Але, звісно, знайте міру: банер, перевантажений контентом, радше перетвориться на безлад, ніж привабить погляд.

Розміри зображень у листі:

Ширина банера зазвичай залежить від загальної ширини листа. Наприклад, якщо лист завширшки 600px на десктопі й 320px на мобільному, банер може мати таку саму ширину. До нього можна додати й бічні відступи, але пам’ятайте, що вони мають бути однаковими в усьому листі (якщо в усіх інших блоках 40px, то й у банера має бути стільки ж).

Щодо довжини банера, реального ліміту немає — головне знати міру. Втім, радимо робити банер завдовжки 700–1400px. Довший банер, найімовірніше, більше зашкодить листу, ніж допоможе.

3. Текст (стиль шрифту, розмір, кольори, форматування)

У дизайні тексту листа легко заплутатися. Який розмір шрифту найкращий для листа? Може, є якийсь професійний шрифт і розмір, яким треба користуватися? Що обрати для свого листа серед десятків варіантів?

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

Стиль шрифту:

Є дві основні групи шрифтів: Serif (із засічками) і Sans Serif (без засічок). Різниця — у завитках на літерах: у шрифтах родини Serif вони є, а в шрифтах Sans Serif — ні.

Спочатку в Blocks був лише обмежений набір шрифтів. Але після низки оновлень ми підтримуємо й Google Fonts! Стартовий набір містить безпечні шрифти — ті, що коректно відображаються на всіх пристроях і в усіх поштових клієнтах. Ось вони:

А от із Google Fonts трохи складніше: деякі поштові клієнти й пристрої можуть показувати їх некоректно. Звісно, користуватися ними можна, але тоді обов’язково тестуйте листи перед надсиланням.

Радимо використовувати в листі не більше двох шрифтів. Так лист лишатиметься цілісним і легким для читання, а текст — чіткішим (а це досить важлива складова доступності будь-якого листа).

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

Звісно, другий варіант виглядає ефектніше, але читати його значно важче.

Розмір шрифту й рядка:

Випробувавши кілька комбінацій розмірів заголовків, підзаголовків і тексту, ми дійшли висновку щодо оптимального розміру шрифту:

• 22–24px для заголовків;
• 18–20px для підзаголовків;
• 14–16px для основного тексту.

Ідеальний міжрядковий інтервал — 150–200%. Так текст буде чітким і приємним для ока читача.

І пам’ятайте: професійного шрифту й розміру для листів не існує. Усе залежить від контексту й вашого художнього рішення. Але, звісно, завжди дбайте про читабельність і не робіть текст ні надто великим, ні надто дрібним.

Колір шрифту:

Порада тут схожа на ту, що й про шрифти: використовуйте в листі не більше двох кольорів тексту. Обирайте контрастні, щоб текст був доступнішим.

Форматування тексту:

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

• Жирним зазвичай виділяють слова, на які читач має звернути увагу (наприклад, дату, умови розпродажу тощо).
• Курсивом виділяють цитати й назви книжок, фільмів тощо.
• А підкреслюємо ми посилання: це звичний спосіб використання такого форматування.

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

4. Кнопки (ширина й висота, колір, шрифти, відступи)

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

• Кнопки мають вирізнятися на тлі фону й решти контенту листа. Вони мають бути помітними й одразу впадати читачам в око.
• У мобільній версії листа кнопки мають бути досить великими, щоб читачі без проблем могли на них натиснути.
• Використовуйте для кнопок контрастні кольори, щоб їх було добре видно.
• Залишайте вільний простір і додавайте відступи навколо заклику до дії на кнопці. Так його буде легше прочитати й натиснути.

5. Блоки контенту (кількість елементів у сітці, їхні розміри й стиль)

Блоки контенту бувають різні: статті, сітки товарів, цитати тощо. По суті всі вони — таблиці з однієї чи кількох колонок. Порада: для сіток товарів краще використовувати не більше 4 колонок, а для інших типів блоків — не більше 2.

Також пам’ятайте, що задовгий блок може відбити в адресата бажання читати далі (а нам цього точно не треба). Знайте міру й тримайте висоту одного блоку контенту в межах 200–300px. Висота всіх блоків контенту в листі має бути близько 1000–1200px.

6. Футер (ширина, висота, обов’язковий і додатковий вміст)

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

1. Фізичну адресу компанії.
2. Посилання на соцмережі.
3. Контакти компанії (телефон і/або email).
4. Посилання на мобільний застосунок / QR-код.
5. Нагадування, чому адресат отримав лист.
6. Посилання на політику конфіденційності.
7. Посилання «Відписатися».

Зауважимо, що і CAN-SPAM Act, і GDPR вимагають додавати посилання для відписки для адресатів у США та ЄС відповідно. Навіть якщо ви не працюєте з цими країнами напряму, у вашій базі все одно можуть бути клієнти з Америки чи Європи.

Тож посилання «Відписатися» краще завжди додавати у футер — про всяк випадок. Зробіть його помітним і дайте підписникам змогу відписатися в один клік. І останнє: жоден ESP не дасть надіслати лист без посилання «Відписатися». Навіть якщо ви забудете його додати, сервіс нагадає вам або додасть його автоматично (як-от Selzy).

Окрім уже перелічених елементів, у футер можна додати й інше (наприклад, меню, інформацію про поточні розпродажі тощо).

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

Частина 3. Останні штрихи й тестування

Наш лист готовий! Лишилося кілька фінальних кроків.

Перевірте, чи однакові відступи між елементами. Вони не мають бути ні надто малими, ні надмірно великими: ідеальний розмір — 30–40px. Також переконайтеся, що розмір тексту однаковий в усіх блоках, у кожного зображення є alt-текст, а всі посилання на місці.

Не забудьте додати до посилань UTM-мітки (якщо потрібно). UTM-мітки — це короткі фрагменти коду, які дають змогу відстежувати ефективність кампаній. Якщо ви верстаєте лист вручну, доведеться додавати їх до кожного посилання по черзі, а в Blocks їх легко додати до всіх посилань у кілька кліків!

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

Висновок

Як бачите, створити гарний лист з нуля зовсім не складно! Звісно, одні рекомендації (наприклад, щодо розмірів шаблону листа) суворіші за інші (як-от вибір найкращого розміру шрифту). Але з нашим докладним посібником ваш шлях у дизайні листів точно не зіб’ється з курсу!