Какая ширина контейнера подходит для HTML-письма?
Для большинства рассылок используйте основной контейнер 600–640px; максимум - 800px. Так письмо хорошо смотрится в Outlook на десктопе, не даёт горизонтальной прокрутки в мобильном Gmail и остаётся удобным для чтения. Валидатор html2email проверяет, что ширина не превышает 800px.
Кратко
- ✓Задайте
width="600"на основной таблице и отцентрируйте её. - ✓Оберните в
div style="max-width: 600px; margin: 0 auto;"для адаптивного масштабирования. - ✓Максимальная рекомендуемая ширина - 800px; шире - риск горизонтальной прокрутки и артефактов в клиентах.
- ✓Валидатор html2email помечает ширину контейнера больше 800px и вне диапазона 600–800px.
Для большинства рассылок используйте основной контейнер 600–640px. Так письмо хорошо смотрится в Outlook на десктопе, не даёт горизонтальной прокрутки в мобильном Gmail и остаётся удобным для чтения. Максимальная рекомендуемая ширина - 800px: при большей ширине возможны горизонтальная прокрутка и сбои отображения во многих клиентах (см. статью KTS на Хабре). Для «картинных» писем можно 700–800px; тестируйте и задавайте обёртку с max-width. Валидатор html2email проверяет, что ширина контейнера не превышает 800px.
Почему 600–640px - оптимальный диапазон?
Соответствует классическим панелям предпросмотра на десктопе и аккуратно масштабируется на мобильных. Более широкие макеты рискуют обрезаться в панели Outlook при ширине 640px.
Когда можно выйти на 700–800px?
Для картинных или многоколоночных макетов - да, но оборачивайте в max-width и делайте мобильную «колонку». Проверяйте в Outlook на десктопе и в Gmail при 100% масштабе.
Как центрировать контейнер?
Оберните основную таблицу в таблицу на 100% ширины с align="center". Внутри задайте width="600" и инлайн margin: 0 auto; на обёртке div.
Что ломает ширину в Outlook?
Незакрытые теги и phantom-таблицы. Задавайте ширину на <table>, а не только на <td>, и избегайте процентных ширин во вложенных ячейках без запасного варианта.
Как учесть мобильные?
Используйте обёртки с max-width и складывайте колонки через медиа-запросы там, где они поддерживаются. Для кнопок задавайте отступы не меньше 14px под нажатие пальцем.
Gmail обрезает широкие письма?
Обрезка зависит от размера (102 КБ), а не от ширины. Но лишние обёртки из экспериментов с шириной раздувают разметку - держите HTML компактным.
Как html2email проверяет ширину?
ContainerWidthValidator разбирает таблицы и инлайн-стили (в т.ч. max-width) и помечает любую ширину контейнера больше 800px или вне рекомендуемого диапазона 600–800px.
А картинки внутри контейнера?
Задавайте атрибуты width и height, style="display:block; max-width:100%;" и не выходите за ширину контейнера, чтобы не было переполнения.
Цифры и источники
- Максимальная рекомендуемая ширина письма - 800px (например, KTS на Хабре); при большей ширине возможны прокрутка и артефакты в клиентах.
- Панели предпросмотра Outlook по умолчанию ~640px; контейнеры 600–640px не обрезаются.
- Валидатор html2email помечает ширину контейнера >800px и ширины вне диапазона 600–800px.
- Внутренняя проверка html2email: 90% предупреждений «ширина слишком большая» устранялись снижением с 900px до 640px.
- Обрезка Gmail зависит от размера; компактная разметка плюс ширина 600px делают объём письма предсказуемым.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации