Дизайн Структура Шаблон How-to
~ 9 хв читати
86539 перегляди
оцінити
20 грудня 2021

Нова ера адаптивного дизайну

Stripo / Blog / Нова ера адаптивного дизайну

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

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

Як це зробити без навичок кодування — про це ми розповімо нижче.

1. Опція приховати/активувати елементи листів на десктопних і мобільних пристроях

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

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

Як це зробити в Stripo:

  • клікніть на елемент, який ви бажаєте показати/приховати на мобільних пристроях;

  • на панелі налаштувань ви знайдете опцію «Приховати елемент»;

  • клікніть іконку «Мобільний» або «Десктоп».

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

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

Як створити адаптивний макет пошти_настільну версію_з прокладками

(Десктопна версія, з роздільниками)

Як створити адаптивний макет пошти_Мобільна версія_без прокладок

(Мобільна версія, без роздільників)

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

2. Стилі email-дизайну

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

Зробити це можна у вкладці «Адаптивність».

Адаптивний дизайн пошти_Налаштування мобільних стилів за допомогою Stripo_Без коду

У вкладці «Адаптивність» ви можете налаштувати розмір шрифту для:

  • тексту хедера;

  • тексту контенту;

  • тексту футера;

  • тексту інформаційної області;

  • вкладок меню;

  • заголовків 1-3.

Для останніх ви також можете вибрати вирівнювання тексту: за правим/лівим краєм або за центром.

Оптимізовані для мобільних пристроїв листи_Робота зі стилями заголовків

Усі ці стилі будуть застосовані тільки для мобільної версії вашого листа і не вплинуть на налаштування дизайну, які ви встановили у розділі «Загальні налаштування» вкладки «Оформлення» для десктопної версії.

Щоб показати вам, як це працює, ми створили короткий лист з меню та заголовком.

Робочий стіл_Розмір шрифту меню 12 пікселів

(Десктопна версія, шрифт меню 14 пікселів, шрифт заголовка 64 пікселі)

Мобільний_Розмір шрифту та заголовки меню

(Мобільна версія, шрифт меню 18 пікселів, шрифт заголовка 36 пікселів)

Оптимізуйте тексти своїх листів, щоб вони були 100% читабельними на всіх пристроях
Почати

3. Стилі дизайну для кнопок заклику до дії

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

У вкладці «Адаптивність»:

  • встановіть для кнопок більший розмір шрифту в елементі управління «Розмір тексту кнопки»;

  • активуйте опцію «Кнопки на повну ширину», щоб розмір кнопки відповідав ширині екрану смартфона користувача.

Оптимізовані для мобільних пристроїв листи_Ширина кнопки

У такий спосіб ви забезпечите помітність і клікабельність кнопок на мобільних.

Щоб показати вам, як це працює, ми створили короткий лист з кнопкою CTA.

Адаптивний дизайн пошти_Кнопки на комп’ютерах

(Десктопна версія, шрифт кнопки 18 пікселів)

Оптимізовані для мобільних пристроїв листи_Кнопка повної ширини

(Мобільна версія, шрифт кнопки 22 пікселі)

Якщо ви активуєте опцію «Кнопки на повну ширину», то також можете налаштувати верхні та нижні відступи, тобто внутрішній простір між межами кнопки і текстом всередині неї.

Важливо:

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

Спробуйте нову версію редактора шаблонів Stripo просто зараз
Спробувати

4. Вирівнювання елементів

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

Як це зробити в Stripo:

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

  • клікніть потрібний елемент листа у своєму шаблоні;

  • на панелі налаштувань ви побачите значок «Мобільний»;

Адаптивний макет пошти_Налаштування вирівнювання для мобільних пристроїв

  • натисніть його, щоб активувати налаштування вибраного елемента;

  • виберіть потрібний тип вирівнювання.

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

Щоб показати вам, як це працює, ми вирівняли зображення за центром для десктопів і за лівим краєм для мобільних.

Вирівняні по центру зображення на настільних пристроях_Як створити адаптивну пошту

(Десктопна версія, вирівнювання зображень за центром)

(Мобільна версія, вирівнювання зображень за лівим краєм)Вирівняні за лівим краєм зображення на мобільних пристроях

5. Відступи

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

Тож ви можете побажати позбутися відступів для мобільної версії.

Зверніть увагу, що відступи працюють з контейнерами та структурами.

Як це зробити в Stripo:

  • клікніть потрібний елемент листа у своєму шаблоні;

  • на панелі налаштувань знайдіть значок «Мобільний»;

  • Натисніть на нього, щоб активувати налаштування для смартфонів;

Налаштування відступів для мобільних пристроїв

  • встановіть потрібне значення для ваших відступів.

Важливо:

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

Накладки для мобільних телефонів_Одна цінність для всіх сторін

Це значення буде застосовано до всіх чотирьох сторін елемента.

Якщо вам потрібні різні значення для кожної сторони, натисніть кнопку «Більше».

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

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

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

(Десктопна версія, відступи між двома зображеннями в ряд, а також між рядами)

(Мобільна версія, без відступів)Налаштування відступів для мобільних пристроїв_Нульове значення

6. Інверсія елементів листа для мобільних

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

Адаптивний дизайн пошти_Порядок елементів пошти на робочому столі

Зазвичай email-маркетологи використовують його, щоб урізноманітнити свої промо.

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

Як це зробити в Stripo:

  • клікніть значок «Структура» в потрібному ряді;

Значок структуры

  • на панелі налаштувань перемкніть кнопку «Інверсія контейнерів на мобільних»

Кнопка інверсії контейнерів

От і все.

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

Опція інверсії контейнерів вимкнена

(Мобільна версія, опцію інверсії вимкнено)

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

(Мобільна версія, опцію інверсії активовано)

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

7. Адаптивні зображення

Під час розробки адаптивного HTML-листа найпростіша функція, яка нам доступна, — «Адаптивне зображення».

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

Як це зробити в Stripo:

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

Відповідне зображення_Опція ввімкнена

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

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

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

Опція адаптивного зображення вимкнена_Мобільний дизайн

(Опцію «Адаптивне зображення» активовано)

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

(Опцію «Адаптивне зображення» вимкнено)

8. Активація/деактивація адаптивного дизайну листів

Усі шаблони, які пропонує Stripo, за замовчуванням повністю адаптивні.

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

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

Як це зробити в Stripo:

Зверніть увагу, що за замовчуванням цю властивість завжди активовано.

  • на панелі налаштувань перейдіть до вкладки «Загальні»;

  • перемкніть кнопку «Адаптивний дизайн», щоб вимкнути цю властивість

Варіант адаптивного дизайну

Щоб показати вам, як це працює, ми увімкнули та вимкнули опцію «Адаптивний дизайн» для одного листа.

Опція адаптивного дизайну вимкнена_Створення оптимізованої для мобільних пристроїв пошти

(Мобільна версія, опцію «Адаптивний дизайн» вимкнено)

Адаптивний дизайн_Опція вкл_Stripo

(Мобільна версія, опцію «Адаптивний дизайн» активовано)

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

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

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

Вас також може зацікавити

Попередні статті Наступні статті
Greatest Examples of GIF animations in Emails_Cover Image
27 жовтня 2021 · 10 хв читати
16 найкращих прикладів GIF-анімацій у розсилках

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

Дизайн Маркетинг
24 вересня 2021 · 18 хв читати
Найкращі шрифти для розсилок: поради та хитрощі

Одна з найсерйозніших проблем під час створення електронних листів — правильно вибрати шрифт. Вага, висота, ширина, колір, форма, інтервал... Чи справді тут все має значення? Так, важливим є все, але найголовніша умова — вибрати читабельний шрифт. У цій статті ми розповімо, як вибрати найкращий професійний шрифт для розсилки. Із Stripo працювати зі шрифтами листів дуже легко Почати Шрифти HTML-листів: основні правила, яких треба дотримуватися Вибираючи оптимальний шрифт, слід враховувати три базових правила: 1. Не використовуйте більше двох шрифтів Якщо ви...

Дизайн Шаблон
08 квітня 2021 · 17 хв читати
Дизайн підпису в листах: 14 найкращих прикладів

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

Дизайн Маркетинг Шаблон
banner9
11 вересня 2020 · 15 хв читати

Дизайн Маркетинг Шаблон
Будьте завжди в курсі останніх новин у сфері email-маркетингу