Несмотря на то, что наиболее популярным способом создания писем и шаблонов для рассылок сегодня являются простые в использовании блочные редактор, не стоит забывать об альтернативных вариантах. HTML-верстка самый сложный, но в то же время самый надежный способ спроектировать качественно письмо.
Верстка письма — это процедура его формирования, целью которой является корректное отображение для всех пользователей. Важен как текст сообщения, так и его стиль.
Свойства верстки email писем:
- для создания письма html лучше использовать таблицу;
- важно, чтобы стиль сообщения был схож со стилем сайта;
- необходимо, чтобы шрифт, который вы задействуете, присутствовал у получателя с любым устройством;
- при работе над версткой писем html нужно учитывать разнообразие программ для чтения писем (Outlook, Gmail, Yahoo, Hotmail, Android, iOS и другие);
- во время работы над стилем необходимо быть осторожным с SSC3, элементы которого некоторые программы просто автоматически удаляют;
- во время прописывания стилей необходимо применять встроенные функции (инлайн).
Сверстать письмо можно двумя способами — вручную или при помощи шаблона. Второй способ более легкий и подходит даже неопытному верстальщику. Чтобы создать сообщения для электронной рассылки, обращаются к одно- или двухколонным шаблонам, которые имеют четкую структуру:
- шапка (хедер) — здесь размещены ссылка на сайт и логотип;
- тело — это основная информация, также может содержать картинки и другие полезные ссылки;
- подвал (футер) — чаще всего здесь находиться кнопка отписки, и повторно размещается ссылка на главную страницу сайта.
Также можно прибегнуть к специальным сервисам. Например, система рассылок SendExpert дает возможность создать письмо с помощью заранее подготовленных шаблонов, что позволяет свести к минимуму время, потраченное на создание рассылки.
Более удобным и полезным для читателя ваше письмо можно сделать, используя различные виды верстки:
- адаптивная верстка — предусматривает адаптацию текста под устройство, с которого его прочитает пользователь, способствует правильному отображению текста. Некоторые верстальщики используют способ Mobile First, который предусматривает изначальное создание макета сообщения на мобильном устройстве;
- отзывчивая — схожа с адаптивной, но сложнее. Единственное отличие — плавные переходы от одной версии письма к другой;
- резиновая — если создать шаблон, применяя форму только одной колонки, текст легко подстроится под изменения масштаба страницы;
- эластичная — фрагменты сообщения изменяются исходя из пропорциональных соотношений;
- гибридная — сочетание эластичных и фиксированных элементов.
Подробности содержания письма зависят от шаблона и вашей задумки. Но некоторые общие советы помогут усовершенствовать код каждому верстальщику. Во-первых, не рекомендуется писать CSS в тегах head и body, иначе эти элементы могут быть удалены некоторыми почтовыми клиентами. Во-вторых, для того чтобы сообщение было удобным для чтения на любых устройствах, прибегните к медиа-запросам (команды, которые адаптируют текст под разрешение экрана). В-третьих, для избежания искажений, ширина текста не должна превышать 600 px.
Проверить, нет ли ошибок в уже готовом макете, можно при помощи сервисов — Litmus.com (проверка на различных почтовых клиентах и девайсах), Email on Acid (также с его помощью можно протестировать макет, проверить на спам; имеет редактор HTML), The WSC Markup Validation Service (позволяет проверить валидность кода).
Следовательно, верстка электронных писем сложный и трудоемкий процесс, который лучше доверить профессионалу. Ведь от того, каким увидит ваш email подписчик, зависит репутация и прибыль компании.
Теги: html верстка создание письма
