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

Введение

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

Скорее всего, письма, которые вы отправляете сейчас, не влияют на конверсию. Наша статья поможет вам исправить это. Составляя этот план, мы воспользовались моделью Дэйва МакКлюра (Dave McClure) «AARRR: Метрики для пиратов», потому что это – отличная концептуальная схема, которую легко применить в работе. На каждом этапе этой модели мы приведем понятные и осуществимые примеры, которыми вы можете воспользоваться, чтобы создать собственную серию транзакционных писем, нацеленных на совершение конверсии.

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

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

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



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

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

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



Данная статья описывает процесс создания слайдера из эскизов изображений для email-рассылок. Сначала мы сконцентрируемся на реализации слайдера под мобильное ПО, а в частности под родные email-клиенты iPhone и Android. Затем мы добавим поддержку стационарных платформ.

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

Слайдер будет рассчитан только на одну ссылку, что хорошо подойдет в случае описания продукта с разных ракурсов (или, как в нашем случае, номера в отеле), но категорически не подходит при описании разных продуктов, где для каждого изображения требуется отдельная ссылка.
В данной статье будет использоваться ряд техник, описанных в «Интерактивных изображениях для мобильной Email-рассылки», поэтому если у вас возникнут вопросы, вы всегда можете обратиться к вышеописанной статье за разъяснениями.

В нашем блоге мы пишем о различных подходах к верстке email-рассылок — от спорных, но интересных экспериментов до тезисов, подтвержденных целыми исследованиями. Однако мы еще не поднимали тему важности оптимизации писем, уже после их создания. Эта тема хорошо раскрыта в заметке одного из руководителей почтового сервиса Litmus Чада Уайта — сегодня мы представляем вашему вниманию ее адаптированный перевод.



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

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



Хотя HTML-письма существуют почти так же долго, как и интернет, к электронной почте часто относятся как к нелюбимому дитю Сети. Кажется, что противоречивая и устаревшая поддержка элементов HTML в почтовых клиентах отражает следующий настрой – «вполне достаточно того, что отправители могут разместить в письме текст и несколько изображений». Разве нужно что-то еще? По-видимому, электронная почта – уже не среда для инноваций.

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

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

В нашем блоге мы уже неоднократно рассказывали о создании интерактивных 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-писем невозможно, также как и переход электронной почты в мобильную среду (более половины всех открытий теперь происходит на мобильных устройствах).

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

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

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

«Электронные письма будущего будут больше похожи на микросайты, чем на статические сообщения», — писал Чад Уайт, директор по исследованиям популярного сервиса email-рассылки Litmus, в своей книге «Правила email-маркетинга» (“Email Marketing Rules”). В скором времени пользователи смогут смотреть видео, просматривать каталоги продуктов и осуществлять покупки прямо из папки входящих писем.

Книга была опубликована в 2014 году, когда существовали определенные сигналы, свидетельствующие о том, что данные прогнозы сбудутся. Но в 2015 году, по словам Уайта, развитие email значительно ускорилось. Вот лишь несколько примеров новой функциональности, на которую стоит обратить внимание при создании почтовых рассылок.

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

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

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

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

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

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

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

Исследования показывают, что в почтовых программах до 43% email-подписчиков отключено отображение картинок. Это означает, что донести до них нужную информацию с помощью email-рассылки можно только если использовать реальный текст в HTML-версиях писем.

При этом, данный факт вовсе не означает, что можно использовать только Arial и Times New Roman. В сегодняшнем материале мы рассмотрим существующие возможности по работе с шрифтами в email.