Адаптивний email-дизайн: зробіть свій шаблон mobile-friendly

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

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

Що таке адаптивний email-дизайн?

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

Зміст адаптивного email-дизайну

Основна концепція адаптивного email-дизайну полягає у використанні запитів «@media». Фактично стиль можна налаштувати для будь-якої ширини екрана. Необхідно ввести максимальну ширину в пікселях і використовувати відсотки для визначення розмірів елементів. Це допоможе уникнути проблем із переглядом листів.

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

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

Роль медіазапитів у створенні адаптивного email-дизайну

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

Ось приклад шаблону листа, який був створений за допомогою CSS медіазапитів у Stripo:

• all — це вираз за замовчуванням, який оголошує запит для будь-якого пристрою;
• braille — усі пристрої, призначені для сліпих людей. Ці девайси засновані на системі Брайля;
• embossed — принтери, які використовують систему Брайля;
• handheld — смартфони та подібні пристрої;
• print — принтери та подібні пристрої;
• projection — проектори;
• screen — монітори та їхні екрани;
• speech — голосові кодери, програми, які відтворюють голос або читають текст вголос. Голосові браузери, наприклад;
• tty — пристрої з фіксованою шириною і довжиною рядка (телетайпи, термінали даних, пристрої з обмеженнями за екраном);
• tv — телевізори.

Для реалізації адаптивного email-дизайну завжди використовується тип «screen».

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

• width;
• height;
• device-width;
• device-height;
• orientation;
• aspect-ratio;
• device-aspect-ratio;
• color;
• color-index;
• monochrome;
• resolution;
• scan;
• grid.

Більшість функцій стилів медіазапитів можуть мати префікси «min-» або «max-». Зазвичай мінімальні та максимальні значення вводяться в пікселях, а для визначення всіх інших значень використовуються відсотки.

Як працює адаптивний email-дизайн?

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

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

З іншого боку, тепер не потрібно створювати два різні шаблони листів. Можна просто визначити два різні стилі й оголосити, який з них буде використовуватися залежно від ширини екрану. Такий підхід використовується частіше, ніж той, за якого застосовується кілька різних шаблонів. У результаті виходить адаптивне рішення, яке виглядає не гірше, ніж будь-який інший email-дизайн.

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

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

Тут подано результати тестування адаптивних шаблонів листів від Litmus для різних мобільних клієнтів Gmail:

Вимоги до адаптивного email-дизайну 

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

Використовуйте тільки веб-безпечні шрифти 

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

• Arial;
• Verdana;
• Tahoma;
• Courier New;
• Times New Roman;
• Trebuchet MS;

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

Вам також може сподобатися

Найкращі шрифти для листів: поради та рекомендації з використання

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

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

Структуруйте листи

Заборонено використовувати простий текст. Використовуйте картинки і кнопки, а текст діліть на невеликі абзаци. Це забезпечує читабельність. Не варто використовувати весь екран лише для звичайного тексту без абзаців. Використовуйте короткі речення. Оптимальна довжина рядка тексту має становити від 65 до 75 символів.  

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

(Джерело: Mailibr)

Використовуйте чіткі повідомлення та короткий контент 

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

(Джерело: Maillibr)

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

У разі використання шаблонів з двома або трьома колонками на мобільних пристроях може виникнути ситуація, коли контент буде настільки дрібним, що стане нечитабельним, те ж саме станеться з кнопками і посиланнями. Подбайте про mobile-friendly дизайн. Розмір клікабельного елемента має бути не менше 44×44 пікселів.

Складіть коротку і зрозумілу тему листа 

Не використовуйте caps lock і рідкісні скорочення. Зрозуміла і переконлива тема — половина успіху email-маркетингових кампаній. Пам'ятайте, що персоналізована тема листа працює краще, ніж навіть гаряча тема.

Використовуйте чітку вертикальну ієрархію 

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

(Джерело: Maillibr)

Не перевантажуйте маркетингові листи непотрібними зображеннями 

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

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

(Джерело: Maillibr)

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

Використовуйте плавні зображення

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

Ось спосіб зробити зображення плавним (для мобільних телефонів з максимальною шириною 480 px) за допомогою медіазапиту:

<style type="text/css">
   @media only screen and (max-width: 480px){
       .emailImage{
           height:auto !important;
           max-width:600px !important;
           width: 100% !important;
       }
   }
</style>

Ось список найбільш широко використовуваних відносних одиниць:

• відсоток — %;
• ex (розмір шрифту, пов'язаний з висотою x-height) — ex;
• em (розмір шрифту) — em;
• root em (розмір шрифту кореневих елементів) — rem;
• висота області перегляду — vh;
• ширина області перегляду — vw;
• максимальна область перегляду — vmax;
• мінімальна область перегляду — vmin;
• частинка (дробова частина числа) — fr;
• символ (символ тексту) — ch.

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

Ще одне рішення — використовувати SVG-зображення замість найбільш популярних PNG і JPEG. Цей формат дозволяє зумити і змінювати розміри екрану без втрати якості зображень.

Ще один момент — формат SVG дає змогу змінювати колір і фон зображення, додаючи відповідні значення в код під час оголошення елемента. Слід знати, що SVG-зображення набагато більші за зображення PNG і JPEG тієї ж роздільної здатності. Можливо, саме тому SVG використовується менше, ніж інші формати зображень.

Працюйте над текстами 

Як уже зазначалося вище у вимогах до дизайну для створення адаптивного шаблону, оптимальна довжина рядка має становити 65-75 символів. Загальна ширина листа в 600 px обмежує можливість написання великої кількості текстового контенту. Навіть кілька речень можуть зайняти багато місця.

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

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

Найбільш часто використовуваний шрифт розміром 14 px ідеально підходить для десктопів, але для мобільних пристроїв він недостатньо великий. Використовуйте шрифт розміром не менше 16 px для текстового контенту. Водночас не використовуйте занадто великий розмір шрифту для заголовків і підзаголовків. Це не дуже зручно, якщо заголовок займає 3-4 рядки.

Ніколи не пишіть текст після футера лише для того, щоб дотримуватися правила, яке звучить так: співвідношення зображень до тексту має бути 60% до 40%. Іноді спам-фільтри не пропускають листи, що містять лише графічні елементи. У цьому випадку просто подумайте, чи всі зображення необхідні для розуміння сенсу вашого листа. Зробіть кілька додаткових блоків контенту в листі і давайте виключно корисну інформацію.

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

(Джерело: Maillibr)

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

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

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