Консультацiя
UA

Верстка email

verstka

Верстка email

При верстці email використовується той же мова розмітки html, що і при верстці сайтів. Але існують певні нюанси, які необхідно враховувати в роботі. Виникають вони тому, що сторінки відкриваються через браузери, а листи – через безліч різних поштових клієнтів, які працюють на різних движках: від програми Microsoft Outlook до мобільних додатків поштового сервісу під IOS або Android. І якщо в браузерах сучасні стандарти працюють більш-менш однаково, то в поштовика ця універсальність відсутня.

Особливості верстки листів:

  • табличная верстка; 
  • обмеження щодо використання css (тільки інлайновие стилі, без скорочених форм); 
  • обмеження по розпізнаванню html-тегів і атрибутів (напр., <button>, <header> и <footer>); 
  • не використовується JavaScript; 
  • шрифти потрібно вибирати зі стандартних; 
  • спецсимволи (параграф, емодзі і т.п.) краще замінювати картинками; 
  • обсяг коду – не більше 100 Кб;
  • текст максимально відокремлювати від зображень (не завжди зображення завантажуються відразу при відкритті листа); 
  • посилання повинні бути не скороченими, і переважно httрs; 
  • кольору задаються тільки в форматі HEX;
  • медіа-запити сприймають не всі поштові сервіси, тому краще обходитися без них. 

Важливо звертати увагу на те, як верстка email відображається на екранах різного розміру. Більше 50% всіх листів проглядаються з мобільних пристроїв, тому підготовлена ​​розсилка повинна бути адаптивною. Іноді для цих цілей використовують спеціальні фреймворки, наприклад MJML або Foundation for Emails. По завершенні роботи обов’язково протестуйте готовий лист за допомогою реальних розсилок на поштові скриньки або скориставшись сервісами для перевірки.