Верстка писем обладает большим количествам отличий от стандартной веб-верстки. Если не учитывать их при работе, послание будет некорректно отображаться в некоторых или практически во всех почтовых клиентах. В этой статье поговорим о том, как верстать рассылки, какие инструменты лучше использовать, чтобы создавать красивые и информативные письма.
Если вы заинтересованы профессией программиста или хотите повысить собственную квалификацию, предлагаем вам обратить внимание на наши IT-курсы. Здесь вы найдете интересную и высокооплачиваемую профессию, которую легко освоите с помощью наших квалифицированных преподавателей.
Верстка писем и дизайн
Чтобы в почте адресата письмо отражалось именно в таком виде, в каком его задумал преподнести дизайнер или маркетолог, верстка должна отвечать всем требованиям почтовиков. Современные системы не функционируют на рассылках, поскольку у них попросту не существует стандартов – каждый самостоятельно создает собственный движок рендеринга и формирует послание так, как считает нужным.
Стандарты в дизайне возникают по причине того, что в верстке нет возможности применять актуальные спецификации цветов, спектр, фоновые принты и т.д. Здесь работают только старые и самые простые инструменты.
Размер
Ширина HTML-шаблона должна быть не более 700 пикселей. Даже на крупных экранах контент отражается только в таком ограничении. По длине стандартов не существует, основное, что нужно сделать – разместить самую важную информацию на первом экране, чтобы адресат сразу увидел главное.
Не рекомендуется создавать пространные письма, поскольку они просто могут не пройти по массе. Ряд почтовых систем не дают грузить объем не более 102 кБ. Когда данные загружаются не целиком, появляется указание «Далее» или «Загрузить оставшееся». По этой причине не появляются продолжение контента и нужные ссылки, размещенные внизу. Это может сказаться на статистике, если, к примеру, пользователь не откроет письмо полностью, маркетолог об этом просто не узнает.
Детали фона
Рекомендуется делать фон однотонным. Если специалист формирует градиент, нет гарантии того, что получится одинаково обработать все странички для каждого почтового сервиса. Желательно не делать сложные картинки, потому что с ними практически невозможно качественно сверстать контент для каждого почтового сервиса. В первую очередь стоит помнить, что верстка предназначена именно для того, чтобы письмо в итоге выглядело красиво и понятно.
Шрифт
Нежелательно применять в рассылках эксклюзивные шрифты, которые необходимо скачивать и устанавливать самостоятельно: к примеру, часто использующийся Futura. Если они не выставлены по умолчанию, то в письме отображаться тоже не будут.
Основная причина заключается в том, что к рассылкам нельзя подгружать шрифты, но это возможно при верстке сайта. По правилам безопасности ничего не следует притягивать извне, поэтому не функционируют внешние файлы со скриптами.
Контент
В письме возможно использовать четыре основных сегмента:
- прехедер;
- хедер;
- базовый;
- футер.
Первый – текст. Особенно востребованный в мобильной версии отображения страницы, в стандартной он не слишком нужен. Обычно выдается на экран в качестве подзаголовка под основной темой. Если этот элемент не предусмотрен дизайнером, то подтягивается следующая за подзаголовком информация.
Хедер представляет собой заголовок или основную мысль, указанную в названии письма. Обычно здесь присутствует логотип компании, контактная и другая важная информация. Опытные дизайнеры стараются минимизировать этот раздел, чтобы не отвлекать внимание адресата от основной мысли письма.
Базовый элемент подводит читателя к основной мысли, обуславливает целевое воздействие. Это может быть текст, баннер и т.д.
Футер – окончание всего послания. Если пользователю действительно необходимо ваше предложение, то он откроет портал в веб-версии, если нет – отпишется от рассылки.
Верстка
При адаптивной верстке письмо будет корректно отображаться на экране смартфона и компьютера. То есть при уменьшении ширины контент автоматически сжимается.
В качестве сетки вы можете располагать сегменты на странице в виде table или инлайн-блоков. Первый способ не считается ультранадежным, обычно визуально смотрится как таблица с одной колонками и включенными в нее ячейками. Последующий элемент в данном случае оказывается ниже предыдущего на следующей строчке. Нарисованная в пару-тройку колонок таблица просто не отразится так, как нужно, и ячейки станут перескакивать на «удобное место» при изменении параметров монитора.
Инлайн-блоки устанавливаются в соответствии с размерами внутреннего наполнения. Если экран маленький, блоки будут меньше, широкий – больше.
Кодировка
Используется исключительно UTF-8, при другой текст будет отображаться, как нечитаемые иероглифы.
Стили
Стили, равно как и шрифт, не прописываются в изолированных файлах, сервис их просто не подтянет.
Тестирование
Окончательный дизайн письма – верстка – это сбор данных в единое целое из разрозненных элементов конструктора. Существуют программы-помощники, дающие возможность понять, что письмо отображается верно:
- тестировочные справочники отдельных свойств;
- тестировочные сервисы сверстанных e-mail-рассылок.
Вы можете проверять готовые письма целиком через сервисы itmus.com или emailonacid.com либо вручную.
Что произойдет, если верстка письма получится неверной?
Если программист пишет код для письма по аналогичным лендингам принципам, то готовый результат вряд ли порадует его и получателя. Ряд из тех проблем, которые могут образоваться при неверной верстке:
- послание отображается по-разному в мобильной и декстропной версиях;
- может пропасть фон;
- эксклюзивные шрифты просто не отобразятся;
- письмо долго грузится в почтовом сервисе, например в Outlook;
- ряд элементов может неправильно отображаться.
Также стоит учесть особенности вставки ссылок. К примеру, не рекомендуется подгружать их через наружные ресурсы. Дизайн готового письма будет выглядеть совсем не так, как задумывалось изначально. Чтобы не вписывать возле каждого элемента определенный код (<div style </div>), можно вставлять ссылки через специальные сервисы, к примеру, Premailer.io. Они самопроизвольно трансформируют внешние стили во внутренние.
