Как стать автором
Обновить
3.25

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

Все, что сложнее plain text

Сначала показывать
Порог рейтинга
Уровень сложности

Подборка: 40+ полезных инструментов, ресурсов и исследований о работе с email

Время на прочтение3 мин
Количество просмотров13K


В нашем блоге на Хабре мы часто пишем о создании почтовых рассылок — верстке HTML и CSS, работе с plain-text сообщениями и описываем интересные эксперименты. Сегодня мы представляем вашему вниманию подборку полезных ресурсов, туториалов и исследований на английском и русском языках, посвященных работе с email.
Читать дальше →
Всего голосов 10: ↑8 и ↓2+6
Комментарии2

Email-рассылка со своего сервера: подводные камни

Время на прочтение3 мин
Количество просмотров43K
Недавно мы по ряду причин решили отказаться от стороннего сервиса для email-рассылок и осуществлять рассылки со своего сервера. Я бы хотел указать на ряд трудностей, с которыми мы столкнулись в процессе, и пути их решения. Непосредственно тему верстки эта статья практически не затрагивает, но более подходящего хаба я не нашел.

Конечно, если вы давно в теме, подобные советы могут показаться банальными и очевидными, но некий свод хитростей и подсказок будет полезен начинающим рассыльщикам.
Читать дальше →
Всего голосов 27: ↑20 и ↓7+13
Комментарии30

Подборка: 115 полезных почтовых рассылок о технологиях, на которые стоит подписаться

Время на прочтение6 мин
Количество просмотров39K


В нашем блоге мы много пишем о создании почтовых рассылок — их верстке, дизайне и интересных статистических фактах. К сожалению, до сих пор многие пользователи сети рассматривают рассылки, как нечто плохое — инструмент, который маркетологи используют для того, чтобы «впарить» людям то, что они не просили, и что вообще им не нужно. На самом же деле email-рассылки — это мощный информационный канал, который может быть исключительно полезным и с профессиональной точки зрения. В доказательство этого факта сегодня мы представляем вашему вниманию подборку из 115 полезных почтовых рассылок о самых разных технологиях.
Читать дальше →
Всего голосов 23: ↑18 и ↓5+13
Комментарии4

Вёрстка писем: 60 полезных ресурсов, руководств и исследований

Время на прочтение3 мин
Количество просмотров112K


В нашем блоге на Хабре мы часто пишем о создании почтовых рассылок — верстке HTML и CSS, работе с plain-text сообщениями и описываем интересные эксперименты. Сегодня мы представляем вашему вниманию список из 60 полезных ресурсов, туториалов и исследований о работе с email.
Читать дальше →
Всего голосов 18: ↑16 и ↓2+14
Комментарии4

Зачем нужны plain-text письма, и как их нужно делать: 6 советов

Время на прочтение6 мин
Количество просмотров53K


В последние годы маркетологи многих компаний пристрастились к использованию HTML при создании своих почтовых рассылок. При этом многие специалисты забывают, что простые текстовые письма иногда могут работать даже лучше красиво сверстанных шаблонов. Сегодня мы поговорим о плюсах использования plain-text писем, а также рассмотрим несколько советов экспертов, которые помогут избежать ошибок при работе с этим инструментом.
Читать дальше →
Всего голосов 35: ↑29 и ↓6+23
Комментарии16

Пиратские метрики: как создать email-кампанию по принципу AARRR. Часть 5

Время на прочтение9 мин
Количество просмотров5.9K


В блоге Печкина на Хабре мы много пишем об интересных техниках работы с email-рассылками. Ранее мы рассматривали распространенные ошибки при создании форм в почтовых письмах, а сегодня представляем вашему вниманию адаптированный перевод заметки команды сервиса Sendwithus о том, какие подходы к разработке писем помогают повышать их конверсию. Первую часть материала можно прочитать здесь, вторую — здесь, третью — здесь, а четвертую — здесь.
Читать дальше →
Всего голосов 16: ↑13 и ↓3+10
Комментарии0

Пиратские метрики: как создать email-кампанию по принципу AARRR. Часть 4

Время на прочтение5 мин
Количество просмотров2.7K


В блоге Печкина на Хабре мы много пишем об интересных техниках работы с email-рассылками. Ранее мы рассматривали распространенные ошибки при создании форм в почтовых письмах, а сегодня представляем вашему вниманию адаптированный перевод заметки команды сервиса Sendwithus о том, какие подходы к разработке писем помогают повышать их конверсию. Первую часть материала можно прочитать здесь, вторую — здесь, а третью — здесь.
Читать дальше →
Всего голосов 6: ↑5 и ↓1+4
Комментарии1

Пиратские метрики: как создать email-кампанию по принципу AARRR. Часть 3

Время на прочтение13 мин
Количество просмотров6.2K


В блоге Печкина на Хабре мы много пишем об интересных техниках работы с email-рассылками. Ранее мы рассматривали распространенные ошибки при создании форм в почтовых письмах, а сегодня представляем вашему вниманию адаптированный перевод заметки команды сервиса Sendwithus о том, какие подходы к разработке писем помогают повышать их конверсию. Первую часть материала можно прочитать здесь, а вторую — здесь.
Читать дальше →
Всего голосов 12: ↑10 и ↓2+8
Комментарии0

Пиратские метрики: как создать email-кампанию по принципу AARRR. Часть 2

Время на прочтение9 мин
Количество просмотров5.9K


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

Введение


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

Что же такое активация?

Активация происходит, когда пользователи в полной мере понимают ценность вашего продукта. Так же как этап привлечения, этап активация не происходит мгновенно. Один только факт, что вы получили чей-то адрес электронной почты, не означает, что этот пользователь «активирован». Даже если пользователь сразу же начинает использовать ваш продукт и извлекать для себя выгоду, ему по-прежнему может понадобиться поддержка для совершения следующего шага.
Читать дальше →
Всего голосов 12: ↑9 и ↓3+6
Комментарии0

Пиратские метрики: как создать email-кампанию по принципу AARRR от Дейва МакКлюра. Часть 1

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



Введение


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

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

Номера телефонов в почтовых клиентах

Время на прочтение3 мин
Количество просмотров29K
Казалось бы простая задача: вывод номера телефона в письме. Что может быть сложного? Классика. Никто не может прийти к единому стандарту.



Вопрос дня:


Использовать нативность, чудить или достучаться до разработчиков? Я не дам на него ответ, ибо сам нахожусь в замешательстве.

Возьмем номер:

8 (800) 888-88-88


И будем извращаться
Читать дальше →
Всего голосов 19: ↑16 и ↓3+13
Комментарии19

Эксперимент: Стоит ли использовать формы в email

Время на прочтение5 мин
Количество просмотров13K


В блоге Печкина на Хабре мы много пишем об интересных техниках работы с email-рассылками. Ранее мы рассматривали распространенные ошибки при создании форм в почтовых письмах, а сегодня представляем вашему внимани адаптированный перевод заметки итальянского дизайнера Массимо Кассандро, который решил выяснить, стоит ли вообще применять этот инструмент в верстке email-cообщений.
Читать дальше →
Всего голосов 22: ↑16 и ↓6+10
Комментарии5

Адаптивные email-письма и media queries: Проблемы и решения

Время на прочтение8 мин
Количество просмотров25K


В нашем блоге мы неоднократно затрагивали тему создания адаптивных почтовых рассылок. В наши дни почти половина всех писем просматривается со смартфонов и планшетов, а значит, необходимо позаботиться о том, чтобы письмо хорошо выглядело на устройствах с разным форм-фактором. Именно для этого в вёрстке и начали использовать медиазапросов (media queries). Однако существует целый ряд препятствий для широкого применения технологии. Сегодня мы по-дробнее взглянем на проблемы при использовании media queries и их возможные решения.
Читать дальше →
Всего голосов 20: ↑18 и ↓2+16
Комментарии1

Ближайшие события

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
11 сентября
Митап по BigData от Честного ЗНАКа
Санкт-ПетербургОнлайн
19 сентября
CDI Conf 2024
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
28 – 29 сентября
Конференция E-CODE
МоскваОнлайн
28 сентября – 5 октября
О! Хакатон
Онлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн

Перевод. Я оставил свои системные шрифты в Сан Франциско

Время на прочтение3 мин
Количество просмотров27K
Свет увидели и новая версия iOS 9, и OS X 10.11 El Capitan, и даже watchOS 2. И всех их объединяет новый шрифт — San Francisco. И как молодого веб разработчика, меня заинтересовала возможность использовать данный шрифт для веб сайтов. Так родился этот перевод статьи «I Left My System Fonts In San Francisco».

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

Что ж, скоро мы все будем сталкиваться с контентом, отображаемым в San Francisco, и нам понадобится как-то указать этот самый шрифт в нашем CSS.

По традиции мы можем попробовать указать шрифт San Francisco явно, что-нибудь в этом стиле:

body {
  font-family: "San Francisco", "Helvetica Neue", "Lucida Grande";
}

К сожалению, в свежеустановленной OS X 10.11 (El Capitan) нет этого шрифта.



Но как это возможно, ведь это же системный шрифт?
Узнать всё, что скрыто
Всего голосов 29: ↑23 и ↓6+17
Комментарии32

How-to: Процесс создания верстки html-писем

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



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

По моему опыту, особенно важно это при создании HTML почтовых писем. Email требует выполнения большого количества повторяющихся задача, которые сами по себе не так уж сложны, но затрагивают огромное количество разных элементов, что может приводить к ошибкам. Вот, как я стараюсь этого избежать.
Читать дальше →
Всего голосов 15: ↑13 и ↓2+11
Комментарии6

Как создать слайдер изображений в почтовом сообщении

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



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

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

Слайдер будет рассчитан только на одну ссылку, что хорошо подойдет в случае описания продукта с разных ракурсов (или, как в нашем случае, номера в отеле), но категорически не подходит при описании разных продуктов, где для каждого изображения требуется отдельная ссылка.
В данной статье будет использоваться ряд техник, описанных в «Интерактивных изображениях для мобильной Email-рассылки», поэтому если у вас возникнут вопросы, вы всегда можете обратиться к вышеописанной статье за разъяснениями.
Читать дальше →
Всего голосов 20: ↑14 и ↓6+8
Комментарии6

Сумбурно о разработке писем

Время на прочтение6 мин
Количество просмотров17K


Картинка для привлечения внимания пренадлежит studio4

Привет. За долгое время накопилось много интересностей на тему разработки писем, но систематизировать это в полноценный рассказ я не представляю возможным. Вместо этого я просто расскажу об этом так, как указано в заголовке топика.
Читать дальше →
Всего голосов 19: ↑15 и ↓4+11
Комментарии6

«Сделал и забыл»: Почему в верстке email-писем так не бывает

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



Обычно считается, что триггерные письма работают по принципу «установил и забыл». Иногда даже можно услышать, как люди называют это главной причиной использовать их – будто бы, как только вы сформируете триггерную рассылку, письма будут постоянно и стабильно приносить доход, и можно будет никогда их не менять.
Читать дальше →
Всего голосов 10: ↑8 и ↓2+6
Комментарии1

Верстка писем: Что такое «кинетический email»

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



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

По-настоящему адаптивные письма. Часть вторая. Фреймворк

Время на прочтение3 мин
Количество просмотров28K

Картинка для привлечения внимания честно сперта у invisionapp (кстати, у них божественная рассылка)

С момента публикации последнего поста прошло ни много ни мало, полтора месяца, но на то были причины. Уйма работы и бредовые мысли задрота-верстальщика. Сначала я собирался просто перенять приемы Николь Мерлин для верстки писем себе, но потом хипстерская голова подумала: А почему бы не зафигачить целый фреймворк? Громкое слово для моей поделки, но мне приятно его так называть. Начнем с простого.
Читать дальше →
Всего голосов 21: ↑20 и ↓1+19
Комментарии8