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

^[1]

В нашем блоге на Хабре мы часто пишем о создании почтовых рассылок ^[2] — верстке HTML и CSS, работе с plain-text сообщениями и описываем интересные эксперименты. Сегодня мы представляем вашему вниманию список из 60 полезных ресурсов, туториалов и исследований о работе с email.

Фреймворки

Ink ^[3] – для быстрой вёрстки адаптивных HTML-писем, которые будут одинаково хорошо отображаться на любом устройстве или почтовом клиенте, в том числе в Outlook
Email Framework ^[4] – фреймворк для создания HTML-писем
По-настоящему адаптивные письма. Часть вторая. Фреймворк ^[5] — подход к созданию адаптивных писем от Артура Коха

Шаблоны

Sendwithus ^[6] – открытая библиотека шаблонов для писем
Шаблоны электронных писем от Mailchimp ^[7]
Шаблоны Campaign Monitor ^[8]
Шаблоны адаптивных HTML-писем ^[9] – протестированы на популярных почтовых клиентах
Cerberus ^[10] – подборка адаптивных шаблонов для писем
Antwort ^[11] – адаптивные макеты для верстки писем
Адаптивный HTML-шаблон ^[12] – подходит для работы с основными почтовыми платформами
Бесплатный адаптивный шаблон: сводка ^[13] – пятерка проверенных шаблонов
Шаблон электронных писем от Grunt ^[14]
Шаблоны адаптивных электронных писем ^[15]
Шаблон HTML-письма ^[16] – хорошая отправная точка для вашей рассылки

Инструменты

«Пуленепробиваемые» кнопки для писем ^[17] – кнопки для ваших писем на VML и CSS
«Пуленепробиваемые» фоновые изображения ^[18]
PutsMail ^[19] – бесплатный инструмент для тестирования HTML-писем перед отправкой
«Печкин ^[20]» — сервис для создания и анализа email-рассылок;
«Инлайнер» писем от «Печкина» ^[21] — инструмент для создания inline-стилей для корректного отображения HTML-писем;
Litmus ^[22] – тестирование и отслеживание писем
Campaign Monitor ^[23] – протестируйте дизайн вашего письма во всех почтовых клиентах
Grunt Litmus ^[24] – тестируйте письма на Litmus с помощью grunt
Email on Acid ^[25] – тестирование писем на платной и бесплатной основе

Туториалы

Туториал от Ли Манро из Grunt ^[26] (подробнее ^[27])
Туториал от Дэрила Дойла из Gulp на основе работы Ли Манро ^[28]
How-to: адаптивные письма в Gmail ^[29]
Как сверстать фоновое HTML5-видео в email-сообщении ^[30]
How-to: Типографика в дизайне email-писем ^[31]
Дизайн простоты: Как делать эффективные plain-text письма ^[32]
Процесс вёрстки писем ^[33] – разбор верстки писем от Sitepoint
CSS Support ^[34] – анализ поддержки CSS для самых популярных почтовых клиентов
Как создавать формы для подписки на email-рассылку: Ошибки и решения ^[35]
Лучшие методики по верстке электронных писем ^[36]
Как верстать HTML-письма (Mailchimp) ^[37]
How-to: Техники создания интерактивных email-писем с помощью CSS ^[38]
Как не потерять рассудок (и душу) при вёрстке рассылок ^[39]
Как создать слайдер изображений в почтовом сообщении ^[40]
Как сверстать интерактивные вкладки в email-письме ^[41]
Пособие по email-маркетингу от Mailchimp ^[42]
Подробное руководство по CSS ^[34] от Campaign Monitor
Использование CSS в HTML-письмах ^[43]
Адаптивный дизайн HTML-писем ^[44] – Курс по созданию адаптивных писем от сотрудников компании Litmus Джастина Дженда (Justine Jand) и Джейсона Родригеза (Jason Rodriguez)
Дизайн HTML-писем ^[45] – дизайнер интерфейсов MailChimp Фабио Карнейро (Fabio Carneiro) показывает, как создать с нуля многофункциональное письмо, адаптированное под мобильные устройства
Создание HTML-письма ^[46] – эти учебные пособия ознакомят вас с основами верстки HTML-писем. Здесь вы сможете найти информацию о технологиях разработки, процессе создания и дизайна HTML-писем
Верстка шаблона адаптивного письма в Ink ^[47] – создание шаблонов адаптивных писем с помощью Ink
Зачем нужны plain-text письма, и как их нужно делать: 6 советов ^[48]

Блоги

Хабраблог «Печкина» о верстке рассылок ^[49]
Блог Артура Коха ^[50]
Блог Litmus ^[51]
Блог Stylecampaign ^[52]
Блог Myemma ^[53]
Блог Postmarkapp ^[54]
Блог Spently ^[55]
Блог Emailmonks ^[56]

Исследования

Как создать успешную рассылку ^[57] — тренды и статистика по Рунету, собранные сервисом «Печкин»;
Myemma Email Stats ^[58] – 18 фактов от компании Emma, Inc, которые будут полезны современным email-маркетологам
Mailchimp Research ^[59] – команда исследователей MailChimp постоянно анализирует данные, чтобы помочь вам с проведением рассылок
Отчет Campaign Monitor за 2015 год ^[60] – отчёт за 2015 год: новые правила email-маркетинга

Источники вдохновения

Идеальные электронные письма ^[61] – лучшие дизайны писем
Топ электронных маркетинговых кампаний ^[62]
Htmlemaildesigns ^[63] – дизайн, который можно взять себе на заметку

Автор: Pechkin-mail.ru

Источник ^[64]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/how-to/106970

Ссылки в тексте:

[1] Image: http://habrahabr.ru/company/pechkin/blog/273677/

[2] почтовых рассылок: https://pechkin-mail.ru/?utm_source=habr&utm_medium=referral&utm_campaign=smm

[3] Ink: https://github.com/zurb/ink

[4] Email Framework: http://emailframe.work/

[5] По-настоящему адаптивные письма. Часть вторая. Фреймворк: http://habrahabr.ru/post/265753/

[6] Sendwithus: https://www.sendwithus.com/resources/templates

[7] Шаблоны электронных писем от Mailchimp: https://github.com/mailchimp/email-blueprints

[8] Шаблоны Campaign Monitor: https://www.campaignmonitor.com/email-templates/

[9] Шаблоны адаптивных HTML-писем: https://github.com/mailgun/transactional-email-templates

[10] Cerberus: https://github.com/tedgoas/cerberus

[11] Antwort: https://github.com/internations/antwort

[12] Адаптивный HTML-шаблон: https://github.com/charlesmudy/responsive-html-email-template

[13] Бесплатный адаптивный шаблон: сводка: https://litmus.com/resources/free-responsive-email-templates/

[14] Шаблон электронных писем от Grunt: https://github.com/dwightjack/grunt-email-boilerplate

[15] Шаблоны адаптивных электронных писем: http://responsiveemailpatterns.com/

[16] Шаблон HTML-письма: http://htmlemailboilerplate.com/

[17] «Пуленепробиваемые» кнопки для писем: http://buttons.cm/

[18] «Пуленепробиваемые» фоновые изображения: http://backgrounds.cm/

[19] PutsMail: https://putsmail.com/

[20] Печкин: https://pechkin-mail.ru/

[21] «Инлайнер» писем от «Печкина»: http://labs.pechkin-mail.ru/inliner/

[22] Litmus: https://litmus.com/

[23] Campaign Monitor: https://www.campaignmonitor.com/testing/

[24] Grunt Litmus: https://www.npmjs.com/package/grunt-litmus

[25] Email on Acid: http://www.emailonacid.com/

[26] Туториал от Ли Манро из Grunt: https://github.com/leemunroe/grunt-email-workflow

[27] подробнее: http://www.leemunroe.com/email-design-workflow/

[28] Туториал от Дэрила Дойла из Gulp на основе работы Ли Манро: https://github.com/darylldoyle/gulp-email-creator

[29] How-to: адаптивные письма в Gmail: http://habrahabr.ru/company/pechkin/blog/263699/

[30] Как сверстать фоновое HTML5-видео в email-сообщении: http://habrahabr.ru/company/pechkin/blog/261447/

[31] How-to: Типографика в дизайне email-писем: http://habrahabr.ru/company/pechkin/blog/259909/

[32] Дизайн простоты: Как делать эффективные plain-text письма: http://habrahabr.ru/company/pechkin/blog/259333/

[33] Процесс вёрстки писем: http://habrahabr.ru/company/pechkin/blog/268025/

[34] CSS Support: https://www.campaignmonitor.com/css/

[35] Как создавать формы для подписки на email-рассылку: Ошибки и решения: http://habrahabr.ru/company/pechkin/blog/265853/

[36] Лучшие методики по верстке электронных писем: https://documentation.mailgun.com/best_practices.html#email-best-practices

[37] Как верстать HTML-письма (Mailchimp): http://kb.mailchimp.com/article/how-to-code-html-emails

[38] How-to: Техники создания интерактивных email-писем с помощью CSS: http://habrahabr.ru/company/pechkin/blog/264967/

[39] Как не потерять рассудок (и душу) при вёрстке рассылок: http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

[40] Как создать слайдер изображений в почтовом сообщении: http://habrahabr.ru/company/pechkin/blog/267565/

[41] Как сверстать интерактивные вкладки в email-письме: http://habrahabr.ru/company/pechkin/blog/265409/

[42] Пособие по email-маркетингу от Mailchimp: http://mailchimp.com/resources/guides/email-marketing-field-guide/html/

[43] Использование CSS в HTML-письмах: http://css-tricks.com/using-css-in-html-emails-the-real-story/

[44] Адаптивный дизайн HTML-писем: https://frontendmasters.com/courses/responsive-email/

[45] Дизайн HTML-писем: http://teamtreehouse.com/library/html-email-design

[46] Создание HTML-письма: http://webdesign.tutsplus.com/series/mastering-html-email--webdesign-17696

[47] Верстка шаблона адаптивного письма в Ink: https://scotch.io/tutorials/building-responsive-email-templates-with-ink

[48] Зачем нужны plain-text письма, и как их нужно делать: 6 советов: http://habrahabr.ru/company/pechkin/blog/272971/

[49] Хабраблог «Печкина» о верстке рассылок: http://habrahabr.ru/company/pechkin/blog/

[50] Блог Артура Коха: http://habrahabr.ru/users/dudeonthehorse/topics/

[51] Блог Litmus : https://litmus.com/blog/

[52] Блог Stylecampaign: http://stylecampaign.com/blog/

[53] Блог Myemma: http://myemma.com/content-hub

[54] Блог Postmarkapp: http://blog.postmarkapp.com/

[55] Блог Spently: http://spently.com/blog/

[56] Блог Emailmonks: http://www.emailmonks.com/blog/

[57] Как создать успешную рассылку: http://habrahabr.ru/company/pechkin/blog/252641/

[58] Myemma Email Stats: http://myemma.com/brainiac/gate-free-stats

[59] Mailchimp Research: http://mailchimp.com/resources/research/

[60] Отчет Campaign Monitor за 2015 год: https://www.campaignmonitor.com/resources/guides/email-marketing-new-rules/

[61] Идеальные электронные письма: http://reallygoodemails.com/

[62] Топ электронных маркетинговых кампаний: https://www.campaignmonitor.com/best-email-marketing-campaigns/

[63] Htmlemaildesigns: http://htmlemaildesigns.com/

[64] Источник: http://habrahabr.ru/post/273677/

Нажмите здесь для печати.