Наш опыт в создании HTML шаблонов электронной почты


Наш опыт в создании HTML-шаблонов электронной почты

Несмотря на то, что я дизайнер UI/UX, моей страстью всегда была разработка, поэтому, когда команда Getpaid работала над частью платформы, связанной с уведомлениями, я сразу же попросил технического руководителя позволить мне поработать над HTML-шаблонами электронной почты.

Помню, я подумал: «Эй, это же HTML, я хорошо владею HTML, я смогу это сделать», но я не знал, каким кошмаром может быть создание шаблонов электронной почты. Но я справился с этим, провел много исследований и узнал много нового о том, как создать HTML-шаблон и что нужно учитывать при создании HTML-шаблона.

Что нужно учитывать при создании HTML-шаблона

1. Совместимость с основными почтовыми клиентами

По данным Litmus.com, существует около 10 различных почтовых клиентов, которые делят мировой рынок почтовых клиентов, и все эти почтовые клиенты поддерживают или не поддерживают определенные HTML-теги и определенные правила CSS.

Важно обратить внимание на то, что поддерживается, чтобы создать HTML-шаблон, совместимый со всеми этими почтовыми клиентами. Я использовал Caniemail для проверки поддержки тегов или правил CSS, которые я собирался использовать. Campaign Monitor также предоставляет отличное руководство по поддержке CSS для самых популярных мобильных, веб- и настольных почтовых клиентов.

2. Отзывчивость

Отзывчивое письмо изменяет размер и адаптируется к любому размеру экрана, будь то настольный компьютер, ноутбук, планшет или мобильный телефон, поэтому создание отзывчивого шаблона письма гарантирует, что письмо всегда будет читабельным на любом устройстве.

3. Темный/светлый режим

Согласно данным Nighteye App, 81,9% людей используют темный режим на своих телефонах, 82,7% участников опроса заявили, что используют темный режим своей операционной системы, а 64,6% респондентов ожидают, что сайты будут автоматически применять темную тему.

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

Реализация

При создании шаблона электронной почты использование HTML и CSS ограничено. Только табличные элементы и встроенный CSS гарантируют работу во всех почтовых клиентах, но даже в этом случае не все правила CSS работают в большинстве почтовых клиентов.

Мы решили рискнуть с элементом стиля, несмотря на то, что по крайней мере четыре почтовых клиента не поддерживают его, и основная причина этого — включение стилей для темного режима и отзывчивости. Вот фрагмент нашего кода CSS для поддержки темного режима.

У нас возникли проблемы со свойством background-image, оно не отображалось в некоторых почтовых клиентах, даже в тех, которые должны были его поддерживать, поэтому мы решили пойти на компромисс в отношении логотипа Getpaid; разместить его с помощью тега изображения и иметь только иконку, чтобы логотип был виден и в светлом, и в темном режимах.

Вот ссылка на полный шаблон письма, если вам интересно взглянуть.

Оцените статью
Procodings.ru
Добавить комментарий