Почему ширина письма в 600–640 пикселей остаётся стандартом и когда от неё отступают
Стандарт в 600 пикселей появился больше двадцати лет назад из‑за Outlook на мониторах 1024×768. Панель чтения занимала часть экрана, и на письмо оставалось около 600 px. Мониторы с тех пор выросли в несколько раз, а стандарт сохранился. Причины у этого уже другие, не связанные с Outlook.
Почему ширина не выросла вместе с экранами
Панель чтения не растягивается. В Outlook и Apple Mail письмо открывается в области просмотра рядом со списком писем. На мониторе 27 дюймов эта область всё равно составляет около 700–900 px.
Длина строки. При ширине 700 px и шрифте 16 px в строке помещается около 90 символов. Комфортный предел для чтения составляет 60–75 символов. Более широкое письмо читается хуже, даже если целиком помещается на экран.
Вес изображений. Картинка для письма шириной 600 px готовится в размере 1200 px. При увеличении ширины письма до 800 px изображения становятся 1600 px, и вес письма растёт примерно в полтора раза.
Как ведут себя разные значения
| Ширина | Где отображается корректно | Где возникают проблемы |
| 600 px | Везде | Нет |
| 640 px | Везде | Нет |
| 680–700 px | Веб‑клиенты, мобильные | Панель чтения Outlook, горизонтальная прокрутка |
| 800 px и больше | Только веб‑версия | Обрезается в большинстве десктопных клиентов |
Значение 640 px представляет собой верхнюю безопасную границу. Оно определяется размером панели чтения в Outlook при типичном разрешении экрана.
Когда стоит отступить от стандарта
Каталог с сеткой товаров. При сетке 3×3 или 4×4 и ширине 600 px карточка получается 180 px, и товар на ней не разглядеть. Здесь оправданы 700 px при условии, что на узких экранах сетка перестраивается в две колонки.
Внутренние корпоративные рассылки. Если вся компания работает в одном почтовом клиенте, ширину можно подобрать под него. Это единственный случай, когда вёрстка под конкретную среду оправдана.
Дайджест с длинными таблицами. Финансовый отчёт или сравнение тарифов в 600 px не помещается. Более надёжное решение состоит в том, чтобы вынести таблицу на страницу сайта и дать в письме ссылку.
Как задать ширину правильно
Ширина задаётся в трёх местах, и все три значения должны совпадать.
- Внешняя таблица получает width=»100%», чтобы фон растягивался на всю ширину
- Внутренняя таблица получает width=»600″ в атрибуте и max-width: 600px в стилях
- Для Outlook добавляется условный код с фиксированной шириной через VML, потому что Word-движок игнорирует max-width
Указывать только max-width без атрибута width нельзя. Outlook его не поддерживает и растянет письмо на всю панель.
Мобильные экраны
На телефонах письмо шириной 600 px масштабируется под экран автоматически. Дополнительных действий это не требует, но есть два условия.
Первое. В коде должен присутствовать <meta name=»viewport» content=»width=device-width, initial-scale=1″>, иначе часть клиентов отрисует письмо в десктопном виде с мелким текстом.
Второе. Внутренние элементы не должны быть шире контейнера. Одна картинка шириной 620 px внутри письма 600 px даёт горизонтальную прокрутку всего письма.
Что проверить
- Ширина задана и атрибутом, и в стилях
- Ни один внутренний элемент не шире 600 px
- Письмо не обрезается в панели чтения Outlook
- На iPhone SE письмо помещается без горизонтальной прокрутки
- Изображения подготовлены в двойном размере и не больше
Читайте также