Про вёрстку писем ходит много устаревших утверждений. Смотрим, что написано в справочнике самого почтового клиента.
Коротко
- Стили можно задавать блоком style, не только инлайн.
- Поддерживаются селекторы по классу, элементу и идентификатору.
- Медиазапросы работают: ширина, ориентация, разрешение.
- Неподдерживаемые свойства просто игнорируются.
Что поддерживается на самом деле
| Вопрос | Что в справочнике |
|---|---|
| Можно ли задавать стили блоком | Да, блоками style и обычным CSS |
| Какие селекторы работают | По классу, элементу и идентификатору |
| Работают ли медиазапросы | Да, стандартные |
| По чему можно делать запросы | Ширина экрана, ориентация, разрешение |
| Что с неподдерживаемыми свойствами | Могут быть проигнорированы |
Первая и третья строки прямо опровергают два самых распространённых утверждения в статьях о вёрстке писем: «только инлайн-стили» и «медиазапросы не работают». В справочнике сказано обратное: стили можно задавать блоками, а медиазапросы поддерживаются, включая запросы по ширине, ориентации и разрешению.
Что именно поддерживают медиазапросы
| Категория | Значения |
|---|---|
| Типы носителей | all, screen |
| Параметры ширины | min-width, max-width |
| Параметры устройства | min-device-width, max-device-width |
| Ориентация | orientation |
| Разрешение | min-resolution, max-resolution |
| Ключевые слова | and, only |
Этого набора достаточно для обычной адаптивности: одна колонка на узком экране, две на широком. Сложные приёмы вроде запросов по цветовой схеме в перечне не названы, и рассчитывать на них не стоит.
Почему всё равно верстают таблицами
| Причина | Что за ней стоит |
|---|---|
| Клиентов много | Справочник есть у одного |
| Старые версии программ | Поддержка хуже |
| Веб-версии и приложения различаются | Один клиент — разное поведение |
| Таблицы работают везде | Самый предсказуемый способ |
| Современные приёмы вёрстки ненадёжны | Поддержка неравномерная |
Таблицы — не требование, а способ снизить риск. Справочник конкретного клиента описывает его поведение, а письмо получат в десятке разных программ: таблицы дают одинаковый результат там, где современная вёрстка даёт разный.
Практические правила
Ширина около шестисот точек
Помещается в большинстве окон.
Одна колонка на узком экране
Через медиазапрос.
Размеры изображений в атрибутах
Чтобы макет не прыгал.
Текст текстом, а не картинкой
Картинки часто отключены.
Альтернативный текст у изображений
Его видят вместо картинок.
Крупные кнопки
Нажимают пальцем.
Четвёртая и пятая строки идут вместе и решают частую проблему. Если письмо — одна большая картинка, при отключённых изображениях человек видит пустоту: текст должен быть текстом, а у картинок должен быть альтернативный текст.
Что проверить до отправки
| Проверка | Зачем |
|---|---|
| Открыть в нескольких почтовых службах | Поведение различается |
| Посмотреть на телефоне | Основная часть открытий |
| Отключить изображения | Проверить альтернативный текст |
| Проверить ссылки | Все до единой |
| Проверить предзаголовок | Что попадёт в список писем |
| Проверить отписку | Ссылка на месте и работает |
Четвёртая строка кажется очевидной и подводит чаще всего. Ссылка в письме, ведущая на несуществующий адрес, исправляется только новой отправкой: письма нельзя отредактировать после отправки, в отличие от страниц сайта.
Частые ошибки
| Ошибка | Последствие |
|---|---|
| Письмо одной картинкой | При отключённых изображениях пусто |
| Нет предзаголовка | В список писем попадает техническая фраза |
| Мелкие кнопки | Не нажать на телефоне |
| Нет альтернативного текста | Непонятно, что на месте картинок |
| Ссылка на тестовый адрес | Исправляется только новой отправкой |
| Отписка мелким шрифтом | Вместо отписки жалуются |
Последняя строка — не про вёрстку, а про последствия. Спрятанная отписка конвертирует подписчика в жалобу, а доля жалоб ограничена требованиями почтовых служб: заметная ссылка отписки дешевле любой сохранённой подписки.
Частые вопросы
Поддерживает ли Gmail блоки style или только инлайн-стили?
В справочнике сказано, что письма можно оформлять блоками style и обычным CSS, а также что поддерживаются селекторы по классу, элементу и идентификатору.
Работают ли медиазапросы в письмах?
Да. Поддерживаются стандартные медиазапросы по ширине экрана, ориентации и разрешению, типы носителей all и screen, ключевые слова and и only.
Почему письма всё равно верстают таблицами?
Справочник описывает поведение одного клиента, а письмо получат в десятке разных программ. Таблицы дают предсказуемый результат там, где современная вёрстка — разный.
Можно ли сделать письмо одной картинкой?
Не стоит: при отключённых изображениях человек увидит пустоту. Текст должен быть текстом, а у изображений должен быть альтернативный текст.
Читайте также
Сделаем сайт, который приносит заявки
Спроектируем структуру под запросы, соберём и запустим — с учётом SEO с первого дня.
Обсудить разработку
