Новости

Основные особенности HTML верстки писем

Верстка электронных рассылок в отличие от других видов верстки имеет существенно большее число различных нюансов и даже ограничений. Если их не принимать в расчет, то электронное письмо будет в результате неправильно отображаться.

Верстка email писемВкратце верстка писем представляет собой сочетание следующих нюансов:

  • широкое применение табличной верстки;
  • встраивание стилей в голове листа, в том числе медиа-запросов;
  • использование развернутой формы для записи свойств стилей;
  • ограниченное и тщательно выверенное употребление свойств CSS3, так как они могут работать не везде;
  • использование фиксированной ширины писем (чаще всего 600*700px);
  • использование исключительно стандартные шрифтов, которые могут читаться с любых устройств.

Электронное письмо обладает структурой обыкновенной html-страницы. Верстка email писем очень часто основывается на табличном варианте. Например, контент-письма часто оформляют в виде двух таблиц. При этом первая таблица используется для задания основного фона, ширины, величины шрифта и прочих настроек, а вторая определяет ширину контента и задет его фон.

Для использования изображений с помощью html предполагает обнуление параметра border с последующим заданием параметров ширины (зависит от необходимых для отображения размеров рисунка и ширины блока-родителя). Также верстка email писем может подразумевать использование командных кнопок, теней и прочих атрибутов. Часто применяется и так называемая адаптивная верстка email писем, при этом применимы следующие варианты адаптации:

  • использование технологии плавающих облаков;
  • использование подстраивающегося содержимого.

EmailsoldiersЕсли адаптацию прописать корректно, то можно добиться качественного отображения практических на всех клиентских машинах. Однако в случаях использования медиазапросов следует учитывать, что не все устройства могут ее поддерживать. Поэтому зачастую от такой адаптации стоит отказаться.

Для верстки email писем часто используются следующие прикладные программы:

  1. Adobe Photoshop. Программа позволяет нарезать макет и оптимизировать изображение под заданные параметры.
  2. Avocode. Программа используется для конвертации макета, представленного в виде sketch формата.
  3. Текстовый редактор (любой, поддерживающий синтаксис html).

Для прописывания стилей в редких случаях допускается использование инлайнеров, но лучше всего выписывать их вручную внутри html-файла. Код в таком случае получится более аккуратным и будет чище работать.

Для тестирования верстки пользуются:

  • программами или сайтами для проверки валидности;
  • платформами, позволяющими увидеть отображения окончательного варианта письма во множестве клиентов;
  • платформы для массовых тестов.

Занимаются подобной версткой электронных писем в основном специальные агентства, работающие с email маркетингом. На сегодняшний день ниша практически свободна, но ситуация все быстрее меняется в сторону улучшения.