Це не таємниця, є реальне бажання з боку розробників створювати «чуйні» електронні листи. Тепер у нас є всі технології, які дозволяють адаптувати веб-контент, і неприємно відчувати себе обмеженим у клієнтах електронної пошти, які розвиваються повільніше, ніж веб-браузери. Але є рішення. Тому…
Як досягти неможливо не загубившись у джунглі з електронні клієнти.
[тип роздільника=”” size=”” icon=”зірочка”]
Ринок / Для аналізу
[рядок] [one_third] [counter count=”72″ title=”людей із 100″] [/one_third] [two_third] Останніми роками, зі зростанням ринку смартфонів і планшетів, користувачі Інтернету постійно підключені до на вулиці, на роботі чи в громадському транспорті. Маючи все менше вільного часу, останній – це час, який вони люблять оптимізувати, маючи справу зі своєю електронною поштою. За даними SNCD, Національної спілки прямого зв’язку, у 2013 р. з усіх користувачів, 72% читають свою електронну пошту на своєму смартфоні. [/two_third] [/row] [тип роздільника=”невидимий” size=”big” icon=”зірка”] Це основна причина, чому електронні листи повинен бути доступним на всіх носіях і бути придатним для навігації пальцями.Користувачі стають все більш вимогливими, і, на мою думку, їм не вистачає все більше часу в житті, і вони отримують багато різного роду запитів, тому вони «фільтрують». Всі ми знаємо, що рівень відкриття електронних листів дуже низький: 23% у BtoB і 29% BtoC ( аналіз маркетингу електронної пошти, опублікований у 2013 році Mail Metrics).
Листи часто видаляються ще до того, як їх прочитають (Визнаю себе винним!). Стає дуже важко зацікавити користувачів настільки, щоб відкрити дорогоцінну пошту.
Але якщо випадково ви успішно пройшли цей крок завдяки привабливому заголовку, і як тільки електронний лист відкривається, користувач знаходить щось нечитане на своєму мобільному, воно втрачається. . Користувач не матиме бажання читати цей лист. Він його видаляє.
[тип роздільника=”” size=”” icon=”зірочка”]
код / Перші рішення та питання
Швидко спадають на думку 2 дуже прості і досить очевидні варіанти:
– Проста класична електронна пошта, оптимізована для мобільних пристроїв, із блоками один над одним, без колонізації, великими кнопками та простим дизайном. .. код буде виглядати приблизно так:
Але якщо цей тип електронної пошти буде дуже добре передаватися на ноутбуках, він здасться непридатним для великих екранів (ми не обов’язково хочемо мати величезну кнопку, коли ми знаходимося на робочому столі, ми можемо захотіти, щоб дизайн був трохи більш складним, і рядки може стати занадто довгим і неможливим для читання).
– Проміжний електронний лист, який все ще ґрунтується на використанні параметрів у відсотках. Той же принцип, що й у попередньому прикладі, але тут у нас буде трохи складніший дизайн, використання стовпців буде можливим, наприклад:
Це здається простим і ідеальним рішенням, за винятком того, що за допомогою такого методу текстові блоки все одно, як і в першому прикладі, зазнають величезних змін на дуже великих екранах або на вузьких екранах смартфонів. Дуже довгі рядки або дуже короткі рядки швидко стають нечитабельними, і загальний вигляд постраждає. Те ж саме для зображень, які змінюватимуться від занадто великих до надто малих. Такий тип електронної пошти буде краще працювати на планшетах середнього розміру, ніж на настільних комп’ютерах і ноутбуках.
Два наведені вище рішення прості та швидкі в налаштуванні, але користувацький досвід далекий від оптимального. Завжди знайдеться частина користувачів, яким буде завдано шкоди.
[тип роздільника=”” size=”” icon=”зірочка”]
Зупинимося трохи більше на коді / Трюки
Я провів кілька тестів, прочитав багато статей і тем на форумах і знайшов рішення, завдяки якому електронна пошта працює практично скрізь. Нам довелося б зробити свого роду компроміс між їхніми двома вищенаведеними варіантами, створивши електронну пошту, яка є плавною та адаптивною, на основі використання @mediaqueries та кількох невеликих хитрощів із дизайном, пристосованим для мобільних пристроїв, більш підходящою версією для настільних комп’ютерів, а також адаптивний плавний дизайн для планшетів і настільних комп’ютерів. Це найкраще рішення, але поки воно залишається компромісним.
Ви повинні знати, що не всі клієнти електронної пошти можуть читати @mediaqueries (Перейдіть за цим посиланням для огляду), або викликати інші проблеми. Якщо настільна версія Gmail зберігає стилі, що містяться в тегу 'head' (на відміну від легенди, поширеної в Інтернеті), мобільна версія видаляє будь-який стиль, що міститься в тегу. Те ж саме для Android… тому ви повинні додати їх вбудовано до кожного елемента html. Проблема в тому, що неможливо додати вбудований @mediaqueries. Рішення, яке я пропоную, полягає в тому, щоб створити електронну пошту з двома стовпцями, які передавали б один стовпець для мобільної версії.
Програма Gmail для Android підтримує лише вбудований CSS, вбудований у html. Без медіазапитів і зовнішніх CSS. Ви також можете забути CSS у тегу head, як я сказав вам вище.
gmail.com видаляє кілька речей, починаючи з тегів html5 та атрибутів, таких як класи та ідентифікатор. Він дозволяє лише вбудований CSS і дуже невелику панель CSS у тегу 'head'.
Пошта iOS і Mac OS X підтримують медіа-запити та css. Це найкращі з усіх для електронних листів.
Тому Android дозволяє лише вбудований CSS і ігнорує все інше. Отже, якщо ми візьмемо приклади коду, які я надав раніше, замість того, щоб поміщати стилі в тег 'head', ми додамо їх вбудованим, щоб наша електронна пошта відображалася правильно на Android.
Далі ми подбаємо про Gmail. Пріоритетною метою будуть найбільші екрани. Нам доведеться обійти проблему @mediaqueries. Gmail підтримує вбудований CSS і невелику частину CSS в «голові». Але остерігайтеся селекторів, вам доведеться бути хитрим. Дійсно, ми не можемо розмістити ні клас, ні ідентифікатор. Слід використовувати тільки рідні селектори. Вся витонченість буде полягати в розумному використанні селекторів структури: нащадків, сусідів і дітей, як у прикладі нижче:
Такий спосіб роботи використовується рідко, це потрібно визнати, ми, як правило, використовуємо клас і ідентифікатор замість цього. Якщо цей метод вам чужий, раджу прочитати цей дуже хороший пост: Сусідні селектори.
Завдяки цьому ми матимемо стиль у тегу head, який читатиме gmail, але не Android, який читатиме вбудовані стилі. За допомогою такої техніки ми зможемо точніше вказувати на поштових клієнтів без @mediaqueries.
Для сучасних поштових клієнтів, таких як mail.app на iOS і Mac OS X, ви зможете використовувати @mediaqueries і всі потрібні селектори. Будьте обережні, стилі, які ми написали для Gmail, будуть застосовуватися, тому вам доведеться перезаписати їх за допомогою @mediaquery.
Це точно не найкращий метод, як я вам казав, це компроміс. Поки що цей метод працює досить добре, але використання кількох рівнів перевизначення стилю змусить вас ретельно подумати про структуру html.
[тип роздільника=”” size=”” icon=”зірочка”]
Висновок / Поради
Ми можемо задатися питанням, чи краще адаптувати електронну пошту так, щоб її правильно читали клієнти електронної пошти, якими користується наша цільова аудиторія, чи нам потрібно виконати вправу, щоб зробити електронний лист читабельним скрізь. У нас є спокуса зробити його читабельним скрізь, але зараз це неможливо. Поки що це лише «майже». Безсумнівно, що створення електронної пошти стає дедалі складнішим.
Щоб допомогти нам, існують платформи, які дозволять нам тестувати відтворення нашої електронної пошти на різних клієнтах електронної пошти, наприклад, «Літмус» або «Електронна пошта на кислоті», але більшість з них платні. . Однак зрозуміло, що без цих платформ тестування рендерингу на всіх пристроях і на всіх поштових клієнтах стає майже неможливим (якщо ви не повний друзів, але тоді дійсно повний друзів, які використовують багато різних клієнтів електронної пошти на багатьох різних пристроях…), і, перш за все, дуже трудомісткі. На сьогоднішній день я не знайшов платформи, яка пропонує ту саму послугу безкоштовно. Я визнаю, що Лакмус дуже спокусливий… але дорогий. Деякі професіонали, безумовно, сприймуть це як хорошу інвестицію, яка заощадить їм значний час.
Я також зазначив "Попередній перегляд моєї електронної пошти", який також платний.
Можливо, гарною ідеєю було б створити базовий адаптивний шаблон, який ми могли б адаптувати за потреби, щоб не повторювати всю роботу з кожним електронним листом.
В Інтернеті, звичайно, є багато таких шаблонів. Через деякий час я міг би написати тему про це.
//Ця стаття, очевидно, розвивається.
Еммануель ГУЙОТ / UX-Scientist
