Основные особенности HTML верстки писем
Верстка электронных рассылок в отличие от других видов верстки имеет существенно большее число различных нюансов и даже ограничений. Если их не принимать в расчет, то электронное письмо будет в результате неправильно отображаться.
Вкратце верстка писем представляет собой сочетание следующих нюансов:
- широкое применение табличной верстки;
- встраивание стилей в голове листа, в том числе медиа-запросов;
- использование развернутой формы для записи свойств стилей;
- ограниченное и тщательно выверенное употребление свойств CSS3, так как они могут работать не везде;
- использование фиксированной ширины писем (чаще всего 600*700px);
- использование исключительно стандартные шрифтов, которые могут читаться с любых устройств.
Электронное письмо обладает структурой обыкновенной html-страницы. Верстка email писем очень часто основывается на табличном варианте. Например, контент-письма часто оформляют в виде двух таблиц. При этом первая таблица используется для задания основного фона, ширины, величины шрифта и прочих настроек, а вторая определяет ширину контента и задет его фон.
Для использования изображений с помощью html предполагает обнуление параметра border с последующим заданием параметров ширины (зависит от необходимых для отображения размеров рисунка и ширины блока-родителя). Также верстка email писем может подразумевать использование командных кнопок, теней и прочих атрибутов. Часто применяется и так называемая адаптивная верстка email писем, при этом применимы следующие варианты адаптации:
- использование технологии плавающих облаков;
- использование подстраивающегося содержимого.
Если адаптацию прописать корректно, то можно добиться качественного отображения практических на всех клиентских машинах. Однако в случаях использования медиазапросов следует учитывать, что не все устройства могут ее поддерживать. Поэтому зачастую от такой адаптации стоит отказаться.
Для верстки email писем часто используются следующие прикладные программы:
- Adobe Photoshop. Программа позволяет нарезать макет и оптимизировать изображение под заданные параметры.
- Avocode. Программа используется для конвертации макета, представленного в виде sketch формата.
- Текстовый редактор (любой, поддерживающий синтаксис html).
Для прописывания стилей в редких случаях допускается использование инлайнеров, но лучше всего выписывать их вручную внутри html-файла. Код в таком случае получится более аккуратным и будет чище работать.
Для тестирования верстки пользуются:
- программами или сайтами для проверки валидности;
- платформами, позволяющими увидеть отображения окончательного варианта письма во множестве клиентов;
- платформы для массовых тестов.
Занимаются подобной версткой электронных писем в основном специальные агентства, работающие с email маркетингом. На сегодняшний день ниша практически свободна, но ситуация все быстрее меняется в сторону улучшения.
