Поради щодо HTML-верстки в email: що правильно використовувати, а що ні

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

Як верстати лист. Базові способи

У цій статті ми розповімо про обов'язкові способи створення шаблону і про такі, яких варто уникати. Розглянемо на прикладах коду в редакторі eSputnik:

Робити: Табличну верстку

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

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

Робити: шаблон в один стовпчик

Найпростіший макет для реалізації за допомогою CSS — це Single column layout (макет в один стовпчик). Блоки листа будуть розміщуватися послідовно один під одним.

Сьогодні багато хто використовує цей тип макета, оскільки він чудово виглядає на будь-яких пристроях та екранах, особливо на мобільних. До того ж він полегшує читання навіть дуже довгого листа й дозволяє робити верстку більш гнучкою. Наприклад, додавши стиль mso-hide:all; можна приховати окремий елемент для ПК:

Робити: Стилі безпосередньо в коді, а не в окремих блоках

Підтримка стилів у head існує, але є поштові клієнти, які не обробляють їх, тож краще дотримуватися inline CSS. Різниця полягає в тому, що inline CSS — це стилі, які записуються в атрибут style для тегів, а вбудовані — це окремий тег у head листа.

Наприклад, ось так inline CSS застосовуються до таблиці:

А так виглядають вбудовані CSS:

Робити: Медіазапити

За допомогою медіазапитів (media queries) можна створювати адаптивний макет. Вони дозволяють побачити на мобільних пристроях дизайн email зі зміненими шрифтами, зображеннями та фоном. Такий макет підлаштовується під формат монітора й вікна браузера, змінюючи за потреби ширину листа, розміри зображень і тексту та ін.

Медіазапити обмежують ширину макета і при досягненні цього значення вже застосовується інше оформлення. За допомогою стилів медіазапитів також можна перезаписувати існуючі стилі для різних пристроїв і приховувати інформацію, яка не має на цих пристроях відображатися. Для цього додайте !Important до потрібного селектора, і тоді ваш стиль при відображенні матиме пріоритет:

Краще використовувати такий підхід, якщо можливий конфлікт стилів.

Робити: Оптимізацію для Retina-екранів

Зараз усе більше й більше людей користуються пристроями з дисплеями із високою щільністю пікселів: iPhone, MacBook, iPad та ін. Щоб усі зображення виглядали чіткими на таких екранах, оптимізуйте картинки для них. Використовуйте зображення вдвічі більшого розміру, ніж потрібно для макету.

Один із найпростіших способів — підготувати початкові зображення у 2Х-розмірі та розділити їх навпіл уже в редакторі. Наприклад, щоб показати фотографію 200x300 px на екрані з вищою щільністю пікселів, необхідно завантажити фото розміром 400x600 px і зменшити його, використовуючи CSS-атрибути або HTML.

Робити: Абсолютні адреси

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

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

Робити: Прехедер як доповнення до теми

Текст прехедера є важливим, оскільки люди бачать його, перш ніж відкрити емейл. Але не слід прописувати в коді текст прехедера. Краще запишіть його як коментар HTML. Це запобігає випадковому відправленню емейла з текстом-рибою для прехедера. Наприклад: "Написати текст прехедера тут".

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

У відкритому листі його не буде видно.

Робити: Правильне кодування символів

Кодувальник символів допомагає переконатися, що спеціальні символи не відобразяться у вигляді квадратів, символів ромба зі знаками питання всередині або просто знаків питання:

<

Наприклад, якщо внести в редакторі eSputnik у код такі символи

ви отримаєте порожній прихований прехедер:

Робити: Адаптивність

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

У редакторі eSputnik можна гратися з адаптивністю, щоб листи мали однаково привабливий вигляд як на телефоні, так і на ПК:

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

Робити: Коментарі в коді

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

Робити: Тести

Коли вже дійшло до верстки email-листа, тестування є обов'язковим. Стандарти HTML для емейлів і досі залишаються мрією. Тому потрібно щоразу перевіряти зміну елемента або рядка коду, щоб переконатися, що лист відображається коректно.

Працюючи в редакторі eSputnik, ви завжди можете надіслати тестове повідомлення, щоб побачити, чи правильно воно виглядає як на телефоні, так і на комп'ютері:

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

Не робити: Зображення з різними областями для кліку

Одне зображення, яке веде до різних URL-адрес (Image maps), не розпізнається багатьма поштовими клієнтами. Щоб усе було гаразд, наріжте свої зображення на кілька окремих картинок і кожну прив'яжіть до потрібної веб-сторінки.

Не робити: Дизайнерські шрифти

Химерні шрифти не будуть коректно відображатися в багатьох поштових клієнтах. Зазвичай можна використовувати стандартні шрифти. Але краще визначитися з резервним шрифтом на той випадок, якщо вибраний вами шрифт не розпізнається поштовим клієнтом (у цьому можуть допомогти такі ресурси, як: What The Font?, FontShop та ін.).

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

Не робити: Heavy&Complex CSS/HTML

Радимо відкласти JavaScript, Flash, HTML5 та CSS3 — розширений код ще не є сумісним із версткою емейл. Але якщо ви бажаєте працювати зі скриптами в коді, скористайтеся AMP-контентом у редакторі eSputnik.

Не забувайте також про вагу листа. Розмір вашого поштового шаблону не має перевищувати 102 КБ. Це той поріг, після якого Gmail може обрізувати емейли.

На завершення

Верстка електронного листа пов'язана з певними правилами і постійним тестуванням. Ми окреслили в загальних рисах найпоширеніші заборони й вимоги до коду email у форматі HTML.

eSputnik пропонує все необхідне для створення коректних емейл-розсилок:

• Листи вже зроблені з табличною версткою.
• Редактор дозволяє мінімізувати роботу з кодом.
• У редакторі підтримується створення й відправлення AMP-контенту.
• Прості налаштування для адаптивності листів на мобільних пристроях.

Якщо ви знаєте, чим іще можна доповнити список, пишіть у коментарях.