Адаптивні email-листи без болю та страждань. Адаптивні email'и

Ділимося порадами щодо створення ідеального адаптивного листа.

Великі сервіси розсилки мають вбудований блоковий редактор. У ньому збирають прості адаптивні листи і це входить у вартість передплати. Оформити складний креативний лист у редакторі не вийде - це робота дизайнера та верстальника. Для початку розберемося, який лист зарахувати до категорії складних, а який – до простих.

Далі йдуть "фішки". Десь можна задати точний розмір для окремих блоків, а десь не можна. В одному редакторі можна збирати лише одноколонні листи, в іншому обмежень за кількістю колонок немає. У деяких редакторах ви можете навіть налаштувати, які блоки показувати на десктопній версії, а які - тільки на мобільних пристроях.

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

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

Редактор адаптує листа за своїм алгоритмом, переробити алгоритм не можна.

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

Команда з дизайнера та верстальника на фрілансі зроблять листа за два-три дні, коштуватиме це від 5 000 до 15 000 рублів. Якщо замовляєте в агентстві – у рази дорожче. Пам'ятаєте історію зі вступу? Для Сергія вибір очевидний: він збиратиме лист сам, у його ситуації це дешевше та швидше.

Простий адаптивний лист краще зібрати у вбудованому редакторі. Якщо хочете нестандартних рішень – віддавайте на аутсорс.

Як зібрати лист у вбудованому редакторі

Тим, хто збирає листа в редакторі, знати код не обов'язково. Єдине, що потрібно – продумати структуру листа, підібрати картинки та написати текст. Жодної «ручної» верстки - ви зберете лист із блоків, як у конструкторі посадкових сторінок.

Крок 1. Схема чи прототип листа

Почніть із чернетки, накресліть на папері схему майбутнього листа: де буде заголовок, де картинка, де кнопка і т. д. Якщо є час, зберіть повноцінний прототип у Balsamiq або NinjaMock. Такий прототип не соромно показати директору та передати у роботу дизайнеру.

Крок 2. Верстка листа у редакторі

Додаєте потрібну кількість колонок, виходячи з вже готової схеми чи прототипу

Перетягуєте потрібні елементиу тіло листа

Зазвичай у вбудованих редакторах діє принцип Drag-and-drop. Якщо у вашому не так, перегляньте статті з Бази знань - принципи роботи в редакторі описані там.

Налаштуйте вміст елементів: відступи, інтервали, вирівнювання та зображення

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

Тільки не переберіть розмір файлу. Поштові клієнти не люблять "важкі" листи і можуть приховати їх вміст під кнопку "Показати повністю" - так, наприклад, робить Gmail. Підбирайте файли так, щоб готовий лист важив не більше 600 Кб, це оптимальний розмір.

Не забудьте налаштувати кнопки та додати посилання для переходу.

Крок 3. Перевірка адаптивності у вбудованому редакторі

Коли лист готовий, перевірте, як він відображається на різних пристроях.

У 90% випадків все буде гаразд, блоки «перебудуються» автоматично. Якщо верстка таки «злітає» або результат вас не влаштовує – перевірте значення відступів у блоках, вони мають бути однаковими. Якщо один один блок відступає на 10 пунктів, а інший на 30, мобільної версіївони можуть перебудуватись некоректно. Якщо обидва блоки відступають на 10 пунктів, швидше за все, все буде гаразд.

Крок 4. Перевірка адаптивності на сторонніх сервісах

Перевірте результат за допомогою Litmus або Email on Acid. Ці послуги покажуть, як лист відобразиться на різних пристроях, різних браузерах і різних поштових клієнтах.

У деяких редакторах перевірка через Litmus інтегрована за умовчанням. Якщо у вашому редакторі такої можливості немає, надсилайте тестову копію листа на спеціальний e-mail, який дадуть після реєстрації в Litmus.

Послуга платна, місячна підписка в Litmus починається від 79$, в Email on Acid – від 45$. Якщо ви надсилаєте по одному листу раз на місяць, виходить дорого. У крайньому випадкуСпробуйте Browser Shots, він старий і незручний, зате безкоштовний. Пам'ятайте, що подібні послуги не дають 100% гарантії. Навіть якщо в Літмус все добре, це не привід відразу ж запускати розсилку. Надішліть листа на особисту пошту та відкрийте його там.

Виберіть редактор, де показано, як виглядає лист на різних пристроях. Ідеально, якщо редактор інтегрований із сервісом Litmus. Якщо немає інтеграції, перевіряйте адаптивність вручну через особисту пошту.

Як оцінити результат роботи - своєї або верстальника

Якщо збираєте листа самі, перевірте адаптивність усередині редактора і подивіться листа з особистої пошти - цього достатньо. Хочете перевірити адаптивність на багатьох пристроях, браузерах та поштових клієнтах відразу - тоді купуйте обліковий запис у Litmus або Email on Acid, дивіться результат там.

Тим, хто віддавав верстку на аутсорс, купувати обліковий запис не обов'язково, попросіть скріншоти з Litmus у верстальника. Якщо він професіонал, то перевіряє листи на подібних сервісах, відправити скріншот для нього не проблема. Обов'язково перевірте, як відкривається лист у Outlook, Gmail, Yandex та Mail.ru – це найпопулярніші поштові клієнти в Росії.

Не варто витрачати час на виправлення макета, якщо він некоректно відображається на третьому айфоні, сьомій версії Internet Explorer або поштовому клієнті The Bat. Так, завжди знайдуться ті, хто користується третім айфоном, але їхня меншість. Чи варто переробляти макет заради 1-2% від загальної бази? Залежить від кількості та «якості» бази.

Сподіваємось, ви її сегментували і про своїх передплатників знаєте все. Якщо 1-2% - це 10 000 чоловік, то варто заморочитися. Якщо ви працюєте в b2b і ці 1-2% - управляючі компаній, власники бізнесу та інші віп-клієнти, доведеться адаптувати листи під них.

Простежте за тим, щоб лист адекватно відображався в Outlook, Gmail, Yandex та Mail.ru – цього достатньо.

Пам'ятка маркетолога

Визначтеся з форматом листа, яким він буде: стандартним та простим чи складним та креативним. Листи зі складною структурою віддавайте дизайнеру та верстальнику. Прості листи збирайте у редакторі сервісу розсилки, вони адаптуються за замовчуванням.
Перевіряйте результат у вбудованому редакторі та, якщо дозволяє бюджет, на сторонніх сервісах. Приймаючи лист у верстальника, просіть скріншоти, які підтверджують, що лист відображається коректно Крайній мірі, у популярних поштових клієнтах та популярних браузерах.
Обов'язково перегляньте лист через особисту пошту, хоча б в основних поштових клієнтах та з актуальних моделей смартфонів на iOS та Android.

Плюснути

Один із читачів блогу Вебрада попросила розповісти про верстку листів для розсилки. Сам я цим практично не займаюсь. Пам'ятається, свого часу я багато вовтузився з шаблонами для Subscribe.ru, і пам'ятаю, що справа це була моторошна. Проблема в тому, що поштові послуги погано працюють із блоковою версткою. А ще гірше із стилями css. Стільки років минуло, а віз і нині там. Зараз переважна більшість листів для розсилок верстаються так само по-старому - за допомогою таблиць. І це в 2016 році, коли на сайтах вже давно рулить html5, css3 та інші сучасні смакоти.

У принципі, вичерпні статті щодо верстки листів вже є на Хабрі, тут і тут. Також рекомендую почитати тамтешнього мешканця на ім'я Артур Кох, у якого за версткою листів написано безліч корисних статей. Приклади: Посилання 1, Посилання2.
Але щоб пост не вийшов порожнім, я таки коротко озвучу основні моменти верстки листів для e-mail розсилок.

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

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

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

По-четверте, якщо використовуєте листи картинки, то обов'язково прописуйте їх розміри.

адаптивна верстка листів

Дуже часто поштовики блокують зображення в листах, і якщо не задати їх розміри, лист виглядатиме коряво. Крім того, обов'язково додавайте style=»display:block;. Це позбавить проблем з незрозумілими відступами (наприклад, у gmail):

І в жодному разі не використовуйте однопіксельні картинки як розпірки для осередків таблиці! Ваш лист гарантовано потрапить до спаму. Якщо потрібна розпірка, слід застосовувати картинку з розмірами, як мінімум, 20х20 пікселів, якій в стилях примусово задати розмір 1х1 піксель.

По-п'яте, є можливість зробити адаптивну верстку для листів. Виглядає так само коряво, як і взагалі вся робота з таблицями, але на безриб'ї… Самі розумієте. Коротше, щоб ваш лист мав якусь подібність до адаптивності, його контентну частину слід обрамляти тегом center з відповідними стилями:

І насамкінець пара корисних посилань. Тут ви можете переглянути, які теги підтримуються різними поштовими сервісами. А тут знайдете ще кілька полезнянок – «Особливості верстки HTML-листів».

Якщо стаття виявилася для вас корисною, будь ласка, поставте свою оцінку та поділіться у соцмережах:

(2 votes, average:

Схожі записи:

Верстка адаптивних листів: пам'ятка маркетолога

Більшість електронних листів на мобільних пристроях відображаються неправильно. Щоб листи добре виглядали на різних платформах, необхідно використовувати адаптивну верстку.

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

Після курсу ви зможете створювати листи, які однаково добре відображаються на комп'ютері та мобільних пристроях.

2. Особливості адаптивної верстки

3. Підходи до адаптації email

4. Базовий шаблон адаптивного листа

5. Прийоми мобільної адаптації

6. Інструменти HTML-верстальника

7. Підбиття підсумків курсу

8. Адаптивна верстка листів у email-маркетингу: підсумковий тест

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

Створення листа для розсилки

Для успішного застосування системи Email-маркетингу недостатньо простої логіки розсилки та листа з пропозицією.

30 безкоштовних адаптивних шаблонів електронних листів

Для привернення уваги інформація повинна подаватися в гарному «обгортці», з потрібними посиланнями та привабливими зображеннями. Перше враження від листа - це зовнішня оболонка, наповнення вдруге.

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

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

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

Верстка html листів

Ідея просування продукту/послуги та її реалізація у текстовому форматі.
Дизайн листа для розсилки.
Верстка електронних листів.
Тестування результату на всіх платформах та поштових сервісах.

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

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

Що ви отримаєте?

Зверстані за всіма правилами кросмейлерні листи
Точне красиве оформлення
Високий CTR
Малий показник відписок, додавання до спаму
Продуманий текст, таргетування розсилок
Ефективну сегментацію
Коректне відображення листів у більшості поштових клієнтів
Правильне технічне налаштування процесу розсилок

Важлива не просто естетика – важлива функціональність. Якщо ви готові почати робити листи правильно запрошуємо на безкоштовну консультацію.

Оновили матеріал 20.06.2018

Верстка листів відрізняється від звичної веб-верстки через особливості інтерпретування в різних веб-інтерфейсах та поштових клієнтах.

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

Як виглядає загальний шаблон адаптивного листа:

Щоб вирішити проблему з автомасштабуванням листів у iOS 10 та iOS 11, ми додали:

Приклад помилки автомасштабування

Наступний хак:

Webkit-text-size-adjust:none; -ms-text-size-adjust: none;

не дає пристроям на iOS змінювати контент листа для зручності читання. Зазвичай це суперечить дизайну і може поламати верстку:

Перейдемо до тіла листа – розділ body. Колір фону веб-інтерфейсу може бути різним, тому необхідно все обернути в таблицю з бажаним кольором фону, навіть якщо він білий, як у даному випадку:

…

Через обмежену підтримку стильових властивостей, наприклад max-width, поштових клієнтів Outlook 2007–2016, а також IE-подібних поштових клієнтів Outlook 2003 та Lotus Mail в умовних коментарях необхідно побудувати допоміжну табличну структуру, яка обмежить ширину листа в цих поштових клієнтах

Після цього слідує основна контентна таблиця з шириною 100% і обмеженням максимальної ширини 600 px.

Що потрібно пам'ятати при емейл-верстці:

Використовуйте максимально просту структуру таблиць. Складні таблиці не завжди чітко відтворює Outlook.
Намагайтеся уникати об'єднання осередків (colspan, rowspan). Натомість використовуйте вкладені таблиці.
Значення атрибутів cellpadding, cellspacing і border у таблиці слід обнулювати.
Вказуйте у явному вигляді вирівнювання всередині осередків, як горизонтальне, так і вертикальне (align, valign), оскільки значення за замовчуванням можуть відрізнятися. Це негативно впливає на відображення листа.
В Outlook (2007/2010) можуть з'являтися «розриви» сторінок, які виглядають як простір, що розриває таблицю або зображення. Вони виникають, якщо висота таблиці перевищує 1800 px. Щоб позбавитися цієї проблеми, закрийте всі таблиці (включаючи батьківську) і відкрийте заново, щоб висота кожної таблиці не перевищувала 1800 px.
Код має легко читатись. Велике числотаблиць часто ускладнює орієнтування у структурі.
Відбивка вкладених елементів має бути присутня, але при цьому не варто їй зловживати, як і перенесенням рядків і розтягуванням блоку у висоту. Логічний блок в ідеальному варіанті повинен повністю поміщатися на екран.
Використовуйте коментарі з позначенням призначень блоку та його початку/кінця.
Розмір html-коду листа не повинен перевищувати 100 КБ, інакше він буде обрізаний у деяких веб-інтерфейсах та поштових клієнтах, зокрема, у Gmail. Після того як лист зверстаний і налаштований, перевіряйте розмір html-файлу, що вийшов. Для скорочення розміру листа можна виключити всі символи табуляції, перенесення рядків та всі коментарі (крім умовних).
Використовуйте медіазапити акуратно та пам'ятайте про тих передплатників, чиї поштові клієнти їх не сприймають.

Основні елементи листа

Відступи

Платформи по-різному працюють з вертикальними та горизонтальними відступами.

Наприклад, на початку 2013 року оutlook.com почав вирізати відступи margin із коду емейлів. У результаті створення в емейле необхідних інтервалів по горизонталі доводиться використовувати властивість відступів padding. Ускладнює ситуацію те, що поштовий клієнт Outlook не підтримує відступи padding для div, а відступи margin – підтримує. У зв'язку з цим краще відмовитися від використання як padding, і margin.

Горизонтальний відступ можна зробити за допомогою порожнього осередку із символом нерозривної пробілу. Щоб встановити відступ праворуч та ліворуч, можна створити вкладену таблицю менших розмірів. Вертикальний відступ можна задати так:

Outlook 2013 має ще одну цікаву особливість: при створенні комірки менше 19 пікселів у висоту вона розтягнеться до 19 пікселів. Щоб цього уникнути, можна додати стильову властивість line-height при описі стилю осередку.

Текст

При оформленні тексту також є низка особливостей. Використовуйте теги, які не мають специфічного оформлення за промовчанням - span. Від використання p, h1–h6 тощо слід відмовитися.

Для батьківського осередку або блоку слід зазначити line-height. Так як у різних веб-інтерфейсах і поштових клієнтах відображення за промовчанням для тексту може відрізнятися, необхідно в явному вигляді прописувати такі стильові властивості:

Колір (color). Колір необхідно прописувати у кожного текстового елемента, при цьому, як згадувалося раніше, він повинен бути заданий у вигляді коду шістнадцяткового, наприклад #4676a9.
Розмір шрифту (font-size). Розмір зазвичай вказується в px чи pt. Краще використовувати перший варіант.
Гарнітура (font-family). У листах слід використовувати лише стандартні шрифти. Зазвичай під стандартними передбачають встановлені шрифти в ОС Windows XP. Існує два сімейства шрифтів - із засічками (serif) та без засічок (sans-serif). Найчастіше використовуються: Courier, Georgia, Times, Times New Roman, Arial, Verdana, Tahoma, Trebuchet MS.

Приклад тексту

Висота рядка (line-height). У різних веб-інтерфейсах та поштових клієнтах значення висоти рядка може сильно відрізнятися, у зв'язку з чим текст може виявитися не вирівняним з іншими елементами або зовсім не поміститися в блок, порушуючи загальну структурута дизайн.
Спецсимволи. Усі спецсимволи (параграфи, серця, елементи псевдографіки і т. д.) у листі слід замінити на відповідні html-сутності. Їх можна легко знайти, наприклад, на сайті html5book. Говорячи про спецсимволи, варто також згадати про боротьбу з «висячими» спілками та прийменниками. Їх наявність некоректна з точки зору друкарні і не заохочується з точки зору верстки, тому слід використовувати символ нерозривної прогалини, щоб виключити їх. Рідше буває і зворотна ситуація, коли зустрічаються дуже довгі слова, які можуть не поміститися на екран мобільного телефона. Щоб забезпечити коректне відображення та грамотне перенесення, можна скористатися символом «м'якого перенесення»

Посилання

Оформлення посилань аналогічно до оформлення звичайного тексту, відповідно, використовується тег «a» і з'являється атрибут href. А також для посилань у листах необхідно вказувати атрибут target із значенням _blank для відкриття їх у новому вікні.

Колір посилань слід задати у явному вигляді і прописати стильову властивість text-decoration з бажаним значенням, оскільки в багатьох поштових клієнтах та веб-інтерфейсах ця властивість має значення за умовчанням underline у посилань.

Приклад тексту

Зображення та фон

Робота із зображеннями у листах також має низку особливостей. Крім обов'язкових атрибутів (src і alt), тут необхідно у явному вигляді вказувати розміри (width і height) зображення, а також для виключення небажаних відступів прописувати стильову властивість display зі значенням block:

Якщо в комірці міститься лише одне зображення, яке у висоту не перевищує 19 px, то у цієї комірки слід прописати стильову властивість line-height із зазначенням необхідної висоти - для унеможливлення проблем відображення в Outlook 2013.

У більшості поштових клієнтів та в деяких веб-інтерфейсах (outlook.com, у деяких випадках yahoo і в деяких випадках gmail) зображення за замовчуванням не завантажуються, тому необхідно забезпечити прийнятне відображення без картинок, для цього використовуйте альтернативний текст (alt), стилізований під дизайн листи, фонові кольори і т.д.

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

При вставці зображень в адаптивний лист не завжди можна вказати розміри width і height у пікселах, іноді доводиться вказувати у відсотках: часто креативи прописують ширину 100%. При цьому більшість веб-інтерфейсів та поштових клієнтів розтягнуть це зображення на 100% ширини батьківського блоку, проте Outlook 2007-2016 відобразить зображення в масштабі 1:1. Тому ширина такої картинки повинна збігатися з шириною, що виводиться.

Фонові зображення

Outlook 2007-2016 не підтримує фонові зображення. Винятком є фонове зображення, прописане body. Однак застосування цього прийому сильно підвищує ризик потрапляння листа до спаму, тому використовувати його не рекомендується.

Це обмеження можна обійти за допомогою VML. Для зручного його застосування можете скористатися нашим.

Товарна сітка

Базовим підходом при адаптації листів є «гумова» верстка. Для забезпечення зручної взаємодії з листом на невеликому екрані мобільного пристрою та на екрані стаціонарного комп'ютера або ноутбука часто застосовується прийом блокового перебудови.

Він ґрунтується на застосуванні інлайнових блоків. При зменшенні екрана, коли блоки перестають поміщатися, вони перебудовуються один під одним:

Оскільки Outlook 2007–2016 не підтримує плаваючі блоки, то спеціально для них будується допоміжна структура в умовних коментарях:

Блок1

Блок2

Код, укладений між:

буде проігноровано всіма поштовими клієнтами, крім Оutlook 2007–2016 та IЕ-подібними поштовими клієнтами.

А кожен із блоків матиме таку структуру:

Блок

Також у листах іноді зустрічається ситуація, коли блоки розташовані у шаховому порядку, проте при перебудові бажано зберегти логічне слідування блоків та перебудовувати не правий блок під лівий, а навпаки – лівий блок під правий. Це можна зробити, змінивши напрямок тексту, виглядатиме це таким чином:

Блок 2

Блок 1

Інші елементи та прийоми

Невидимий прехедер

Практично всі веб-інтерфейси виводять поруч із темою листа також перший текст:

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

Для цього слід додати на початок html-тіла листа код з наступною структурою:

4 варіанти травневих свят від Localway. Сидіти вдома у травневі свята – гріх.

Використання невидимого прехедера може негативно позначитися на доставлянні, тому використовуйте цей прийом акуратно і ретельно стежте через постмайстер за доставлянням.

Відео у листах

Стандартний поштовий клієнт Mail знову став відтворювати html5-відео, проте - пряме посилання на youtube-відео, поставлене зображення.

За такої реалізації відео відобразиться на шарі у веб-інтерфейсах Mail.ru (близько 55%) та Gmail (близько 14%). При цьому на більшості мобільних пристроїв відео буде відкрито у програмі Youtube без відкриття браузера.

Недоліком такого підходу є неможливість зібрати статистику кліків, тому що посилання на Youtube має бути прямим, і відстеження кліків у даної розсилки доведеться відключити у ESP.

Тестування

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

Для прискорення процесу тестування можна скористатися сервісами Litmus та EmailOnAcid, проте це не скасовує необхідності перевірки відображення кожного окремого листа вручну.

У статті згадувалися деякі сервіси, ресурси та інструменти, які, безперечно, будуть корисні верстальнику листів і не тільки. Наведу невеликий перелік корисних ресурсів.

Інструменти та сервіси:
Email buttons – генератор кнопочок з використанням VML.
- Вставлення фонових зображень у листи з використанням VML.
Litmus – тестування відображення листів.
Email On Acid – альтернатива Litmus: тестування відображення листів.

Корисні матеріали:
Блог Litmus – лідер ринку емейл-тестування. Цікаві кейси та останні новини зі світу емейл-маркетингу та верстки емейл-листів.
Блог Email On Acid - цікаві кейси та останні новини зі світу емейл-маркетингу та верстки емейл-листів.
- перший блог про емейл-маркетинг, розповідає про те, як зробити листи ефективними.
Tod's blog - цікаві кейси та корисні матеріали про верстку та розробку.

Переклад

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

Навіщо потрібно адаптувати листи для мобільних пристроїв

Значна частина аудиторії різних компаній, які займаються email-маркетингом, проглядають листи на мобільних пристроях. Під час дослідження Campaign Monitor від 2011 року з'ясувалося, що майже 20% відкриттів листів відбувалися на смартфонах та планшетах – у 2009 році ця цифра знаходилася на рівні лише у 4%. Майже 90% цих відкриттів здійснювалися на пристроях під iOS. Нині цифри ще вищі.

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

Техніки дизайну

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

Ось, наприклад, як такий лист може виглядати в Outlook:

Нижче наведено той самий лист, але відкритий у додатку Mail для iPhone. Явно видно різниця двох шаблонів. Мобільна версія вже, в ній менше необов'язкових візуальних елементів, але читати її так само зручно, як і десктоп-версію. Різниця у вигляді двох мобільних варіантів полягає у використанні CSS.

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

Що враховувати під час створення шаблонів

Створення листів, які добре виглядають на мобільних пристроях, значно складніші, ніж просто використання спеціальних CSS. Слід звернути увагу і на інші речі:

На мобільних пристроях краще працюють одноколонні шаблони не ширші за 500-600 пікселів. Їх простіше читати, і навіть якщо в них є якісь недоробки, усі «косяки» у будь-якому випадку виглядають краще.
Згідно гайдлайн Apple, мінімальна цільова область кнопок і посилань повинна становити 44 x 44 пікселя. Немає нічого більш «неюзабельного», ніж купа дрібних посилань, які складно потрапити на невеликому екрані мобільного пристрою.
Мінімальний шрифт, що відображається на iPhone, становить 13 пікселів. Необхідно враховувати цей факт при створенні тексту листа - якщо текст шаблону набраний меншим шрифтом, то він буде автоматично збільшений, що може зламати всю верстку.
Лист має бути лаконічним, а всю важливу інформацію слід розташовувати у верхній частині. Скролити на тачкскринах пальцем складніше, ніж на робочому столі мишкою.
Якщо можливо, варто використати властивість display: none; для приховування необов'язкових елементів шаблону. Кнопки «шарингу» в соцмережі доречні на робочому столі, але ними не завжди зручно користуватися на смартфоні.

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

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

Верстаємо мобільні листи

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

Давайте уважніше розберемося з тим, як відбувається оголошення @media. Перш за все, щоб створити «мобільний» CSS, потрібно реалізувати якийсь критерій, за допомогою якого поштовий клієнт визначатиме які стилі використовувати.

Для цього використовується оператор @media only screen - він показує, що поштовий клієнт повинен бути відображений на екрані (замість того, щоб бути, наприклад, надрукованим на принтері). Після цього в прикладі вище коду ми задали максимальну ширину екрана пристрою в 480 пікселів. Це важливо, оскільки у багатьох (але не всіх) мобільних пристроїв область відображення даних на екрані становить 480 пікселів або менше.

Тому часто використовують max-device-width: 480px (це також ширина дисплея попередніх моделей iPhone у ландшафтному режимі), але можна і розширити опис, щоб охопити інші розміри екрану:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device -height: 240px) ( ... )
Повернемося до розглянутого вище мобільного шаблону листа. Ось як він виглядає в Apple Mail:

У цьому прикладі використано HTML-таблиці, що містять текст і зображення, застосований клас contenttable . Ось зразок коду:

Цей клас відіграє цікаву роль - коли листа відкривають на пристрої з екраном в 480 пікселів або ширше, він ні на що не впливає. Однак, коли екран 480 або менше, він звужує ширину таблиць до 320 пікселів. Для того, щоб уникнути незвичайного глюку в пошті Yahoo, використані селектори атрибутів. В іншому випадку використовується "звичайний" CSS. Крім того, можна включити такі оголошення:

@media only screen and (max-device-width: 480px) ( /* mobile-specific CSS styles go here */ table ( width: 325px !important; ) img ( width: 325px !important; ) p ( display: none ! important;)))
Далі ми розглянемо складніші техніки адаптації мобільних листів для мобільних пристроїв.

Створення адаптивних шаблонів із колонками «від двох до однієї»

Використання одноколоночних шаблонів - гарний вихід під час оптимізації розсилки для мобільних пристроїв. При цьому існують способи створення адаптивних двухколоночных шаблонів, без необхідності використання довгих CSS в media queries.

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

Золоте правило верстки листів говорить: «Скрізь, де тільки можна, використовуйте HTML замість CSS». Ступінь підтримки CSS різними поштовими клієнтами може значно відрізнятися, але вони однаково працюють з HTML. Наприклад, атрибути на кшталт align=”left” і cellpadding=”10” - набагато надійніший інструмент, ніж їх аналоги CSS float: left; та padding: 10px; . Саме ці атрибути будуть використовуватися для створення листів у форматі «від двох до однієї колонки».

Ось так подібний лист може виглядати в Outlook 2007:

У приклад вище використано таблицю-контейнер шириною 640px, яка містить дві таблиці 320px, що формують колонки. У цих стовпців cellpadding = "20" - це зроблено для того, щоб контент не притискався до кордонів.

При верстці для Інтернету зазвичай використовують float: left; , щоб вирівняти стовпці. Однак замість цього можна використовувати align = left . Оскільки ширина таблиці-контейнера дорівнює або більше сукупної ширини двох вкладених таблиць, використання HTML добре спрацює. Нижче наведений спрощений код подібного двоколонкового шаблону:

Column Left Content

Column Right Content

Результат виглядає так:

Таблиця-контейнер шириною 640 пікселів, тому шаблон буде двоколоночним. Але в тому випадку, якщо ширина екрану менша від цього, то контент правої колонки буде «загорнутий» під ліву. Якщо зробити ширину вкладених таблиць рівною 320 пікселям, то при відображенні на мобільному пристрої виходитиме одноколоночне лист, яке зовсім не потрібно «зумити». Досягти такого ефекту можна за допомогою додавання одного рядка media query в HTML-код:

В результаті вийде адаптивний шаблон, який буде двоколоночним на робочому столі та одноколоночним на мобільних пристроях (у дефолтному додатку Mail для iPhone і поштовому клієнту Android).

Додавання «прогресивного розкриття» (як у «Вікіпедії»)

Багато сайтів використовують для конвертації довгого веб-контенту в коротку мобільну техніку під назвою «прогресивне розкриття» (progressive disclosure). Вона полягає в прихованні контенту за інтерактивним елементом на кшталт кнопки або посилання, а потім показ цього контенту по кліку (або тапу). Цю техніку використовує «Вікіпедія» та безліч інших проектів – її можна застосовувати і для верстки листів під мобільні пристрої (для приховання та показу контенту використовується CSS).

Наприклад, можлива така ситуація, при якому в новинній розсилці перераховуються різні статті. У веб-версії для кожної статті має відображатися назва та текст:

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

Для того, щоб досягти такого ефекту, спочатку потрібно створити «рибу» статті з її заголовком та описом за допомогою HTML. Також слід додати кілька класів для відображення кнопок розгортання/приховування тільки на мобільних пристроях. Нижче наведена спрощена версія такого коду:

Основні дії будуть здійснюватися за допомогою класів mobilehide, mobileshow і article. За допомогою display: none; кнопка для розгортання/приховування контенту буде ховатися на робочому столі:

A, a ( display: none !important; )
Щоб переконатися, що ця кнопка відображається лише на мобільних пристроях, доведеться вдатися до media query. Нижче представлений код для цього (включаючи раніше використовувані сніпети mobileshow і mobilehide , а також деякі стилі для webkit):

@media only screen and (max-device-width: 480px) ( a, a ( display: block !important; color: #fff !important; background-color: #aaa; border-radius: 20px; padding: 0 8px; text-decoration: none; font-weight: bold; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 11px; position: absolute; top: 25px; width: 40px; ) div ( display: none; ) a.mobileshow:hover ( visibility: hidden; ) .
В результаті на iPhone відображатимуться кнопки для згортання та розгортання контенту. На GitHub представлений весь

Сьогодні користувачі дедалі частіше читають електронні листи на мобільних пристроях. Яке буває перегляд великого HTML-email"а на телефоні? Доводиться багато масштабувати і скролити, в цілому читати стає дуже незручно. Тому і листи електронної пошти слід робити адаптивними.

Підготовка

Насамперед визначимо основні особливості адаптивних emailів:

Чистий та лаконічний контент:на маленьких екранах набагато важливіше ефективно використовувати корисний простір.
Одна колонка:Вочевидь, що у екрані телефону контент ні розбиватися на кілька колонок.
Коротка тема листа:листи з короткими заголовками виділяються серед багатьох інших в inbox.
Великі "call to action" кнопки: Apple iOS Human Interface Guidelines рекомендує робити кнопку щонайменше 44×44 px.
Правильний шрифт:текст повинен бути легкочитаний на будь-якому пристрої.
Pre-header:Початковий текст листа повинен максимально відображати зміст.
Вирівнювання тексту по лівому краю:Більшість користувачів приділяють більше уваги лівій частині екрану. Крім того, деякі ОС можуть не повністю відображати листа, тому контент повинен вирівнюватися по лівому краю.
Вертикальна ієрархія:найбільш важлива інформація, у тому числі кнопки call to action, повинна розташовуватися у верхній частині листа.
Мінімум зображень:Користувач не очікує побачити у листах великі картинки. До того ж у багатьох відключено відображення зображень.

початок

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

Doctype

Hotmail і Gmail примусово додає код XHTML 1.0 doctype.

Viewport та Media Queries

Для коректного відображення на мобільних пристроях слід використовувати метатег viewport. На жаль, він не працює на Blackberry:

Також бажано визначити content-type тег title. Багато поштових клієнтів це ігноруватимуть, але не варто забувати про «версію для браузера» листа. Ще можна додати трохи CSS, щоб самим встановити деякі параметри відображення.

Email subject or title
При додаванні Media Queries приховуємо елементи з класом hide за допомогою display:none, якщо ширина екрана менше 600 px:

@media only screen and (max-width: 600px) ( table, img, td ( display:none!important; ) )
Це стандартний підхід при верстці адаптивних email"ів: перезапис CSS в head за допомогою!important. При цьому GMail ігноруватиме стилі в head. Тому необхідно стежити за тим, щоб контент скрізь коректно відображався. За допомогою Media Queries можна також обмежити ширину блоку з контентом:

@media only screen and (max-width: 600px) ( table ( width: 92%!important; ) )

Кнопки

Після прочитання листа користувач, в ідеалі, має вчинити якусь дію. Тому роль call to action елементів дуже важлива. Кнопки мають бути великі, помітні та розташовуватися, по можливості, у верхній частині листа.

На жаль, не існує єдиного кроссплатформенного рішення для кнопок у листах. Один з варіантів:

@media only screen and (max-width:600) ( a( display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important;background:#f46f62;text-align:center;text-decoration:none!important; ) )
Ну зовсім простий спосіб – звичайне посилання. Однак при цьому страждає юзабіліті на пристроях із тач-скрином:

Click me!
Завантажити приклад, описаний у статті.

«Гумові» листи

Замість адаптивної верстки листів можна використовувати звичайну гумову. Це набагато простіше, і email скрізь коректно відображатиметься. Однак у цьому випадку існує низка недоліків. Насамперед, сильно страждатиме юзабіліті через те, що елементи листа не можна переміщати в залежності від ширини екрана пристрою. Тому гумова верстка – це не наш спосіб!

Приклади адаптивних emailів

Ось пара хороших прикладів того, як адаптивні листи мають відображатися на великому та мобільному екранах:

Висновок

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

Уявимо ситуацію: Сергій - випускник «Нетології», маркетолог-початківець. Він працює в невеликому інтернет-магазині, одне з його завдань – запустити розсилку клієнтської бази. Стратегія, план та тексти для листів готові.

Що робити з дизайном та адаптивною версткою? Бюджет закінчується, тому у Сергія серйозний вибір: заощадити і зробити все самому, в редакторі сервісу розсилки. Або найняти фрілансера.

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

Вибираємо вбудований редактор або послуги верстальника

Редактор адаптує листа за своїм алгоритмом, переробити алгоритм не можна.

Простий адаптивний лист краще зібрати у вбудованому редакторі. Якщо хочете нестандартних рішень – віддавайте на аутсорс.

Як зібрати лист у вбудованому редакторі

Крок 1. Схема чи прототип листа

Крок 2. Верстка листа у редакторі

Додаєте потрібну кількість колонок, виходячи з вже готової схеми чи прототипу

Перетягуєте потрібні елементи в тіло листа

Налаштуйте вміст елементів: відступи, інтервали, вирівнювання та зображення

Не забудьте налаштувати кнопки та додати посилання для переходу.

Крок 3. Перевірка адаптивності у вбудованому редакторі

Коли лист готовий, перевірте, як він відображається на різних пристроях.

У 90% випадків все буде гаразд, блоки «перебудуються» автоматично. Якщо верстка таки «злітає» або результат вас не влаштовує – перевірте значення відступів у блоках, вони мають бути однаковими. Якщо один блок відступає на 10 пунктів, а інший на 30, в мобільній версії вони можуть перебудуватися некоректно. Якщо обидва блоки відступають на 10 пунктів, швидше за все, все буде гаразд.

Крок 4. Перевірка адаптивності на сторонніх сервісах

______________________________________________________________________________________

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

First heading

Hide Show

Pellentesque habitant morbi...