Демо-редактор Увійти →
Дизайн Структура Шаблон How-to
~ 7 хв читати
78031 перегляди
оцінити
28 березня 2020

Stripo. Адаптивність повідомлень

Stripo / Blog / Stripo. Адаптивність повідомлень

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

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

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

Найпростіша функція, якою ви можете користуватися, — “Адаптивне зображення”.

Stripo-Responsive-Image-Option

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

Stripo-Display-of-Correct-and-Incorrect-Image

Важливо! Якщо ви бажаєте, щоб ваша картинка і на телефоні, і на комп’ютері відображалась в одному й тому ж розмірі, включати “Адаптивність зображення” не треба.

Також важливо! Якщо ваша картинка мала за розміром – “Адаптивність зображення” має бути відключена, інакше маленька картинка розтягнеться на всю ширину повідомлення.

2. Приховування блоків

Якщо вам треба, щоб якийсь елемент не відображався на мобільному пристрої – працювати над кодом більше не потрібно – адже є проста функція “Приховати на мобільному”.

Stripo-Hide-on-Mobile-Devices

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

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

Stripo-Hide-Animation

 

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

Stripo-Hide-on-Mob-Devices

3. Налаштування шрифтів та кнопок

Окремо ви можете налаштовувати відображення шрифтів та кнопок для мобільних пристроїв. Для цього вам треба:
1. перейти в розділ “Оформлення”;
2. відкрити блок “Адаптивність”.

Stripo-Customizing-Fonts

Для того щоб створити максимально комфортний вигляд вашого письма, доступне редагування розміру загального тексту й заголовків – ви можете задавати окремо розмір основного тексту й заголовків H1, H2, H3.

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

Stripo-Full-Width-Button

4. Адаптація під Gmail App

Одним із найпоширеніших поштових клієнтів для смартфонів являється – Gmail App.

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

В Stripo ви можете використовувати функцію “Адаптивність під Gmail App”, аби заздалегідь запобігти можливі проблеми з відображенням вашого листа.

Для цього вам треба:

  1. перейти в розділ “Оформлення;
  2. включити перемикач “Адаптувати під Gmail App”.

Stripo-Adapt-for-Gmail

Важливо! Використання старих версій Gmail App може привести до некоректного відображення вашої розсилки

5. Кастомне налаштування шрифтів

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

Для початку варто зрозуміти, де саме знаходиться адаптивність у коді. Тут все просто – відкриваємо редактор коду й переходимо до вкладки CSS. Наразі вас знадобиться вся таблиця стилів, але найцікавіше почнеться після рядка “@media only screen and (max-width: 600px) {“ – це і є початок адаптивності.

Stripo-CSS-Tab

Важливо! Якщо ви хочете красивого листа для телефону – краще нічого не видаляти з цього коду.
В прикладі ми маємо досягти ось такого результату:

Stripo-Results-You-can-Achieve

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

Stripo-Customizing-Fonts

Вирішення вписується лише в декілька рядків коду. Для початку вам треба додати до тегу, який містить текст, клас “text-m-small”, завдяки якому ми зрозуміємо, що він застосовується до тексту на мобільному і робить його меншим.

Stripo-Decreasing-Text-for-Mobile

А у вкладці CSS, одразу ж після рядку “@media only screen and (max-width: 600px) {“ додаємо наступний код:
 

.text-m-small {
       font-size: 10pt !important;
}

Цей код завдає розмір текстові в 10 пунктів, що дозволяє перетворити некрасивий з’їхавший блок у рівний та без переносів:

Stripo-Results-You-Achieved

6. Регулювання відступів

При додаванні посилань на соціальні мережі може трапитися таке, що всі посилання з’їдуть трохи праворуч або ліворуч. Це трапляється через параметр “Відступи між іконками”:

Stripo-Indents-Between-Icons

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

 

Stripo-Indents-Between-Icons

Stripo-how-to-Achieve-Correct-Display-of-Icons

Треба з останньої іконки видалити відступ на 30 пікселів вліво:

Stripo-Erasing-Indent

В даному випадку іконки відображатимуться рівно по центру екрану:

Stripo-Achieve-Correct-Display-of-Icons

7. Підміна картинки для мобільних пристроїв

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

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

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

Є 2 способи додавання окремого банера для мобільних пристроїв:

  1. скористуватися інструкцією нижче;
  2. трохи почекати, і з майбутнім оновленням Stripo ви зможете зробити це лише в 2 кліки.

Розберемо ж перший спосіб. Для початку, як і звичайно, треба створити нову смугу та розташувати в ній підряд 2 блоки з зображенням. В один завантажуємо картинку для перегляду на комп’ютері, а в інший – на мобільному.

Лист виглядатиме дещо дивно:

Stripo-Working-on-Replacing-Images

Наступні маніпуляції проводитимуться тільки всередині смуги з картинками. Придумуємо два класи – один буде описувати поведінку картинки для телефонів, а другий – для комп’ютерів. Назвімо їх “mobile-view” та “desktop-view” відповідно. Знаходимо тег, в якому зберігається кожна з картинок. Він буде матимете такий вигляд

<td class=”esd-block-image es-p20b” align=”center”>

В полі клас прописуємо відповідні вимогам теги та отримуємо наступний код:

Stripo-Making-Chamges-inCSS-Code

Далі все доволі просто – переходимо до вкладки CSS, та, по аналогії з пунктом про зміни розміру тексту, шукаємо рядок “@media only screen and (max-width: 600px) {“.

Прямо над цим рядком додаємо цей код:
 

.mobile-view {
      display: none;
}

Таким чином ми забороняємо відображення елементів з класом“mobile-view” на комп’ютерах та приводимо лист до нормального вигляду:

Stripo-Proper-Display-on-Computers

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

.mobile-view {
      display: table-cell !important;
}
.desktop-view {
      display: none;
}

Цей код говорить про те, що елементи з класом “mobile-view” відображатимуться на мобільному пристрої в звичайному режимі, а з класом “desktop-view” на мобільному пристрої не відображатимуться.

Так ми отримуємо лист, в якому для телефону та комп’ютера підтягуються різні картинки, та читабельність зберігається на будь-якому пристрої:

Stripo-Correct-Display-both-on-Computer-and-Mobile-Devices

Підсумок

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

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

Попередні статті Наступні статті
10 листопада · 8 хв читати
Як створити email-шаблон для Outlook за допомогою Stripo

За допомогою Stripo, що дозволяє експортувати листи до Outlook Apps (в macOS і Windows) та веб-версії Outlook, відправка витончених HTML листів через ваш улюблений email-клієнт тепер стала ще простіша! Додаткові інструменти не потрібні. У цій статті ми покажемо, як експортувати HTML-шаблони до Outlook лише двома кліками. Приєднатися до Stripo Вступ Донедавна було дуже складно, якщо не сказати неможливо, здійснити HTML-розсилку через Outlook, щоб повідомлення при цьому відображалися коректно. Але Stripo знайшли вихід. Тепер ви маєте можливість створювати HTML-шаблони для Outlook...

Маркетинг Шаблон How-to
13 жовтня · 14 хв читати
Запрошення на вебінари: приклади листів і найкращі практики

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

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