litmus putsmail что это
Рассылай и властвуй: инструменты для создания и тестирования рассылки
Верстать электронные письма — это боль. Верстать и тестировать адаптивные письма с интерактивом (например, с формами и слайдерами) — боль в квадрате. Однако, не всё не так плохо, если выбрать правильные инструменты. В статье расскажу об email-фреймворках — MJML и Foundation for Emails — и моих любимых ресурсах для тестирования рассылки — Litmus и Email On Acid.
В предыдущей статье мы узнали, как начиналась история рассылки и какую роль в ней сыграл Outlook, а также выяснили, какой интерактив мы сможем добавить в рассылку уже сейчас, а какой — в будущем. В этой статье поговорим об инструментах для тех, кто сегодня имеет дело с рассылками.
Допустим, вы хотите сверстать рассылку
Первый вариант: создать новый HTML-документ, взять готовый бойлерплейт (например, популярные Cerberus или Responsive Email Framework) и засесть писать таблицы с инлайн-стилями, гугля в процессе недостающие хаки или фиксы для внезапно поехавшей в каком-нибудь Gmail для Android вёрстке. Этот вариант подойдет, если у вас за плечами есть определённый опыт в вёрстке писем, достаточно свободного времени, а задача — это вёрстка единичного и простого письма.
Пример шаблона письма, который «из коробки» доступен в Cerberus
Второй вариант: воспользоваться онлайн-редактором для создания шаблона (например, Mosaico или Stripo). Это — самый простой способ. Он отлично подойдет, если вы — не разработчик или же если сталкиваетесь с вёрсткой рассылки впервые и макет письма достаточно простой. Почти все онлайн-редакторы предоставляют готовые шаблоны, а также включают в исходный код шаблона хаки для корректной работы письма в популярных email-клиентах. Но эти инструменты практически не позволяют вам кастомизировать вёрстку письма под ваш конкретный макет и в целом дают очень слабый контроль как кода, так и внешнего вида письма.
Изменения шаблона письма в конструкторе писем Stripo
Третий вариант: использовать email-фреймворк. Если вам регулярно приходится верстать рассылку, если макеты писем сложные, а требования к ним строгие, и если вы хотите автоматизировать свой воркфлоу и частично процесс разработки письма, то этот вариант для вас. Я расскажу о двух самых мощных инструментах: MJML и Foundation for Emails (в молодости известном как Ink).
Используем готовый email-фреймворк. MJML
Главные идеи, заложенные во фреймворк:
Вместо сложных конструкций из HTML-таблиц разного уровня вложенности достаточно написать буквально несколько строк, которые при билде проекта будут транспилированы в валидный, «приправленный» всеми необходимыми хаками HTML-код письма.
MJML предоставляет плагины для популярных текстовых редакторов — Visual Studio Code, Atom и Sublime Text. Они добавляют подсветку синтаксиса языка, линтер и вкладку с превью верстаемого письма прямо в самом редакторе.
Если вам не хочется заморачиваться с cli или текстовыми редакторами, то есть отдельное официальное мультиплатформенное десктопное приложение, со встроенным полноценным редактором кода, просмотрщиком готовых шаблонов для писем и live-preview вашего письма.
Помимо набора стандартных компонентов (таких как кнопка или карусель) существуют готовые кастомные компоненты (например, компонент для рисования графиков). На странице с дополнениями от сообщества можно найти полезные утилиты, например загрузчик MJML для WebPack или инструмент интеграции в MJML-приложение на Laravel. А не так давно в статусе беты появилась возможность использовать API MJML для генерации писем напрямую, например, внутри мобильного приложения. Вещь довольно специфическая, но своего пользователя наверняка найдёт.
Главным минусом фреймворка одновременно является один из его плюсов: «отзывчивость». Фреймворк автоматически и без вмешательства разработчика берёт на себя то, как шаблон письма будет вести себя на девайсах с небольшой шириной размера экрана. Это выливается в ограничение в четыре колонки в сетке и отсутствие возможностей подтюнить responsive-поведение макета под свои нужды.
Небольшая, но приятная деталь: на сайте в разделе с документацией есть раздел с СanIUse-подобным описанием поддерживаемости компонентов MJML в различных имейл-клиентах. Можно сразу проверить на сайте и не гадать, как поведёт себя письмо, например, в Outlook 2007.
Итог: MJML — очень мощный и простой в освоении инструмент для создания responsive-писем. Сложности могут возникнуть, только если вам нужна очень тонкая, pixel perfect настройка шаблонов.
Используем готовый имейл-фреймворк. Foundation for Emails
Если вы не первый год в мире фронтенда, то наверняка слышали (но — готов поспорить — вряд ли исползовали ;)) о Foundation for Sites. Этот фреймворк, созданный разработчиками из компании ZURB, давно закрепил за собой статус второго место по популярности (после Bootstrap) среди фронтендных веб-фреймворков.
Foundation for Emails сделан теми же людьми и по сути является частью Foundation for Sites. Это дает ему как ряд преимуществ (крупная компания-разработчик, довольно большое комьюнити, все, что вам нравилось в Foundation for Sites), так и накладывает ряд ограничений (все, что вам не нравилось в Foundation for Sites, не понравится и в Foundation for Emails).
Первое, что нужно сделать, если вы решите попробовать фреймворк, это установить Foundation CLI:
После чего можно создать новый проект командой:
и приступать к разработке письма.
Правда, придётся подождать несколько минут, пока загрузятся все необходимые модули и компоненты. Так как скачивается большое количество файлов, не удивляйтесь размеру папки — пустой проект будет весить 400+ мб. Помимо cli, «из коробки» доступен Live Reload, базовый бойлерплейт со всеми необходимыми хаками, готовые шаблоны и партиалы, а также поддержка SASS.
Файловая структура проекта на Foundation for Emails
У FfE свой шаблонизатор — Inky. По свой сути он делает то же, что и шаблонизатор MJML — упрощает работу со сложными вложенными таблицами с помощью shorthand-тегов:
Всего тегов около десяти, три их них используются для создания сетки (см. пример выше), тег block-grid — для создания блочной сетки, еще два тега — меню (menu и item), а названия еще двух говорят сами за себя: button и callout.
FfE использует 12-колоночную сетку, которая может быть упрощена до 2-х, 3-х, 4-х или 6-ти колоночной, а также позволяет задавать количество колонок отдельно для мобильного и десктопного состояний.
Система партиалов (partials) и хелперов реализована с помощью файлового компилятора Panini, который внутри себя использует простой и удобный движок шаблонизатора Handlebars.
Итог: Foundation for Emails предоставляет полный контроль за вёрсткой письма как для его десктопного, так и мобильного её состояния. Сложности могут возникнуть в процессе погружения в фреймворк и при попытке разобраться с его тонкостями, так как он достаточно большой и сложный. Но если вы хотите контролировать каждый аспект вашего шаблона — ваш выбор Foundation for Emails.
Инструменты для тестирования рассылки
Итак, наша рассылка готова. В браузере она выглядит отлично. А как насчет Outlook и мобильных email-клиентов? Самое время обратиться к специализированным сервисам для тестирования рассылки: Litmus и Email on Acid.
Тестируем рассылку с Litmus
Litmus предоставляет полный набор инструментов, которые могут понадобиться при тестировании рассылки. Это и веб-ide для редактирования html-кода (Builder), и система аналитики рассылки, и набор «чеклистов» — инструментов тестирования производительности, проверки письма на «спамность» и многое другое.
Самый важный «чеклист» — Email Preview — дает возможность проверить письмо в 90+ десктопных/мобильных/веб email-клиентах. Делается это парой кликов. Нужно вставить код письма в Builder, нажать на кнопку тестирования и выбрать нужные email-клиенты.
Недавно разработчики добавили крутую фичу: инспектор обработанного email-клиентом html-кода (processed html). Он немного напоминает инспектор из dev-tools вашего любимого браузера: можно выделить определенную область письма и посмотреть её код. Это очень помогает разбирать клиентоспецифичные проблемы не прибегая к правкам в слепую с последующим просмотром результата в Email Preview.
Просмотр Processed HTML в Litmus
У Litmus я нашел два минуса. Первый — это неотзывчивость UI в целом и лаги Email Preview, которые происходят время от времени и заставляют тратить достаточно много времени на ожидание создания превью и повторно запускать тесты.
Второй минус: цена. Самый минимальный вариант подписки обойдётся вам в 80$/месяц. Причем выбранный план напрямую влияет на количество предпросмотров писем, которое будет доступно. Так что советую хорошенько подумать действительно ли вам нужен Litmus или вы сможете обойтись более дешевой альтернативой.
Тестируем рассылку с Email On Acid
Второй сервис, о котором я хотел бы рассказать, это Email On Acid. Его можно смело назвать «младшим братом» Litmus практически по всем аспектам.
Судите сами: web-ide для редактирования рассылки — есть, инструменты для аналитики письма — есть, тестирование на «спамность» — есть, и — конечно же — Email Testing в 70+ приложениях тоже есть.
Превью писем сделано практически так же, как в Litmus. Отличия в основном во внешнем виде, опций/настроек чуть поменьше, нет инспектора обработанного кода письма и некоторых других менее полезных инструментов. Но UI EoA удобнее и легче, чем у Litmus и работает практически без лагов. Тестирование писем происходит примерно раза в полтора быстрее.
Последний немаловажный фактор: цена. Email on Acid в два раза дешевле Litmus при очень схожем функционале. И нет никаких ограничений на количество превью вашего письма. Это несомненный вин EoA.
Что выбрать?
Инструменты, о которых написано выше, стоят немалых денег. На мой взгляд, использовать их на постоянной основе имеет смысл только если вы стабильно, хотя бы несколько раз вмесяц, верстаете достаточно сложные письма и если у вас жесткие требования по их поддержке в различных email-клиентах, особенно в мобильных.
Если же рассылками вы занимаетесь эпизодически, то есть два альтернативных варианта:
Вот какие сервисы можно хоть и ограниченно, но использовать бесплатно:
Что бы вы не выбрали в конечном счете, главное, чтобы инструмент соответствовал вашим потребностям.
Заключение
Сфера инструментов для верстальщика рассылки достигла сейчас того уровня развития, когда мы можем не просто пользоваться удобными фреймворками для разработки писем и приложениями для их тестирования, но и выбирать подходящие из них под наши задачи и возможности.
Если вы верстаете письма редко и они в целом несложные — смело берите базовый бойлерплейт, верстайте и тестируйте «вручную». Как вариант, воспользуйтесь бесплатными сервисами для тестирования.
Если же с вёрсткой писем приходится сталкивать на регулярной основе, а макеты попадаются сложные и адаптивные, то MJML и Foundation for Email возьмут часть забот на себя. А Limus и Email on Acid сэкономят массу времени и нервных клеток в попытке победить какой-нибудь надоедливый Outlook или Gmail на Android.
А какой путь выбираете вы? Делитесь в комментариях.
5 полезных и бесплатных сервисов для email-маркетологов
На этот раз я хочу поделиться с вами полезными и удобными бесплатными сервисами, которые помогут вам создать и разослать эффектную маркетинговую рассылку. Как создать валидное email-письмо? Как узнать примерную вероятность попадания письма в спам? Добро пожаловать под кат!
SpamCheck от ребят из PostMark.
Сервис позволяет проверить письмо на спам-признаки и определить примерную вероятность попадания письма в спам-фильтры SpamAssasin. Крайне рекомендую проверять все свои письма с помощью этого сервиса — это поможет избежать потенциальных проблем из-за неграмотно составленных электронных писем:
Кроме обычной отправки сообщения через форму, сервис обладает API, что позволяет интегрировать его в свои проекты (мы в MailHandler, например, его активно используем). Сервис на данный момент абсолютно бесплатен.
PutsMail от Litmus
Ребята из Litmus купили небольшой стартап PutsMail и развили его в бесплатный сервис для тестирования email-писем. Он позволяет протестировать отображение вашего письма, отправив его на ваш email. Заодно он инлайнит CSS.
Blacklists Checker от MXToolBox
Этот простенький с первого взгляда сервис позволяет протестировать наличие того или иного IP-адреса (или домена) в большинстве спам-фильтров. Всего их 105: Sorbs, Barracuda и др.
Postmaster от Mail.ru
Один из незаменимых инструментов для email-маркетолога, если в ваших базах много пользователей Mail.ru. Позволяет отслеживать статистику попадания ваших писем в спам, количество жалоб пользователей и другие показатели. Для использования необходимо подтвердить права на домен (с помощью DNS, мета-тега или html-странички). Так же для корректного отображения писем в каждое письмо нужно будет добавить специальный заголовок с идентификатором письма.
Premailer от Dialect
Сервис позволяет подготовить ваше email-письмо для отправки — почистить ненужный мусор (типа неиспользуемых ID и классов), заинлайнить стили.
Bonus-track: email blueprints от MailChimp
Ну и куда же без гиганта MailChimp. Ребята подготовили несколько красивых, адаптивных и валидных HTML шаблонов, которые вы можете кастомизировать под свои нужды.
Надеюсь, вам пригодятся эти сервисы, до связи!
Как правильно верстать письма: рекомендации и требования для верстальщика
В предыдущей статье мы писали о визуальном стиле рассылок и давали рекомендации для дизайнеров. Если дизайн письма готов, то теперь нужно подготовить его к вёрстке.
Наш чек-лист позволит сделать читаемое, аккуратное и красивое письмо, которое отобразится на любой платформе, в любом почтовике и устройстве так, как вы это задумали.
Письма плохо отображаются в разных почтовиках.
Письма неадаптивны и плохо отображаются на мобильных устройствах.
С письмом трудно взаимодействовать и неудобно читать.
Письмо не увлекает, не вовлекает.
Некоторые блоки письма не отобразились, часть письма исчезла.
Письмо в почте выглядит не так, как было свёрстано и нарисовано в макете.
Письмо скучное. В отличие от веба, его труднее сделать динамичным, привлекательным, нужно знать инструменты и уметь их применять.
Не получается сверстать то, что задумали.
Непонятно, как сделать интерактив в письме.
Письмо разваливается на десктопных почтовиках вроде Outlook.
Письма попадают в спам (такое может быть из-за вёрстки и ссылок).
Письма долго грузятся.
Чтобы ваши письма корректно отображались в большинстве почтовиков, устройств, а сервисы рассылок не сломали их — следуйте советам по HTML и CSS кода.
Обратите внимание на DOCTYPE. Для писем самым безопасным доктайпом является:
Используйте табличный подход к вёрстке. Иначе письма будут плестись в хвосте в плане технологии вёрстки.
Избегайте сокращений CSS.
● Вместо сокращённого правила для стиля — несколько CSS-стилей. Например, вместо
● Не задавайте цвет, используя краткие формулировки вроде RED или #FFF. Всегда используйте полное шестнадцатеричное представление, например, #bb0000.
● Не используйте сокращённые варианты записи шрифта, характерные для CSS (то есть «font: 12px arial;»). Семейство шрифта, размер, цвет и высота строки должны задаваться по отдельности.
Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.
Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER у table (кроме «0»), так как не все почтовые клиенты корректно интерпретируют другие значения.
Не задавайте line-height в em или процентах. Используйте только пиксели, тогда во всех почтовиках и устройствах письма будут выглядеть так, как вы задумали.
Оформление текста производите сразу двумя тегами — FONT и SPAN. Для родительской ячейки указать LINE-HEIGHT (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook игнорирует параметр LINE-HEIGHT, указанный у ячейки, поэтому следует указать его также и у SPAN.
Используйте тег
для вставки разрывов между блоками текста вручную. Однако будьте предельно осторожны, некоторые почтовые клиенты (например, Outlook 2007 и клиент iPhone) отображают размер межстрочных промежутков и шрифтов крупнее, чем принято, — и могут перенести текст на новую строку раньше запланированного вами разрыва.
Будьте внимательны при использовании CSS3. Здесь нет чётких правил. Какие-то стили поддерживаются полностью, какие-то частично. Всё зависит от того, какими почтовиками и устройствами пользуются ваши подписчики. Если используете CSS3 в вёрстке писем — тщательно тестируйте. Поддержка тех или иных стилей почтовиками и устройствами постоянно меняется, ориентируйтесь на инструкции в интернете.
Используйте текст предварительного заголовка. Почти все веб-интерфейсы выводят рядом с темой письма прехедер. Примерная структура:
Прехедер показывается на многих почтовых клиентах в качестве предпросмотра письма и важен так же, как тема сообщения. Всегда добавляйте его, так как это мотивирует подписчика открыть полученное письмо. Многие почтовые клиенты обрезают тему письма, если она слишком длинная, а прехедер помогает лучше отразить суть.
5 полезных и бесплатных сервисов для email-маркетологов
SpamCheck от ребят из PostMark.
Кроме обычной отправки сообщения через форму, сервис обладает API, что позволяет интегрировать его в свои проекты (мы в MailHandler, например, его активно используем). Сервис на данный момент абсолютно бесплатен.
PutsMail от Litmus
Ребята из Litmus купили небольшой стартап PutsMail и развили его в бесплатный сервис для тестирования email-писем. Он позволяет протестировать отображение вашего письма, отправив его на ваш email. Заодно он инлайнит CSS.
Blacklists Checker от MXToolBox
Этот простенький с первого взгляда сервис позволяет протестировать наличие того или иного IP-адреса (или домена) в большинстве спам-фильтров. Всего их 105: Sorbs, Barracuda и др.
Postmaster от Mail.ru
Один из незаменимых инструментов для email-маркетолога, если в ваших базах много пользователей Mail.ru. Позволяет отслеживать статистику попадания ваших писем в спам, количество жалоб пользователей и другие показатели. Для использования необходимо подтвердить права на домен (с помощью DNS, мета-тега или html-странички). Так же для корректного отображения писем в каждое письмо нужно будет добавить специальный заголовок с идентификатором письма.
Premailer от Dialect
Bonus-track: email blueprints от MailChimp
Ну и куда же без гиганта MailChimp. Ребята подготовили несколько красивых, адаптивных и валидных HTML шаблонов, которые вы можете кастомизировать под свои нужды.
Надеюсь, вам пригодятся эти сервисы, до связи!
Terms of Service
LAST UPDATED: MARCH 17, 2021.
Thank you for choosing to use our Services.
These Terms of Service govern Customer’s unpaid use of the Service and by checking the box that you “Agree,” or by otherwise accessing and using the Services, Customer represents that: (a) Customer has read, understands and agrees to be bound by these Terms of Service; (b) Customer is of legal age to form a binding contract with Litmus; and (c) Customer has the authority to enter into this agreement personally or on behalf of the company or other legal entity Customer has identified or for which Customer is using the Services, and to bind that entity to these Terms of Service.
Litmus may make changes to these Terms of Service from time to time. The most current version of these Terms of Service will be posted on the Website. Any changes to these Terms of Service will be effective immediately for any new Customer and in instances where such changes are required in order to comply with applicable law. For any other Customer, changes to these Terms of Service will be effective as of ten (10) days after posting notice of such changes via the Website. Litmus may require Customer to provide consent to the updated Terms of Service in a manner specified by Litmus before further use of the Services is permitted. Customer is responsible for regularly reviewing the Website to obtain timely notice of such amendments. If Customer does not agree to any change(s), Customer may notify Litmus in writing of any objection, and Customer’s sole remedy is to cease using the Services.
THIS AGREEMENT IS SUBJECT TO ARBITRATION PURSUANT TO SECTION 8.9 (DISPUTES; ARBITRATION) BELOW.
All capitalized terms not defined in this Section shall have the meanings set forth in the Sections of this agreement in which they are defined.
1.1. “ Content ” means text, images, documents, materials, photos, audio, video, and all other forms of data or communication.
1.2. “ Customer ” means the customer accepting these Terms of Service. If an individual signs up for, or accesses or uses the Services on behalf of a company or other legal entity, that individual represents and warrants that they have the authority to bind such entity to these Terms of Service, and the term “Customer” herein shall include both the individual User and such entity.
1.3. “ Customer Content ” means all Content made available or provided by or on behalf of Customer to Litmus, or generated and collected by Litmus on behalf of Customer, in connection with the provision of the Services.
1.4. “ Documentation ” means the documentation for the Services generally made available by Litmus from time to time to assist its customers in the use of the Services.
1.5. “ Feedback ” means any comments, reports or other correspondence provided by Customer, in any form or format, about any errors, problems, or defects in, or suggestions for changes or improvements to, the Website or Services.
1.6. “ Litmus ” means Litmus Software, Inc., a Delaware corporation, located at 675 Massachusetts Ave., 10th Floor, Cambridge, MA 02139, U.S.A.
1.7. “ Litmus Content ” means all Content made available by Litmus to Customer in connection with Customer’s use of the Services (excluding Customer Content).
1.8. “ Party ” means either Litmus or Customer, as applicable, and “ Parties ” collectively means Litmus and Customer.
1.9. “ Services ” means the proprietary email testing Software-as-a-Service (SaaS) solution made available by Litmus to Customer pursuant to these Terms of Service.
1.10. “ User ” means an individual eighteen years of age or older who has been supplied a unique username and password and is authorized by Customer to access and use the Services on Customer’s behalf. Unless otherwise agreed by the Parties in writing, a User shall consist of an individual who is a Customer, or an employee or individual independent contractor of Customer where such Customer is a company or other legal entity.
1.11. “ Volume Limitations ” means the number of email tests Customer is permitted to perform using the Services, the number of email addresses to which Customer is permitted to send, and other metrics specific to the Services, as specified by Litmus from time to time.
4. LIMITATION OF LIABILITY
5. TERM; TERMINATION
6. OWNERSHIP; USE OF CONTENT; OBLIGATIONS; RESTRICTED USE
Customer will defend Litmus, its affiliates, and their officers, directors, employees and agents (collectively, the » Litmus Indemnitees «) against any claim, demand, suit or proceeding made or brought against any or all of the Litmus Indemnitees by a third party: (a) alleging that the Customer Content, or any use thereof, infringes the intellectual property rights or proprietary rights of others, or has caused harm to a third party; or (b) arising out of Customer’s breach of these Terms of Service (a » Claim Against Litmus «), and will indemnify the Litmus Indemnitees from any damages, reasonable attorney fees and costs incurred by Litmus Indemnitees as a result of, or for any amounts paid under a settlement of, a Claim Against Litmus.