iPhone vs Android: Як зробити так, щоб лист добре виглядало на кожній платформі



У всьому світі все більше людей починає користуватися смартфонами, зростає кількість власників таких пристроїв і в Росії — в Москві девайсами користується вже більше половини всіх стільникових абонентів. При цьому лідерами з продажу в нашій країні Samsung і Apple. В США у двох головних мобільних платформ майже рівність — 47,7% у iPhone, 47,6% у Android, в Європі Android попереду, а в Японії навпаки, на iOS припадає понад 60% продажів.

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

Трохи статистики

З усіх 50% відсотків відкриттів листів на мобільних пристроях, велика частина (26%) припадає на iPhone, і тільки 7% — на Android-девайси.

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

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

За різними даними, одним з найпопулярніших типів контенту у власників смартфонів є… пошта!



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

Дизайн листів для «мобайла» — складний процес, оскільки існує велика кількість пристроїв і поштових клієнтів, кожен з яких володіє своїми особливостями у відображенні повідомлень. В нативному Android-клієнт лист може виглядати зовсім не так, як в Gmail.



Нативне додаток Android 4.x (адаптивне) vs Android-додаток Gmail (не адаптивне)

Дуже важливо розуміти, на якому пристрої користувачі будуть переглядати лист, особливо якщо врахувати той факт, що 71% з них видалить повідомлення, якщо воно виглядає погано на їх пристрої, а 16% у такому разі отпишутся від розсилки.

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

Існуючі обмеження

При верстці листів для iOS і Android важливо пам'ятати, що не всі мобільні поштові клієнти володіють однаковою підтримкою HTML і CSS.








Media Queries
Блокування зображень
Текст ALT
Стилізований ALT Text
Текст превью
Android 4.x (нативний поштовий кьиент)
check-green check-green check-green check-green check-green Android-додаток Gmail
check-X check-green check-X check-X check-green Android-додаток Yahoo! Mail
check-X check-green check-X check-X check-green iOS Mail (нативний поштовий клієнт)
check-green check-X check-green
*
check-green
*
check-green iOS-додаток Gmail
check-X check-X check-X
*
check-X
*
check-green iOS-додаток Yahoo! Mail
check-X check-green check-green check-green check-green
*Зображення за промовчанням iOS, але були вручну відключені в ході тестування. У додатку Gmail для iOS відсутня функція відключення зображень.

Приміром, в iOS і Android програми в різній мірі підтримують адаптивний дизайн. Для створення адаптивних шаблонів застосовується технологія media queries, яка абсолютно по-різному підтримується.

Наприклад, в «нативному» поштовому Android-клієнт media queries підтримуються, однак на устрйоствах Samsung з тією ж ОС — немає (навіть у нативному клієнта). Так відбувається, оскільки Samsung замінила «дефолтний» поштове додаток на клієнт власної розробки. Для того, щоб зробити листа адаптивними в цьому додатку використовується техніка гібридного програмування.

Оскільки media queries підтримується далеко не всіма додатками, дизайнерам поштових розсилок доводиться вдаватися до різних хитрощів, які допомагають створити листи, краще виглядають на мобільних пристроях.

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

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

Все повинно бути більшим
Щоб ще покращити читабельність листи, можна збільшити шрифт тексту (деякі прийоми роботи з типографікою представлені в цьому матеріалі). Читачі не повинні зумить лист, щоб розібрати, що в ньому написано, так що шрифт повинен бути достатньо великим для того, щоб навіть володарі не найсильнішого зору могли зрозуміти, про що йде мова.

Непоганим варіантом буде використання мінімального розміру шрифту рівного 14px для тексту тіла повідомлення і 22px для заголовків. Використання розміру в 14 пікселів дозволить уникнути «полоВмки» навігаційних елементів в iOS, яка автоматично збільшує шрифт мінімум до 13 пікселів.

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

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

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

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



Оптимізація відображення у вхідних
Перший контакт з повідомленням відбувається в папці «Вхідні», тому вкрай важливо оптимізувати те, як лист виглядає в цей момент. Завжди слід використовувати адекватне ім'я в полі From, яке буде відразу зрозуміло одержувачу. Тема листа повинна чітко давати уявлення, про що йтиметься у ньому.

Всі iOS і Android-додатки, згадані вище, підтримують текст превью (preview text). Це додаткові кілька рядків тексту, які можна використовувати, щоб переконати читача відкрити лист. Текст прев'ю «підтягується» з кількох перших рядків основного повідомлення в HTML-шаблону, так що потрібно подбати про те, щоб туди не потрапили службові фрази на кшталт «переглянути у вигляді веб-сторінки» або «не відображається лист?»



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

Крім того слід використовувати A/B-тестування, щоб зрозуміти, які варіанти послань більше подобаються цільової аудиторії. Тестувати можна безліч елементів — від заголовків, текстів превью і елементів дизайну до імені відправника листа.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.