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

Итак, нужно было собрать макет рассылки в 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.