У цьому мануалі пояснюється, як створювати mobile-friendly листи в редакторі Stripo. Основна увага приділяється практичному налаштуванню, керуванню розміткою та поширеним проблемам з мобільними пристроями; наводяться чіткі покрокові інструкції та приклади, які можна застосовувати під час роботи в редакторі.
Ключові висновки
- Можна редагувати окремо мобільну версію і не вгадувати результат: в редакторі можна увімкнути мобільний вигляд, змінити будь-які налаштування і побачити, як вони виглядатимуть на телефонах.
- Спочатку можна визначити глобальні мобільні стилі, а потім у разі потреби налаштувати кожен блок індивідуально: Stripo дозволяє визначати базові правила для мобільних пристроїв у розділі «Загальні стилі», а потім за необхідності перевизначати їх для будь-якої смуги, структури чи блоку.
- Можна контролювати не лише вигляд мобільної версії, але й її вміст: у мобільній версії можна приховувати елементи, змінювати черговість їх розташування, налаштовувати інтервали та вибирати, яке компонування буде в рядку, а яке — у стовпці.
Як Stripo обробляє мобільне відображення
Що означає «mobile-friendly» у Stripo
Усі шаблони листів, що створюються в Stripo, за замовчуванням мають високий ступінь адаптивності, тому їхня розмітка підлаштовується під екрани меншого розміру. Однак можна додатково налаштувати параметри для мобільних пристроїв, щоб листи відображалися саме так, як потрібно. До цих параметрів відносяться: розмір шрифту, розмір кнопок (зокрема кнопок на всю ширину), інтервали (зовнішні та внутрішні відступи на мобільних пристроях), поведінка контейнерів у структурах, а також приховування чи відображення деяких додаткових елементів на мобільних пристроях.
Врахуйте, що кінцевий результат залежить від поштовика: налаштування для мобільних пристроїв базуються на медіазапитах, а деякі програми їх не підтримують. У таких клієнтах налаштування для мобільних пристроїв можуть ігноруватися, і мобільний вигляд може бути схожим на десктопну версію.
Які зміни застосовуються лише в мобільній версії
Налаштування для мобільних пристроїв впливають на те, як лист відображається на смартфонах, але не на його десктопну версію. До них належать розміри шрифтів, розміри кнопок (враховуючи кнопки на всю ширину), інтервали (зовнішні та внутрішні відступи на мобільних пристроях), поведінка контейнерів у структурах та приховування елементів на мобільних пристроях.
Коли мобільні налаштування не працюють
Якщо мобільні елементи керування неактивні або зміни не відображаються, перевірте перемикач «Адаптивний дизайн».
Адаптивний дизайн в налаштуваннях оформлення
Використовуйте це при роботі з налаштуваннями мобільного форматування:
1. Перейдіть до розділу «Глобальні стилі та налаштування».
2. Увімкніть функцію «Адаптивний дизайн».
Якщо функція «Адаптивний дизайн» вимкнена, лист на мобільних пристроях буде виглядати як десктопна версія, а розділ мобільного форматування може бути неактивним.
Почніть із чистого аркуша, використовуючи «Загальні стилі»
Зміна налаштувань стилю між десктопним і мобільним режимами
Розділ «Загальні стилі» дозволяє визначати правила дизайну за замовчуванням окремо для десктопів і мобільних гаджетів. Використовуйте перемикач пристроїв на панелі «Загальні стилі», щоб вибрати режим «Десктоп» або «Мобільний». Кожен режим зберігає свої значення, тому зміни, внесені в режимі «Мобільний», впливають лише на мобільний вигляд, а не на версію для десктопів.
Налаштуйте загальний формат розмітки та базові правила для всього листа
Використовуйте «Загальні стилі» → «Глобальні стилі та налаштування», щоб визначити, як буде виглядати весь лист, перш ніж розпочинати роботу над окремими смугами, структурами чи блоками. Варто зазначити, що не всі функції для десктопів можна застосовувати до мобільних пристроїв.
Але якщо ви створюєте версії і для десктопів, і для мобільних пристроїв, то можете зробити так:
Покрокова інструкція: налаштування глобальних стилів і розмітки
Встановіть загальний фон:
1. Виберіть загальний колір фону для області листа.
2. На екрані десктопу колір фону покриває всю область повідомлення.
3. На мобільних пристроях цей фон прихований.
Додайте фонове зображення (лише для десктопів):
4. Виберіть фонове зображення та визначте його положення.
5. Увімкніть опцію «Повторювати зображення», якщо картинка повинна займати всю довжину листа.
6. Фонові зображення відображаються лише на десктопі та не відображаються на мобільних пристроях.
7. Деякі поштові клієнти, зокрема Outlook, можуть взагалі не відображати фонові зображення, тому встановіть резервний колір фону, близький до кольору зображення.
Налаштування ширини та вирівнювання контенту:
8. Налаштувати ширину й вирівнювання можливо лише в дизайні для десктопів.
9. Встановіть ширину контенту листа. Значення за замовчуванням 600 пікселів.
10. Можна вказати будь-яке значення від 320 до 900 пікселів.
11. Виберіть варіант вирівнювання.
Контрол підкреслення посилань:
12. Активуйте або деактивуйте опцію «Підкреслення посилань» для всього шаблону листа.
Увімкніть напрямок тексту справа наліво:
13. Увімкніть опцію «Напрямок тексту справа наліво» для мов, що вимагають RTL-скриптів, як-от арабська чи урду.
Увімкніть опцію «Користувацькі стилі списків»:
14. Визначіть стилі маркованих списків, які будуть застосовуватися у всьому листі.
Встановіть стандартні значення інтервалів:
15. Налаштуйте «Відступи структури за замовчуванням». Ці відступи автоматично застосовуються до нових структур.
16. Налаштуйте «Відступ навколо повідомлення» для керування відстанню між вмістом листа та межами області повідомлення.
Ці налаштування формують загальну основу для десктопів і мобільних пристроїв, що спрощує подальше налаштування.
Керуйте типографікою та інтервалами для зручності читання на мобільних пристроях
Глобальна типографіка смуг
Покрокова інструкція: налаштування типографіки смуг за типом і точне налаштування смуг
Задайте глобальну типографіку смуг:
1. Перейдіть до «Загальні стилі» → «Стилі смуг».
2. Виберіть тип смуги.
3. Встановіть сімейство шрифтів, висоту рядка та міжлітерний інтервал для текстових блоків. Ці налаштування не впливають на заголовки.
4. Крім того, можна клікнути на блок контейнера → «Смуга».
Встановіть фон смуг:
5. Визначіть колір фону для смуги та вмісту в ній.
6. За необхідності додайте фонове зображення.
7. Встановіть резервний колір фону, оскільки деякі клієнти, наприклад Outlook, можуть не відображати фонові зображення.
Або, якщо ви відкриваєте налаштування смуги, клікнувши на блок контейнера:
Визначіть розмір шрифту для кожного типу смуги:
8. Встановіть розмір шрифту та висоту рядка за замовчуванням для кожного типу смуги.
9. Використовуйте менший розмір шрифту для «Футера» там, де це доречно.
Налаштування інтервалу між смугами на мобільних пристроях:
10. Виберіть конкретну смугу.
11. Встановіть значення «Відступи для мобільного» для керування відстанню навколо смуги в мобільному вигляді.
Приховайте смугу на мобільному пристрої:
12. Увімкніть «Приховати для мобільного», якщо смуга не повинна відображатися на маленьких екранах.
Типографіка в смугах для різних областей листа
Смуги визначають великі секції листа і контролюють зовнішній вигляд тексту в повторюваних розмітках. Кожна смуга може відноситися до певного типу, що дозволяє забезпечити цілісність стилю.
Типи смуг: «Хедер», «Контент», «Футер» та «Інфообласть». Використання типів смуг допомагає застосовувати різні розміри шрифту та правила інтервалів, наприклад менший текст у футері.
Покрокова інструкція: форматування блоку заголовків та їхніх стилів
Налаштуйте заголовок:
1. Виділіть текст всередині текстового блоку.
2. Виберіть H1, H2 або H3 в меню форматування тексту.
3. У мобільному режимі налаштуйте вирівнювання тексту для заголовків, якщо вирівнювання для десктопів погано працює на маленьких екранах.
Встановіть кастомні стилі заголовків у контейнері:
4. Відкрийте «Стилі» і скористайтеся перемикачем, щоб вибрати режим «Десктоп» або «Мобільний пристрій».
5. Виберіть рівень заголовка, який хочете редагувати.
6. Встановіть сімейство шрифтів, міжлітерний інтервал, розмір шрифту, висоту рядка, стиль тексту й колір шрифту.
Створюйте mobile-friendly CTA, на які легко натискати
Налаштування кнопок за замовчуванням, що діють для всього шаблону
Кнопки на мобільних пристроях повинні легко читатися і натискатися. Текст розміром менше 18 пікселів знижує читабельність і збільшує кількість помилкових натискань. Для кнопок на мобільних пристроях рекомендується використовувати шрифт розміром від 18 пікселів.
Встановіть глобальні стилі кнопок
Використовуйте «Загальні стилі» для визначення зовнішнього вигляду кнопок один раз для всього листа, а потім коригуйте значення для мобільних пристроїв окремо.
Покрокова інструкція: налаштування глобальних стилів кнопок
Відкрийте «Стилі кнопок»:
1. Перейдіть до «Загальні стилі» → «Стилі кнопок».
2. Виберіть десктопну та мобільну версію за допомогою перемикача.
Налаштуйте типографіку:
3. Виберіть сімейство шрифтів.
4. Встановіть розмір шрифту та колір тексту.
5. Виберіть стиль тексту та міжлітерний інтервал.
Визначіть форму і колір кнопок:
6. Встановіть колір фону кнопки.
7. Налаштуйте межі: з усіх боків або окремо.
8. Встановіть колір меж і заокруглення меж.
9. Додайте внутрішні відступи.
Налаштуйте ширину кнопок:
10. Увімкніть опцію «Розтягнути за шириною», щоб кнопки адаптувалися до ширини контейнера (лише для десктопів).
Оптимізація рендерингу в Outlook:
11. Увімкніть опцію «Підтримка Outlook», щоб використовувати VML-рендеринг для кращого відображення кнопок у клієнтах Outlook.
Налаштуйте стилі hover-ефекту для десктопів:
12. Налаштуйте кольори фону та тексту при наведенні курсору на десктопі.
13. Ці стилі застосовуються, коли курсор наводиться на кнопку.
Працюйте безпосередньо в мобільному режимі перегляду всередині редактора
Перемикайтеся між десктопною та мобільною версіями під час редагування
Stripo дозволяє редагувати мобільну версію, не виходячи з редактора.
Покрокова інструкція: перемикання між режимами
1. Використовуйте перемикач пристроїв у верхній панелі інструментів.
2. Виберіть «Десктоп» або «Мобільний пристрій», щоб переглянути та відредагувати відповідну версію.
3. Внесіть зміни в активному режимі. Десктопні та мобільні пристрої зберігають окремі значення там, де це підтримується.
Вивчіть поведінку структури на мобільних пристроях
Адаптивна структура: стекінг чи рядок
Як ви вже знаєте, функція «Адаптивна структура» контролює поведінку контейнерів на мобільних пристроях. Коли вона увімкнена, контейнери розташовуються вертикально. Коли вона вимкнена, контейнери залишаються в одному рядку. Вимкнення цієї опції корисно, коли потрібно розташувати елементи на мобільних пристроях поруч один з одним, наприклад, картки товарів або невеликі зображення з коротким текстом.
Інверсія контейнерів: керування черговістю контенту
В адаптивних розмітках черговість контейнерних елементів є важливою. Якщо текст знаходиться ліворуч, а зображення — праворуч, то у разі накладення тексту на зображення текст може опинитися над зображенням. Часто це є небажаним для читання на мобільних пристроях.
Покрокова інструкція: увімкнення інверсії контейнерів
1. Виберіть структуру з двома контейнерами (натисніть на «Структуру» над контейнером).
2. Увімкніть опцію «Інверсія контейнерів».
3. Перегляньте мобільну версію в прев'ю для перевірки правильності черговості.
Пам'ятайте: інверсія контейнерів працює лише для структур з двома контейнерами.
Додайте інтервал між контейнерами
У мобільних розмітках часто потрібен додатковий простір між контейнерами, щоб уникнути скупчення контенту.
Покрокова інструкція: використання опції «Відступ між контейнерами для мобільного»
1. Виберіть структуру.
2. Встановіть параметр «Відступ між контейнерами для мобільного», щоб додати проміжок між контейнерами.
Застосуйте структуру та відступи між контейнерами на мобільних пристроях
Використовуйте відступи на мобільних пристроях для точного налаштування інтервалів без зміни десктопної розмітки.
Покрокова інструкція: налаштування відступів на мобільних пристроях для структури
1. Перемкніться на мобільну версію.
2. Виберіть структуру.
3. Встановіть «Відступи для мобільного».
Ці налаштування застосовуються лише до мобільних пристроїв і не впливають на відступи в десктопній версії.
Обробка зображень для мобільних пристроїв, що запобігає деформації, скролінгу та неякісному обрізанню
Адаптивне зображення: коли його вмикати
Великі зображення можуть вимагати горизонтального скролінгу або виглядати занадто великими на мобільних пристроях. Адаптивне зображення підлаштовує ширину картинки під екран пристрою і вирішує ці проблеми. Цей контрол працює на пристроях, що підтримують медіазапити.
Невеликі зображення (логотипи): запобігання небажаній деформації
Невеликі зображення, як-от логотипи, не повинні розтягуватися на всю ширину екрану.
Покрокова інструкція: вимкнення функції адаптивного зображення для невеликих картинок
1. Увімкніть мобільну версію.
2. Виберіть зображення.
3. Вимкніть опцію «Адаптивність зображення».
4. Встановіть необхідний розмір зображення самостійно.
Стандарти зображень для шаблонів мобільної версії листів
Для стабільного рендерингу на всіх пристроях і клієнтах:
- використовуйте формати JPEG, GIF, або PNG;
- ширина зображення повинна бути 600-800 пікселів;
- перевірте зображення в мобільному прев'ю та реальних поштовиках.
Фонові зображення на мобільних пристроях: що можливо, а що ні?
Фонові зображення мають фіксовані розміри і не адаптуються до ширини екрану так само, як звичайні. Можна налаштувати положення і розмір фонового зображення, щоб поліпшити оформлення, але результати можуть відрізнятися в залежності від поштовика.
Нагадування про обмеження рендерингу:
- фонові зображення в контейнерах, структурах і смугах не відображаються в Outlook;
- загальне фонове зображення відображається на десктопі, але не відображається на мобільних пристроях.
У разі використання фонових зображень завжди налаштовуйте запасний колір фону.
Очищення тексту на рівні блоків для зручності читання
Виправте непривабливі розриви рядків у текстових блоках
На мобільних пристроях текст може розбиватися на рядки хаотично. Часто трапляється ситуація, коли одне слово переноситься в окремий рядок, що погіршує читабельність.
Покрокова інструкція: виправлення розривів рядків
Зменшіть розмір шрифту на мобільному пристрої:
1. Перейдіть на мобільну версію.
2. Виберіть блок «Текст».
3. У «Стилях» зменшіть розмір шрифту для мобільних пристроїв, щоб текст займав один рядок.
Налаштуйте вирівнювання та відступи:
4. Перевірте вирівнювання тексту.
5. Зменшіть відступи зліва і справа, оскільки широкі відступи можуть призвести до небажаних розривів рядків.
Вимкніть перенесення рядків для потрібного рядка:
6. Виберіть рядок тексту.
7. Увімкніть опцію «Прибрати перенесення рядків».
8. Використовуйте цю опцію з розумом. Довгі рядки з забороною перенесення можуть не поміститися на екрані мобільного пристрою і викликати горизонтальний скрол.
Усунення проблем: коли лист втрачає адаптивність після надсилання
Чому адаптивний лист може виглядати на мобільному пристрої так само, як і на десктопі
Деякі мобільні поштовики не підтримують медіазапити. Під час надсилання або експорту деякі поштові клієнти видаляють з коду адаптивний CSS. У цьому випадку мобільні стилі видаляються, а лист відображається на мобільних пристроях як десктопна версія.
Приклад із Gmail: медіазапити видаляються після надсилання з Gmail
Gmail видаляє адаптивні CSS-стилі, коли листи надсилаються безпосередньо з нього. В результаті мобільна версія може виглядати неадаптивною.
Покрокова інструкція: збереження адаптивності для Gmail
1. Експортуйте лист до ESP, який підтримує медіазапити.
2. Надішліть лист у Gmail з цього ESP.
У цьому сценарії лист зберігає свою адаптивність у Gmail.
Приклад із Outlook: адаптивність залежить від версії та застосунку
Не всі версії Outlook підтримують адаптивний дизайн. Деякі автоматично видаляють адаптивні стилі, що призводить до неадаптивного рендерингу на мобільних пристроях.
Відмінності у тестуванні:
- тестові листи, надіслані зі Stripo в Outlook.com, можуть бути адаптивними на мобільних пристроях.
QA-чекліст для мобільної версії перед експортом
Перед експортом або надсиланням листа перегляньте мобільну версію в редакторі.
Перевірте наступне в мобільному прев'ю:
- типографіка: розміри заголовків, читабельність тексту, розбивка на рядки;
- внутрішні та зовнішні відступи: відстань навколо смуг, структур, контейнерів і блоків;
- кнопки: розмір тексту, область натискання і поведінка на всій ширині;
- поведінка контейнера: порядок стекінгу, інверсія та відступи між контейнерами;
- приховані елементи: переконайтеся, що приховані на мобільних пристроях елементи не відображаються;
- зображення: поведінка адаптивності, розмір логотипу і фолбеки для фонових зображень;
- горизонтальний скрол: перевірте наявність широких зображень, великих шрифтів чи неадаптивних структур.
Після прев'ю в редакторі протестуйте лист на різних пристроях і в різних поштових клієнтах. Поведінка поштовиків може відрізнятися, особливо на мобільних пристроях, і тестування на реальних девайсах допомагає виявити проблеми, які можуть не проявитися в прев'ю.
На завершення
Дизайн мобільної версії листа залежить як від налаштувань редактора, так і від поведінки поштовика. Налаштувавши базові параметри в розділі «Загальні стилі», використовуючи мобільне форматування для швидкого налаштування і точно коригуючи структуру, зображення і текст безпосередньо в мобільному вигляді, можна контролювати поведінку листів на невеликих екранах. Перед надсиланням завжди переглядайте мобільне прев'ю і тестуйте лист у різних поштовиках, особливо якщо у вашій роботі використовуються Gmail чи Outlook.
0 коментарів