Макет на основе таблиц

Почтовые клиенты — особенно Outlook в Windows, использующий механизм отображения Microsoft Word, — не поддерживают flexbox, grid и даже надёжную блочную компоновку. Таблицы — единственный структурный примитив, который одинаково отображается во всех основных почтовых клиентах.

Каждое адаптивное электронное письмо начинается с внешней <table> шириной 100%, которая служит телом письма, а за ней следует внутренняя таблица фиксированной ширины (обычно 600px), содержащая фактическое содержимое. Этот двухуровневый шаблон лежит в основе почти каждого рабочего шаблона.

Всегда добавляйте cellpadding="0" cellspacing="0" border="0" в каждую таблицу. Без них Outlook вставляет неожиданные промежутки. Добавление role="presentation" сообщает программам чтения с экрана, что семантику таблицы следует пропустить; это правильно, поскольку таблицы компоновки не являются таблицами данных.

Чтобы создать несколько столбцов, вложите таблицу с двумя ячейками <td> в строку содержимого. Каждая ячейка содержит один столбец. Избегайте сочетания div+float: Outlook игнорирует float и всё равно размещает столбцы вертикально, нарушая дизайн.

Фактическая ширина области предварительного просмотра на компьютерах составляет около 600px. Проектирование с расчётом на эту ширину позволяет удобно просматривать письмо без горизонтальной прокрутки одновременно в Outlook, Gmail для компьютеров, Apple Mail, Yahoo и Thunderbird.

Для небольших экранов задайте ячейкам внутренней таблицы медиазапрос, устанавливающий ширину 100% и display со значением block, чтобы столбцы располагались вертикально. Почта iOS и Gmail для Android поддерживают медиазапросы; Outlook 365 для компьютеров их игнорирует, но сохраняет настольную компоновку шириной 600px.

Цвета и изображения фона следует применять к ячейкам <td>, а не к div. Outlook надёжно поддерживает атрибут bgcolor у td, тогда как CSS-свойство background-color у div в зависимости от клиента может быть удалено или полностью проигнорировано.

Для фоновых изображений Outlook нужен Vector Markup Language (VML). Оборачивайте современный CSS background-image в условные комментарии <!--[if mso]>...<![endif]--> со встроенным резервным вариантом v:rect, чтобы Outlook отображал изображение, а все остальные клиенты использовали CSS.

Не используйте flexbox, grid, пользовательские свойства (их поддержка ограничена) и большинство способов позиционирования. Придерживайтесь display: block/inline, фиксированных ширин, заданных атрибутами, и встроенных стилей. По веб-стандартам результат выглядит устаревшим, зато одинаково отображается в каждом почтовом ящике.

Используйте cellpadding (атрибут) и одну ячейку <td> с отступами для внутренних промежутков. Отступы у ячеек таблицы ненадёжны в Outlook, тогда как padding у td поддерживается повсеместно. Объединяйте bgcolor и padding в одной td для создания компонентов типа «карточка» без div.

Добавляйте role="presentation" в каждую таблицу компоновки, чтобы программы чтения с экрана не объявляли «строка, столбец 1 из 2». Также добавляйте альтернативный текст ко всем изображениям, используйте настоящий текст для любого содержимого (а не изображения с текстом) и соблюдайте понятную иерархию заголовков.

Почему для компоновки электронных писем используют таблицы, а не div с CSS flexbox?

Для компоновки HTML-писем используются вложенные таблицы с cellpadding/cellspacing/border, равными нулю, и role="presentation". Внешняя таблица шириной 100% центрирует внутреннюю таблицу шириной 600px; вложенные ячейки td образуют столбцы, которые медиазапросы могут выстроить вертикально на мобильных устройствах. Избегайте flexbox и grid, используйте bgcolor у td и добавляйте резервные варианты VML для фонов в Outlook.