Верстка адаптивних електронних листів: Проблеми та їх вирішення

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

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



Фото Johan Larsson / Flickr / CC

HTML електронної пошти
HTML-верстка грунтується на трьох китах: таблицях, HTML-атрибути і інлайн-CSS. На жаль, із-за особливостей роботи email-клієнтів, по-різному «розуміючих» одні і ті ж речі, у нашому розпорядженні залишається досить обмежений набір HTML і CSS-елементів.

1. Таблиці

На відміну від створення веб-сторінок, при верстці email у нас немає можливості використовувати семантичні елементи. Тому, щоб створювані листи розсилок правильно відображалися у кожного читача, ми змушені застосовувати таблиці. Для їх стилізації необхідно використовувати такі атрибути, як width, height, bgcolor, align, cellpadding, cellspacing та border. У комбінації з інлайн-стилями начебто padding, width і max-width цей набір атрибутів дає певне місце для маневру. Нижче представлений приклад коду «табличного» листа:

<table border="0" cellpadding="0" spacing="0" width="100%">
<tr>
<td bgcolor="#333333">
<div align="center" style="padding: 0px 0px 15px 15px;">
<table border="0" cellpadding="0" spacing="0" width="500" class="wrapper">
<tr>
<td>...Content</td>
</tr>
</table>
</div>
</td>
</tr>
</table>

2. Зображення

Багато поштові клієнти за замовчуванням блокують відображення картинок, тому важливо, щоб зміст листа був зрозумілий передплатнику і без них. Зробити це можна за допомогою alt-тексту. Стилізувати його дозволять інлайн-стилі і img елементи:
<img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max">

3. Заклики до дії


В ідеалі після прочитання листа користувач повинен зробити якусь дію. Тому кнопки CTA (Call To Action) потрібно робити великими, помітними і по можливості розташовувати у верхній частині листа. Замість звичайних зображень бажано використовувати bulletproof-кнопки. Вони будуть видні навіть у тих клієнтів, де відображення картинок за замовчуванням вимкнено.

Оптимізація листів для мобільних пристроїв
Згідно з результатами дослідження компанії Litmus, 53% відкриттів листів здійснюється на мобільних пристроях. При цьому 26% з них припадає на iPhone, і 7% — на Android-девайси. Багато в чому ця різниця пояснюється тим фактом, що в iOS за замовчуванням включений показ зображень, а в багатьох поштових клієнтів на Android зроблено навпаки.

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

Робота з безліччю платформ неминуче веде до виникнення помилок. Те, що виглядає добре на одній, на інший може відображатися «криво». При верстці листів для iOS і Android важливо пам'ятати, що не всі мобільні поштові клієнти володіють однаковою підтримкою HTML і CSS. Наприклад, iOS і Android по-різному «розуміють» адаптивний дизайн:

  • iOS пристрої масштабують весь лист, щоб повністю вмістити його на екран.
  • Пристрою на Android відображають лист в масштабі 100%, у зв'язку з чим можна бачити лише невеликий фрагмент.
Якщо листи, які ви розсилаєте своїм передплатникам, не оптимізовано для перегляду на маленьких екранах, то значна частина аудиторії просто не стане їх читати. Уникнути цього допоможе увагу до таких нюансів:

1. Слідкуйте за довжиною теми листа

Листи з короткими заголовками виділяються серед багатьох інших у папці «Вхідні». Як правило, поштовий клієнт на комп'ютері відображає близько 60 символів в полі теми повідомлення. Мобільні пристрої показують не більше 20-30 символів. При цьому в середньому компанії використовують для опису теми листа більше 40 символів.

2. Використовуйте текст прехедера

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

Для створення прехедера:

  • Позначте суть і переваги своєї пропозиції;
  • Додайте посилання на цільову сторінку і текстовий заклик до дії (наприклад, «Дізнайтеся більше»);
  • Текст прехедера не повинен перевищувати 30 слів (по можливості скоротіть його до 20 слів);
  • Постарайтеся зробити його персоніфікованим;
  • Не повторюйте текст заголовка, прехедер повинен доповнювати його;
  • Як і інші елементи листа, текст прехедера потрібно тестувати, тестувати і ще раз тестувати.

3. Текст повинен бути коротким

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

4. Використовуйте великі кнопки CTA

Заклики до дії повинні бути виділені і розташовуватися по центру екрана. Крім того, варто оточити їх значною кількістю порожнього простору — так у них простіше потрапити пальцем. Наприклад, навіть у самих ранніх версіях Apple iOS Human Interface Guidelines було прописано, що розмір кнопки повинен бути не менше квадрата розміром 44×44 пікселя.

5. Вибирайте правильний шрифт

Якщо основний текст листа складається з довгих блоків, слід використовувати шрифти з зарубками. Шрифти Georgia і Verdana роблять текст більш зручним для читання. Однак для коротких листів і окремих уривків тексту більше підходять шрифти без зарубок. Детальніше про це тут.

Розмір шрифту повинен бути досить великим. Оптимальним буде шрифт розміром 14 пікселів для тіла повідомлення і 22 пікселя для заголовка. Вибір 14-піксельного розміру обумовлений тим, що iOS автоматично збільшує шрифт мінімум до 13 пікселів.

6. Використовуйте одноколоночную верстку

На мобільних пристроях краще працюють одноколоночные шаблони не ширше 500-600 пікселів. Щоб перетворити двухколоночную верстку в одноколоночную, потрібно створити таблицю-контейнер для десктопної версії розміром 640 пікселів і вкладені таблиці на 320 пікселів. Вкладені таблиці будуть грати роль колонок.

Так як це не веб-верстка, то краще використовувати атрибути HTML-верстки, а не їх CSS-аналоги. Наприклад, для вирівнювання тексту використовують атрибути align=«left» cellpadding=«10» замість float: left; padding: 10px;.

Розмітка для двухколоночного шаблону, може виглядати приблизно так:

<table width="640" border="0" cellpadding="0" spacing="0">
<tr>
<td>
<table width="320" border="0" spacing="0" cellpadding="20" align="left">
<tr>
<td>
<p>Left Column Content</p>
</td>
</tr>
</table>
<table width="320" border="0" spacing="0" cellpadding="20" align="right">
<tr>
<td>
<p>Column Right Content</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

7. Застосуйте техніку «прогресивного розкриття»

Суть «прогресивного розкриття» (progressive disclosure) полягає у приховуванні контенту за інтерактивним елементом зразок кнопки або посилання, а потім відображення цього контенту по кліку. Це гарантує, що користувачеві не доведеться занадто багато скролл, щоб дістатися до потрібного вмісту в нижній частині листа. Такий підхід використовує «Вікіпедія» для мобільних платформ.

8. Тестуйте лист перед відправкою

Поштові клієнти в плані візуалізації та підтримки HTML і CSS ще гірше, ніж браузери. Тестувати листи необхідно і на реальних пристроях, і з допомогою спеціальних превью-сервісів (наприклад від «Пєчкіна»).

У період з 2010 по 2015 рік число email-листів, що відкриваються на мобільних пристроях, зросла на 30%. І ця тенденція ще раз підтверджує, що адаптивний email-дизайн – не розкіш, а необхідність. Слідуючи представленим у пості рекомендаціям, ви зможете створити привабливий HTML-лист, який буде коректно відображатися на будь-яких платформах.

Про що ще ми пишемо в блозі Пєчкін-mail:

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

0 коментарів

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