Логотип
Меню
Блог

Верстка HTML email-рассылок

25 сентября 2022г
Верстка HTML email-рассылок

Неожиданно пришёл интересный заказ. При чем очень срочный, пришлось поработать в выходной. Но когда интересно, меня выходные не останавливают.

Итак, нужно было собрать макет рассылки в Photoshop и сверстать его. Заказчик предоставил прототип в jpg формате. Для заполнения: текстовый файл и картинки.

И работа закипела.

Правила, которые существуют при создании сайтов, не работают с электронными письмами и рассылками.

Дело в том, что у писем есть принципиальные отличия, которые всегда нужно учитывать при разработке.

Верстать письма нужно таблицами. Хоть и для веб-разработки этот способ устарел, но для писем он самый подходящий. Такой метод позволяет письмам корректно отображаться на всём разнообразии клиентского софта.

Нужно учитывать требования почтовых провайдеров, чтобы не попасть в спам. Не все элементы, которые используются в вебе, можно добавить в письмо.

Итак:
  • Размер письма. Оптимальная ширина письма — 600 пикселей. Именно такую рекомендуют почтовики.
  • Базовая структура. Классическое письмо состоит из прехедера, шапки, тела и футера.
  • Безопасные шрифты, они правильно отображаются на любом девайсе и операционной системе. Arial, Arial Black, Courier, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana.
  • Картинки в форматах JPEG, PNG, BMP. Gif-изображения
Что нельзя использовать:
  • JavaScript;
  • flash-анимацию;
  • CSS-анимацию;
  • видео;
  • формы;
  • эффекты наведения — изменение свойств объекта при наведении мыши (псевдокласс :hover);
  • эффекты параллакса.
Итог:

Собрала 9 макетов в Photoshop.

Пришлось вспомнить некоторые моменты чтобы правильно расположить все элементы и сделать одинаковые отступы.

Подкорректировала 6 банеров, убрала ненужные элементы. В Figma собрала недостающий элемент дизайна.

Сверстала 9 страниц рассылок.

Верстка HTML заняла чуть больше времени чем ожидалось, из-за того что я не верстала на таблицах хоть и знала основы.

В проекте использовала: Photoshop, Figma, Adobe Illustrator, Браузер Google Chrome, VS Code, HTML и CSS.