Оптимизация дизайна и вёрстки шаблонов email писем

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

Создание шаблонов email писем

Хотите, чтобы ваши email рассылки были успешными? Выполните следующие рекомендации для шаблонов email писем и обеспечьте себе их доставляемость, а также увеличение конверсии за счёт прочтений.

Делайте шаблон простым

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

Слишком яркие и контрастные цвета могут только раздражать читателя и вызывать желание закрыть письмо. Чем меньше элементов в письме, тем проще проследить за их поведением при тестировании.

Придерживайтесь ширины 65 символов

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

Конечно, 65 символов могут быть разными по ширине. Но речь идет об ориентире, а не о супер правиле. Если в пикселях, то ограничтесь 500-600px.

Соблюдайте правила отписки

Необходимо включать опцию «отписаться» в каждом письме. Это не просто уважение к подписчикам, а обязательное условие для любой рассылки. Не менее важно указывать, что подписчик сам подписался на вашу рассылку.

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

Будьте внимательны с дизайнерскими шаблонами

Когда вы редактируете код шаблона, используйте программное обеспечение, например Sublime Text 2, Dreamweaver или блокнот. Программы вроде WYSIWYG обычно вставляют дополнительный код, что может отрицательно сказаться при просмотре в некоторых почтовых клиентах. Лучше прописывайте весь код вручную или, после использования программ, удаляйте всё лишнее. Опять же, в eSputnik есть встроенный реактор HTML со встроенной подсветкой синтаксиса и форматированием.

Добавляйте дизайн с таблицами

Хотя это не лучшие практики для веб-страниц, но для html писем они могут быть необходимы. Иногда это единственный  способ для корректного отображения вашего дизайна во всех почтовых клиентах, но всё же лучше обходится без больших уровней вложенных таблиц. Мы делаем это автоматически подгоняя код Вашего письма до близкого к идеальному.

Откажитесь от сложных тегов colspan и rowspan

Далеко не все почтовики правильно отобразят письма, в таблицах которых имеются теги colspan и rowspan — они будут вносить свои поправки в ваши шаблоны. Точнее сказать, одна программа покажет ваше письмо более-менее правильно — Lotus Notes. А у вас многие клиенты пользуются этим email клиентом? Вряд ли :)

Избегайте атрибутов тега

Некоторые почтовые клиенты игнорируют тег

. Если вы хотите, чтобы ваше письмо было с определённым цветным фоном, лучше добавьте таблицу с шириной 100% и выравниванием по центру, а основное содержание разместите во вложенной таблице.

Используйте встроенный CSS

Многие почтовики, как Gmail, Hotmail, Mail.ru  и т.д. будут вырезать из вашего кода теги, так что используйте встроенный CSS вместо этого.

К сожалению, поддержка CSS-свойств почтовыми клиентами не достигла уровня современных браузеров. Чтобы письмо правильно отображалось у всех получателей, используйте следующий набор поддерживаемых стилей:

Сейчас мы готовим материал, в котором дадим сравненительную характеристику о том, как все стили работают в наиболее популярных почтовых программах для Украины.

Избегайте сокращений в CSS

Не все почтовые клиенты смогут понять, что от них требуется и письмо может выглядеть коряво у получателя.

Например, сокращения в CSS :

Лучше заменить на:

Не используйте внешние CSS классы

Всё, что начинается с может иметь неоднозначные результаты в разных почтовых клиентах. Лучше использовать встроенный CSS, чтобы конструкция письма при пересылке не сломалась. Конечно, вам придётся прописывать больше кода, но это залог того, что письмо отобразится как вы задумали.

Избегайте Javascript или других динамических скриптов

Даже если спам-фильтр пропустит ваше письмо, большинство почтовых клиентов не даст этим сценариям правильно функционировать. Тут слово избегайте, хорошо бы заменить на "никогда не используйте", но не будем столько категоричными :)

Не размещайте встроенные мультимедиа

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

Придерживайтесь HTML стандартов

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

Использование изображений в письмах

Избегайте фоновых изображений

Outlook не признает фоновых изображений, лучше использовать цвет фона, а графику вставлять через img. Ссылка на фоновое изображение может оказаться пустой, в параметре свойства background-image, если это Gmail, хотя в последнее время, с этим вроде бы разобрались.

Используйте абсолютные пути изображения

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

Вместо

Лучше использовать:

Задавайте ширину и высоту изображения

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

Используйте ALT текст

Некоторые почтовые клиенты не работают с изображениями по умолчанию, поэтому каждое изображение должно иметь привлекательный ALT текст, чтобы читателю хотелось открыть письмо. Старайтесь делать alt текст короче чем ширина самой картинки, а то Chrome может вообще не показать этот текст, а Opera обрежит, FF покажет сколько сможет... Другими словами чем короче и понятнее alt текст тем лучше.

Оптимизируйте размер изображений

Сделайте размеры файлов изображений как можно меньше, только чтобы они не теряли своей визуальной целостности. Это позволит предотвратить долгое время загрузки писем.

Убирайте пробелы между картинками

Для корректного отображения в Gmail, Hotmail и т.д. при использовании нескольких изображений, CSS устранит белые зазоры между соседними изображениями, используя:

Не делайте письмо одной картинкой

Спам-фильтры часто рубят такие письма и, в принципе, понятно почему. Не все почтовики по умолчанию подгружают картинки, а следовательно, что увидит подписчик в вашем письме? Ничего.

Использование текстового содержимого в сообщениях электронной почты

Баланс текста и изображений

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

Тем более, здесь даже нет ALT текста для картинок и никакого интересного призыва для читателей.

Копируйте текст через блокнот

Добавляя текст из других текстовых редакторов к тексту может подтянуться форматирование редактора. Непонятно, как текст будет вести себя при рассылке, хотя сообщение может не сохраниться вообще, если к нему прицепятся Вордовские теги.

Старайтесь не использовать невидимый текст

Это обычный трюк, который используют спамеры, так что теперь подобные вещи редко пропускают спам-фильтры.

Используйте прехидер

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

Создание Plain-text в письмах

Всегда делайте текстовую версию письма

Некоторые браузеры, почтовые клиенты и мобильные устройства не могут справиться с HTML. Хотя многие почтовые клиенты позволяют делать HTML еmail по умолчанию, некоторые из них также дают пользователям просматривать письма только в формате обычного текста. Не учитывая это, многие рискуют оттолкнуть часть своей базы. Кроме того, HTML без текста не пропустят спам-фильтры. eSputnik позволяет легко подтянуть из HTML версии вашей электронной почты текстовый вариант.

Plain-text должен совпадать с HTML

Не имея текстовой версии письма спам-фильтры могут не пропустить ваше письмо. То же самое справедливо для копии plain-text, которая сильно отличается от его версии HTML. Некоторые почтовики не поддерживают HTML, поэтому важно давать информацию в текстовом варианте.

Сокращайте ссылки URL-адресов

Cсылки с длинной более 60 символов могут не поместиться в одну строку и окажутся нерабочими. Сокращайте текст ссылки или сократите саму ссылку в специальных сервисах.

Использование заглавных букв в заголовках

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

Заменяйте маркированные списки

Не менее важным выделением в plain тексте считаются булеты, в HTML версии их можно заменить звездочками (*) или тире (-).

Лучшие практики эффективных писем

Используйте понятные призывы к действию (CTA)

Сделайте ваш основной Call To Action заметным и понятным. После повышения конверсии на вашем сайте благодаря рассылке, вы будете точно знать своих потенциальных клиентов.

Добавляйте ссылки на предпочитаемые подписки

В дополнение к ссылке «отписаться», добавляйте ссылку на обновления данных абонента. Таким образом, получатели могут отказаться только от одного типа рассылок, а не от всех сразу.

Указывайте абсолютные пути вместо вложений

Если вы хотите отправить получателям документ (например PDF или DOC), лучше не прикреплять эти файлы к письму. Чтобы свести к минимуму шансы быть заблокированным спам-фильтрами и уменьшить время загрузки письма. Лучше загрузить вложение на свой сайт и дать на него в письме ссылку с эффективным призывом к действию. Наш редактор автоматически сделает это за вас, просто выделите фрагмент текста или изображения и нажмите значок вложения. eSputnik превратит этот текст или изображение в ссылку, ведущую к данным.

Повторяйте навигацию по сайту

Вы можете повторить навигацию своего ​​сайта в верхней части вашего письма, чтобы привлечь больше трафика на ваш сайт.

Включайте раздел «Следите за нами»

Добавляйте кнопки или ссылки на Facebook, Twitter и другие социальные сети, где можно вас найти.

Давайте возможность просматривать email письмо в браузере

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

Тестирование ваших писем

Проверьте письмо в нескольких почтовых клиентах

Настройте учетные записи в Gmail, Outlook, Яндекс, а затем отправьте тестовые письма каждому из них. Тогда вы сможете увидеть, как дизайн письма выглядит в каждом почтовом клиенте, и настроить его соответствующим образом.

Также, проверяйте как выглядят ваши письма на мобильных устройствах. Это очень просто, если вы пользуетесь для создания писем редактором вроде Stripo.email

Достаточно нажать на одну кнопочку и вы увидите, как отображается ваше письмо на мобильном. При необходимости, можно отключать те или иные блоки для мобильных. Как в примере - пропал кусочек текста.

Сегментируйте вашу клиентскую базу

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

Попробуйте разные варианты оформления

Отправьте каждой группе клиентов различные варианты писем, чтобы определить, какой тип является более эффективным для получения кликов.

По основным моментам вроде бы пробежались. Если у вас остались вопросы или есть свои идеи и наработки по теме — пишите нам в соц.сетях и мы обязательно всё  рассмотрим;)