Как сделать баннер для email письма в рассылке

Давайте разберемся, как сделать баннер для email-рассылки. Кажется, что это просто — взял картинку, впихнул текст, и готово. Но тут есть подводные камни, особенно с темной темой в почте и мобилками. Расскажу, как не наступить на грабли 😉 Существует два способа: с помощью кода и с помощью картинки.

Подход 1: Верстать кодом

Пишем HTML и CSS. Звучит круто, но есть нюансы.

Плюсы:

— Адаптивность. На компе и телефоне текст будет автоматически подстраиваться под размер экрана, сохраняя размер шрифта. Также можно реализовать баннер с двумя и более колонками, которые будут перестраиваться друг под друга на мобилке. — Нет тяжелых картинок, письмо загружается быстрее.

Минусы:

— Темная тема — враг. Представьте: у вас на баннере темный текст, а фон сделан светлой картинкой. Пользователь открыл письмо с темным режимом — и текст автоматически стал светлым. Теперь он сливается с фоном будто хамелеон! Очень важно следить за контрастом в темной теме. При необходимости, можно крупный текст сделать картинкой, чтобы он не менял свой цвет, или подобрать другую фоновую картинку. — Outlook — старый ворчун. Древние версии Outlook игнорируют свойство background-image, для поддержки придется использовать VML-код, это усложняет верстку. — Может не подойти для баннеров с очень крупной типографикой

Когда подходит:

— Если не нужен кастомный шрифт на баннере и очень сложный дизайн. — Если есть время и навыки верстки.

Подход 2: Картинка - просто и надежно

Кажется, тут всё понятно: дизайним в фотошопе/фигме, сохраняем как JPEG или PNG и вставляем в письмо. Но и тут есть свои особенности.

Плюсы:

— Везде выглядит одинаково — хоть в Outlook 2003, хоть в Gmail. — Можно выкрутить дизайн на максимум — градиенты, тени, кастомные шрифты (кодом такое не везде поддерживается). — Не меняет цвет в темной теме — цвета всегда останутся исходными, потому что это картинка.

Минусы:

— Текст на мобилке — мелкий. Если размер текста изначально мелкий, то на телефоне он еще больше сожмется, и надписи станут как муравьи-лилипуты. Решение: подготовить отдельную мобильную версию картинки и показывать ее с помощью @media. Но надо помнить, что Яндекс.Почта проигнорирует это свойство и покажет десктопную, потому что не поддерживает @media. — Вес имеет значение. Картинку нужно выгружать в x2 размере для четкости на retina дисплеях. Картинка может получится больше 200 КБ, письмо будет грузиться долго. Обязательно сжимайте картинку через Imagecompressor, Tinypng или аналоги — без потери качества.

Лайфхаки:

— Alt-текст — опишите, что на баннере. Если картинка не загрузится, пользователь хотя бы прочитает, что там было: «Скидка 50% на кроссовки». — Шрифт — не мельчите. Лучше сделать покрупнее, чтобы и на мобилке хорошо читалось, иначе не разобрать. — Дублируйте текст баннера, кнопку в контенте письма. А то вдруг картинка не загрузится, а призыва к действию нет да и суть потерялась.

Когда использовать:

— Если сложный дизайн, который не получится реализовать версткой. — Если лень заморачиваться.

Вывод

Каждый из способов имеет свои особенности. Я обычно придерживаюсь правила: все, что возможно сверстать кодом, верстаем кодом. Если хотите минимум мороки — делайте картинкой, но не забудьте про мобильную версию и alt-текст. Удачи!