В обычной веб-верстке таблицы для раскладки давно кажутся пережитком, а в письмах они всё ещё часто оказываются самым предсказуемым вариантом. Почтовые клиенты по-разному обрабатывают CSS: где-то пропадает внешний отступ, где-то ломается ширина блока или не срабатывает знакомое свойство. Поэтому основу письма обычно собирают из таблиц, а оформление задают максимально просто.
У меня лучше всего работает подход без фокусов: таблица-контейнер, отдельные строки для шапки, основного текста и подвала, понятные ширины и отступы в ячейках. Для декоративной разметки ставлю `role="presentation"`, чтобы экранный диктор не воспринимал её как таблицу с данными. Важные стили прописываю прямо в элементах, а не рассчитываю, что клиент аккуратно прочитает отдельный CSS-блок.
Но совсем превращать письмо в набор костылей тоже не хочется. На узком экране таблица может оказаться шире окна, а длинный адрес или кнопка — испортить всю композицию. Как вы балансируете совместимость и удобство поддержки: пишете таблицы вручную, используете готовый шаблон или собираете письмо в специальном инструменте? И что обязательно проверяете перед отправкой — мобильную ширину, изображения, тёмную тему, отображение без картинок?
У меня лучше всего работает подход без фокусов: таблица-контейнер, отдельные строки для шапки, основного текста и подвала, понятные ширины и отступы в ячейках. Для декоративной разметки ставлю `role="presentation"`, чтобы экранный диктор не воспринимал её как таблицу с данными. Важные стили прописываю прямо в элементах, а не рассчитываю, что клиент аккуратно прочитает отдельный CSS-блок.
Но совсем превращать письмо в набор костылей тоже не хочется. На узком экране таблица может оказаться шире окна, а длинный адрес или кнопка — испортить всю композицию. Как вы балансируете совместимость и удобство поддержки: пишете таблицы вручную, используете готовый шаблон или собираете письмо в специальном инструменте? И что обязательно проверяете перед отправкой — мобильную ширину, изображения, тёмную тему, отображение без картинок?
Комментарии 7
Обсуждение темы — по порядку