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

Их читают миллионы людей по всему миру. Их добавляют в спам, удаляют навсегда, но без них немыслим современный интернет. Многие фронтендеры пойдут на всё, что угодно, лишь бы отвертеться от работы над ними. Мой рассказ — об электронных письмах, о том, как они изменились за 20 лет и о том, как современному фронтендеру не впасть в депрессию, верстая их. Это первая статья из цикла, в которой я расскажу о том, как всё начиналось. Через пару недель поговорим о инструментах разработки и тестирования рассылки.

У разработчика, который впервые столкнулся с генерированием электронных писем, практически нет шансов написать приложение, которое будет делать это корректно. Около 40 % писем, генерируемых корпоративными приложениями, имеют те или иные нарушения стандартов, и, как следствие, проблемы с доставкой и отображением. На это есть причины: электронная почта технически гораздо сложнее, чем веб, работа почты регулируется несколькими сотнями стандартов и несчетным количеством общепринятых (и не очень) практик, а почтовые клиенты отличаются разнообразием и непредсказуемостью. Тестирование может заметно улучшить ситуацию, но материалов, посвященных тестированию почты, практически нет.

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

• Какие бывают электронные письма
• Кто участвует в процессе тестирования и контроля
• Почтовое сообщение и почтовый транспорт
• Интерфейс почтовой инфраструктуры и границы тестируемого приложения
• Определение тестируемых параметров
• Типичная структура генерирующего приложения
• Что и когда тестировать
  
  1. Инфраструктура доставки
  2. Генерирующее приложение
  3. Структурный и вёрсточный шаблоны письма
• Базовые требования при проверке инфраструктуры
• Требования к авторизации
• Проверка генерирующего приложения
  
  • Требования к почтовым адресам
  • Требования к заголовкам писем
  • Требования к структуре письма
  • Требования к URI
  • Требования к вёрстке письма
• Проведение сплит-тестов

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

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

Нас смущали три момента:

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

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

Итак, стало понятно, что механику смены пароля пора изменить.

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

Я пишу письмо, а мне не отвечают. Я пишу ещё одно, а в ответ молчание. Наконец, я пишу третье с текстом вроде «Чувак, а ты ещё заинтересован в нашем сотрудничестве?». Тут получаю ответ: «Жду не дождусь когда начнём работать, шли презентацию». Я стараюсь строить свою переписку по определённым принципам, чтобы сдвигать общение с мёртвой точки. В статье поделюсь некоторыми своими наработками, расскажу как задолбать молчунов полюбить милашек-адресатов, а они ответили взаимностью.

Давно хостился на одном ресурсе, у которого была услуга «списки рассылки». Для тех, кто не в курсе – загружаешь список адресов (списки сформированы легально, никакого спама, Double Opt-in) и формируешь письмо, сервис автоматически рассылает письмо по всем адресатам. Собственно всё устраивало, кроме одного – статистики. Хотелось знать, сколько доставлено, сколько прочитано и т.д. и т.п.

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

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

Считаете ли вы, что содержимое письма электронной почты нельзя изменить после доставки? Если вас интересует вопрос информационной безопасности, вам следует узнать о методе атаки, который исследователи из Mimecast назвали ROPEMAKER.

Акроним ROPEMAKER расшифровывается как «Remotely Originated Post-delivery Email
Manipulation Attacks Keeping Email Risky». В действительности ROPEMAKER — это тип хакерской атаки через электронную почту, обнаруженный Франциско Рибейро (@blackthorne) из Mimecast. Этот эксплойт может дать злоумышленнику возможность удаленно изменять контент письма электронной почты в любое время после доставки. Является ли ROPEMAKER уязвимостью, которую необходимо исправить, чтобы защитить обычных пользователей? Мы надеемся, что эта статья поможет ответить на этот вопрос.

Введение

Всем привет! Не так давно мне поступила задача встроить визуальный редактор email в наш сервис внутренней рассылки, ибо людям надоело набирать html руками и компоновать валидные шаблоны для писем. Побродив по интернету, я нашёл 2 редактора, которые, как мне тогда казалось, прекрасно подойдут для этих целей. Ссылки на них приведу в конце топика. Изучив их более внимательно (EmailEditor написан с использованием jQuery, который я в своё время неплохо изучил, а Mosaico был на KnockoutJS, с ним я знаком лишь поверхностно), я остановился на EmailEditor, и снова окунулся в то дерьмо из которого год назад так успешно выбрался с помощью Angular и Ionic, а именно — файлы по 2-3к строк, повсеместное и рандомное изменение DOM различными способами из различных мест и т.д., ну вы меня понимаете).

Потратив больше месяца на попытки пофиксить все баги, запилить нужные нам для рассылки строительные блоки и прочее, я сдался… Решил попробовать Mosaico и даже начал активно изучать Knockout, но проблема в том, что этот монстр (я про Mosaico) был настолько сложно написан, что EmailEditor показался не таким уж и плохим. Плюс ко всему, а точнее минус, у Mosaico практически нет вменяемой документации и если в первом я интуитивно понимал как всё работает и как создать свои блоки, то тут никакая интуиция мне не помогла. Возможно, просто не хватило мозга, терпения и желания разбираться, не знаю, просто гляньте на досуге исходники этих редакторов… А сроки поджимали...

Что же делать?!

Предыстория

Уже много лет мы помогаем нашим клиентам отправлять потребителям хорошие, информативные и человеческие письма. В них вместо сухого “Добрый день” мы пишем “Здравствуйте, Никита!”, а вместо “Ваш баланс пополнился” сообщаем “вы получили 25 баллов”. Но маркетологи становятся все изобретательнее, и современное письмо от интернет-магазина должно выглядеть так:

И мы хотим уметь генерировать такие письма автоматически.

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

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

Введение

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

Основные нюансы при формировании таких писем:

• Все стили должны встраиваться (inline) в виде атрибута style для конкретного HTML-элемента.
• Все изображения должны встраиваться, либо как отдельные вложения в в письме, либо в виде base64-кодированных данных (второе банально удобнее).
• Письмо должно поддерживать DKIM (настройка мэйлера), а домен отправителя — содержать SPF-запись.

История email началась еще в 1972 году, когда Рэй Томлинсон (Ray Tomlinson) предложил использовать символ «@» (at-sign) для обозначения сообщений, которые нужно передать с одного компьютера на другой.

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

Но в последнее время всё чаще появляется информация о том, что дни email сочтены. В своем исследовании специалисты компании Radicati выявили тенденцию к снижению количества отправляемых личных писем. Связано это в первую очередь с распространением социальных сетей и появлением мессенджеров, которые также называют «убийцами» email.

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

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

1. Транзакционные. Нужны для отправки писем о событиях, транзакциях, уведомлений о заказе, регистрационных данных и т.д.;
   
   
2. Маркетинговые. Нужны при осуществлении новостной рассылки, проведении акций, обновлениях в блоге и т.д.;
   
   
3. Хостинг почты. Нужен для получения и отправки электронных писем (потребуется, если вы пользуетесь виртуальными серверами, например, DigitalOcean, Linode и т.п.).

Электронная почта — отличный инструмент коммуникации, который позволяет компаниям доставлять контент удобным для аудитории способом. Многие пользователи предпочитают получать HTML-письма, и это неудивительно. Однако создание таких писем оказывается не всегда простой задачей для дизайнеров, поскольку нужно добиваться адекватного представления контента в различных почтовых клиентах. Дело в том, что стандарта верстки писем, который бы поддерживался всеми почтовыми приложениями одновременно, пока не существует.

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



Фото Johan Larsson / Flickr / CC

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

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

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

Интерактивные вкладки, hover-эффект и пагинация – мы изучили основные тенденции в разработке интерактивных электронных писем.

Электронная почта – это революция в мире коммуникации и, в то же время, тяжкое бремя современных работников. Фото: агенство Getty Images

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

5 марта 2016 года ушел из жизни Рэй Томлинсон, человек, который предложил использовать символ «@» (at-sign) в электронных адресах, но его изобретение, позволяющее электронным сообщениям заполонить интернет и наши почтовые ящики, будет жить. В этом материале мы расскажем о том, с чего начинал Томлинсон, и об эволюции электронной почты за последние полвека.

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

В нашем блоге мы много пишем о создании email-рассылок и работе с электронной почтой. В современном мире люди получают множество писем, а у некоторых даже есть несколько почтовых ящиков. Все это усложняет процесс их администрирования, что вынуждает искать пути решения проблемы. Не так давно мы рассказывали о том, как инженер из США упорядочивал свои письма с помощью нейронной сети (1, 2), а сегодня речь пойдет об автоматизации отправки писем для разных почтовых ящиков.

Редактор издания Motherboard Майкл Берн (Michael Byrne) написал материал о том, как отправлять электронные письма для различных почтовых ящиков с помощью Python. Мы представляем вашему вниманию адаптированный перевод этой заметки.