HTML верстка писем: памятка для новичков
Привет. Вы оказались на этой странице, значит скорее всего вам приходится верстать email рассылки, поэтому соболезную. Я составил памятку, чтобы не упустить важные моменты при верстке HTML писем, буду пополнять этот список. Вот он:
Что надо помнить?
- У всех картинок с текстом присутствует
alt
атрибут, у картинок без текста пустойalt
- Фоновые изображения нужно пересохранять для web
- Размеры картинок выгружаем в x2 для ретина дисплеев
- Круглые кнопки и кнопки с нестандартным шрифтом верстаем картинкой, чтобы скругления работали и в outlook
- Все эмодзи вставляем картинкой, а не кодом
- У писем нет ограничения по ширине, ограничивать нужно только контент. Но, если у нас есть фоновое изображение, тогда ограничиваем общую ширину письма, чтобы она была равна ширине фонового изображения и ограничиваем ширину для outlook и задаем для него отдельное фоновое изображение.
- Вертикальные отступы лучше делать так
<!-- padding --><div style="height: 10px; line-height: 10px; font-size: 8px;"></div>
- Стараемся не использовать
padding
для отступов, верстаем по максимуму таблицами. Например: Есть иконка шириной35px
и отступ до текста15px
, значит делаем ячейку шириной50px
, а не с помощью паддинга35px + padding: 15px
- Если при наличии фонового изображения требуется вертикальный отступ более
19px
, то задаем его с помощью таблицы. Это связано с тем, что отступ заданный через таблицу не меняет своего размера, в то время как отступ через padding может увеличиваться в outlook тем больше, чем больше исходное значение. И чтобы контент в outlook не обрезался следует отступы задавать через таблицы - Блоки с перестроением по центру должны быть одинаковой ширины
- Проверить правильно ли переносится текст в адаптиве, особое внимание к номеру телефона