А так можно?

Недавно мы рассказали о нашем подходе к работе с CSS при верстке писем. Некоторые подписчики написали нам на ask@deep.digital вопросы о том, что можно использовать в письмах, а что — нет.

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

Не использовать float и flex. Если нужно расположить элементы в строку, то, чтобы работало в Outlook, придется делать это с помощью таблиц.

Не использовать position, transform и отрицательные margin. Многие почтовые сервисы удаляют такие свойства, защищаясь от того, что контент письма может «залезть» на их интерфейс.

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

Не подключать SVG-изображения, шрифты, JS- и CSS-файлы. Если в тексте есть, например, заголовок, написанный нестандартным шрифтом, то лучше вставить его картинкой.

Не пользоваться в теле письма тэгами, кроме div, span, a, table, tr, td, span, strong/b, em/i и img. Например, применение тэга p может привести к конфликту со стандартными стилями отступов этого элемента у почтового сервиса, а тэги вроде video, audio, form, input будут удалены или не будут выполнять свои функции.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.