Верстка email-писем: Искусство достучаться до каждого ящика

Верстка email-писем: Искусство достучаться до каждого ящика

Открыли письмо? Значит, верстка сработала. В мире, где 90% писем просматривается на мобильных, а почтовые клиенты — это десятки разных «вселенных» со своими законами, верстка email — это не просто код. Это дипломатия между дизайном и технологией, где каждый пиксель должен уметь договариваться.

Почему email — это не веб?

Забудьте на минуту о CSS Grid, Flexbox и современных фреймворках. Почтовые клиенты (Gmail, Outlook, Apple Mail, Яндекс.Почта) живут в прошлом. Многие из них до сих пор не поддерживают современные стандарты, используют движки рендеринга времен Internet Explorer и безжалостно обрезают «опасные» стили. Ваш шедевр в Figma может превратиться в хаос таблиц и разъехавшихся блоков.

Факт: Outlook для Windows использует движок рендеринга Microsoft Word. Да, того самого, для текстовых документов. Это объясняет многие его «особенности».

Столпы email-верстки: таблицы, инлайн-стили и магия

Чтобы письмо выглядело единообразно везде, приходится использовать проверенные временем, хоть и архаичные, методы.

1. Табличная верстка ()

Это основа основ. Вместо

вы строите сетку из вложенных друг в друга таблиц. Это единственный надежный способ контролировать расположение элементов в Outlook и старых клиентах.

2. Инлайн-стили

Внешние или даже внутренние