Верстка писем *

В нашем блоге мы уже неоднократно рассказывали о создании интерактивных email-рассылок с помощью CSS и HTML. Сегодня мы представляем вашему вниманию адаптированный перевод заметки Джастина Ку о том, как сверстать интерактивные вкладки, которые будут работать в почтовых программах iOS, Android и популярных веб-приложениях.

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



Сегодня мы представляем вашему вниманию выжимку из статей блога FreshInbox о том, как создать интерактивное email-письмо.

В нашем блоге мы довольно часто пишем о разнообразных экспериментах в области верстки email-рассылок — например, создании фонового HTML5-видео в письме или внедрении в сообщение пагинации. Сегодня речь пойдет о еще одной интересной механике — использовании в письме «пасхальных яиц», которые увеличивают вовлеченность читателей.

Схема работала так — пользователь должен был найти пасхалку, опубликовать информацию о ней с соответствующим хештегом в Твиттер — и, если он становился первым, получал бесплатный билет, а остальные пользователи принимались за поиск следующего сюрприза. Итак, пять «пасхалок» позволили компании Litmus распродать билеты на свою конференцию, посвященную вопросам дизайна email-рассылок.

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

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

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



Описываемая техника работает только в почтовом приложении Mail для iPhone (версия для Android в разработке).

В нашем блоге мы часто пишем о создании адаптивных почтовых рассылок (раз, два, три) и вообще уделяем большое внимание email-верстке. Сегодня речь пойдет о способе создания адаптивных писем для почтового клиента Gmail, известного своей довольно скудной поддержкой различных возможностей для верстки. Данную технику в 2014 году описал Джастин Ку (Justin Khoo), позднее метод был дополнен статьей Марка Роббинса в блоге Email Code Geek. Мы представляем вашему вниманию адаптированный перевод основных моментов двух публикаций.

Более половины всех почтовых рассылок подписчики просматривают на мобильных устройствах. Поэтому верстать эти сообщения так, чтобы их было удобно читать на маленьком экране, просто необходимо. Сегодня мы рассмотрим несколько простых советов создания mobile-friendly почтовых писем.

Почему это вообще важно?

В период с 2010 по 2015 год число email-писем, открываемых на мобильных устройствах, выросло на 30%:



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

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

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

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

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

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

К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.

Написание данного поста навеяно недавней поистине шикарной работой, Niсole Merlin. Во многом ее методика верстки схожа с моей и мне радостно от того, что это направление развивается теперь и на западе. Чем же этот способ так хорош? Все очень просто. Не нужно объяснять как важно адаптировать под мобильные платформы сверстанные письма для того, чтобы они были прочтены. Читать простыни на телефоне мало кто будет. Что же все это время делал западный разработчик? Он верстал табличной версткой с элементами блочности, затем причесывал этот код медиазапросами для поддержки мобильников. Чем этот подход ущербен? А тем, что ни на андроиде, ни на яблоке медиазапросы не поддерживаются следующими почтовыми клиентами: Gmail, Yandex, Mail.ru. По большому счету западные коллеги могли бы и наплевать на яндекс с мейлом, но вот Gmail как ни крути первый среди почтовиков.



Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов(progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.

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

Видео проигрывалось в почтовых программах Apple Mail и Outlook 2011 для Mac. В остальных почтовых клиентах отображалось обычное изображение. Ниже представлено пошаговое руководство по созданию такого видео-письма.

Вы потратили много времени на оптимизацию своих email-писем, и уверены что сообщения почтовой рассылки хорошо написаны, приятно выглядят и, что еще важнее, нормально отображаются в большинстве почтовых клиентов. Проблема в том, что даже самые идеальные письма с большой долей вероятности никогда не будут даже открыты получателем. Они просто попадут в папку «Входящие», где уже и так похоронено огромное количество текста.

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

Оптимизация этого текста может приносить отличные результаты и значительно увеличивать процент открытых писем (иногда, до 45%).

Во всем мире все больше людей начинает пользоваться смартфонами, растет число владельцев таких устройств и в России — в Москве девайсами пользуется уже больше половины всех сотовых абонентов. При этом лидерами по продажам в нашей стране являются Samsung и Apple. В США у двух главных мобильных платформ почти равенство — 47,7% у iPhone, 47,6% у Android, в Европе Android впереди, а в Японии наоборот, на iOS приходится более 60% продаж.

Этот общемировой тренд приводит и к тому, что более половины всех писем теперь открывается с мобильных устройств. А значит, дизайнерам, которые занимаются подготовкой почтовых рассылок, необходимо сделать так, чтобы сообщения хорошо выглядели и на Android-устройствах, и на iPhone.

Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю. Поддержка media query как и сам CSS разнятся среди приложений, в следствии этого, каждый раз когда вы слышите что появилось новое восхитительное почтовое приложение, для которого тоже нужно провести тесты, вас неизбежно одолевает страх.

Но что если бы вы могли создать шаблон, который был бы отзывчивым даже в окружениях с наименьшей поддержкой современного CSS? Что если каждый раз, услышав о каком-то очередном почтовом приложении, которое все испытывают, вместо того чтобы предаваться страху, можно было бы чувствовать себя спокойно и уверенно, зная что ваши email наверняка будут выглядеть хорошо?

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

Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.

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

В блоге компании Litmus опубликован материал, в котором рассказывается, как можно создать «скрытую» версию электронного письма почтовой рассылки, которая будет отображаться только на Apple Watch.

Как правило, Watch отображает только plain text-часть почтового сообщения — когда устройство «замечает», что в письме используется изображение, хранящееся на удаленном сервере, оно решает, что все это слишком сложно, и показывает только текст. Речь все-таки идет о часах.

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

Однако, прежде чем погрузиться в мир веб-дизайна и вёрстки уникальных email-кампаний, следует поподробнее взглянуть на media queries, как на инструмент, который имеет свои плюсы и минусы.

При верстке email-рассылок важно сделать разметку пригодной для парсинга и добиться того, чтобы «рюшечки» не мешали чтению контента. А главным контентом в письме почти всегда является текст.

Сегодня мы поговорим о том, как использовать технику прогрессивного улучшения при разработке HTML-шаблонов писем.

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

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

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

Зачем нужно адаптировать письма для мобильных устройств

Значительная часть аудитории различных компаний, занимающихся email-маркетингом, просматривают письма на мобильных устройствах. Во время исследования Campaign Monitor от 2011 года выяснилось, что почти 20% открытий писем происходили на смартфонах и планшетах — в 2009 году эта цифра находилась на уровне всего в 4%. Почти 90% от этих открытий осуществлялись на устройствах под iOS. Сейчас цифры еще выше.

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

Примечание переводчика: Ранее в нашем блоге мы публиковали материал с советами по дизайну email-рассылок, созданными на основе анализа 22 млн писем, а также рассказывали о том, как те или иные параметры письма влияют на его эффективность согласно статистике (в том числе по Рунету). Сегодня мы представляем вашему вниманию обширную инструкцию по email-маркетингу, которую создали аналитики маркетинговой компании Vero на основе анализа 100 млн электронных писем.



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

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

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