Цифров@ епістолярність

Сучасний електронний лист вже давно не є просто варіантом передачі інформації. Листи пишуть як живі люди, так і генерують різні роботи для повідомлень, пропозицій або застережень. Email-маркетинг використовує масові розсилки листів для просування товарів і послуг, що, на думку багатьох, є досить ефективним. У такому потоці віртуальної кореспонденції люди (як відправники, так і одержувачі) починають цінувати якість її виконання. У разі недбалості програють всі, оскільки важливі листи кінцеві адресати можуть просто не прочитали або проігнорувати при «кривому» їх виконанні. І навпаки: дизайнерський і продуманий лист навіть з розсилки зверне на себе увагу того, кому воно адресоване.

Про контент потрібно говорити багато і окремо. Але сьогодні наша мета розкрити глибокий сенс верстки листів еmail-розсилки. Якщо Ви не знали, що вони набираються подібно сайтам, а не пишуться в полі «Текст» поштового сервісу, дочитайте до кінця обов'язково.

Лист — це вам не сайт!

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

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

Найважливіше

1. Таблична та тільки таблична верстка — про Flex- або Grid-технології забуваємо відразу;

2. Стилі в атрибуті style прописуємо інлайново — теги <style> і <link> будуть ігноруватися деякими поштовими роботами або агентами;

3. Оптимальна ширина макета — 600-700px;

4. І ніякого JavaScript!

Теги, які можна використовувати:

<table>, <tr>, <td>, <span>, <img>, <a>, <b>, <i>, <br>, <h1>-<h6> — інші не рекомендовані до застосування. Немає стовідсоткової гарантії, що інші теги правильно прочитаються поштовиком, але така ймовірність невисока.

Шрифт, які можна використовувати:

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

• Arial, Helvetica, sans-serif;
• Arial Black, Gadget, sans-serif;
• Georgia, serif;
• MS Sans Serif, Geneva, sans-serif;
• MS Serif, 'New York', sans-serif;
• Tahoma, Geneva, sans-serif;
• Times New Roman', Times, serif;
• Trebuchet MS', Helvetica, sans-serif;
• Verdana, Geneva, sans-serif;

Чим суворіше, тим краще

Більшість браузерів і поштових служб мають свої стилі для показу різних тегів за замовчуванням. Саме тому для табличних тегів необхідно використовувати обов'язкові атрибути і стилі. Це дозволить «обнулити» правила по дефолту, тим самим бути впевненим в коректному показі листа у будь-якого одержувача.

Для таблиць:

<table border="0" cellpadding="0" cellspacing="0" style="margin:0;  padding:0">

Для посилань :

target="_blank" — просто правило хорошого тону;

а color, line-height і font є обов'язковими;

-webkit-text-size-adjust:none — обов'язкове для всіх малих елементів, що дозволить уникнути проблем з розмірами шрифту на iPhone iOS 6-7 / iPad.

Для зображень:

alt — цей обов'язковий елемент можна залишити порожнім;

border — якщо не задаєте жодного значення, краще поставте 0;

width — та ж історія, але вписати необхідно 100, якщо не передбачається чогось іншого;

display: block / inline-block  — краще вказати, оскільки поштові агенти дуже люблять розставляти відступи самостійно;

Не секрет, що всі просунуті фронтендщики при вказівці кольору #dddddd записують його як #ddd. Але при верстці розсилки такого робити не можна: багатьом агентам потрібен тільки повний код. За тим же принципом стежимо і за колірною схемою rgb / rgba: rgb (240,248,250) буде працювати далеко не скрізь.

Деякі поштові клієнти здатні замінювати теги. Наприклад, якщо Ви використовуєте <span> на номер телефону або адресу електронки, агент може замінити цей тег на <a> з текстом синього кольору. Тому краще використовувати такі методи запису:

Для телефону:

<a href="tel:0979999999" value="+0979999999" target="_blank" style="">097 999 99 99</a>

Для електронної пошти:

exemple@gmail.com" target="_blank" style="">example@gmail.com

Для вертикального вирівнювання:

Використовуємо <td> з паддінгом:

<td style="padding: 10px;"></td>

Для адаптації:

Можна використовувати медіа-запити. Так, спрацюють вони не скрізь, але якщо вийде, це буде приємною дрібницею і показником Вашої майстерності:

@media only screen and (max-width: 596px) {}

За аналогічним принципом можна пробувати удачу з ховерами — десь вони спрацюють, а десь ні.

Готові помічники

З власного досвіду можу сказати, що верстка листів для розсилки — не найприємніший процес. Однак зробивши все, як годиться, завжди відчуваєш певну гордість і загальне задоволення від виконаної задачі. Для полегшення своєї праці можна використовувати Zurb Fundation. Може застосовувати SASS, що скоротить час на написання необхідних кілометрів табличної розмітки.

Сподіваюся, написане вище вплинуло на Ваше ставлення до верстки електронних листів. Обов'язково знайдіть час, щоб перевірити шаблони своїх листів або погратися з конструкторами, якщо використовуєте їх при підготовці розсилок. І якщо знадобиться порада в сучасному епістолярному жанрі творчості, Ви знаєте, де нас знайти :)