В нашем блоге на Хабре мы часто пишем о создании почтовых рассылок — верстке HTML и CSS, работе с plain-text сообщениями и описываем интересные эксперименты. Сегодня мы представляем вашему вниманию подборку полезных ресурсов, туториалов и исследований на английском и русском языках, посвященных работе с email.
1. Блоги
- Blog — Campaign Monitor: Блог о разработке и совершенствовании email-рассылки;
- Email on Acid: Блог о дизайне маркетинговых писем и хитростях email-маркетинга;
- Email Wizardry: Блог разработчика почтовых рассылок.;
- Блог Артура Коха
- Блог Печкина: На Хабре мы рассказываем о верстке почтовых рассылок и связанных с этим технологиях.
2. Шаблоны (Boilerplate)
- Emailology: Об использовании шаблонов для верстки писем (html и css);
- Ink: A Responsive Email Framework from Zurb: Адаптивный дизайн писем от Zurb;
- Litmus: Компоновщик Litmus для верстки писем;
- Автоматический CSS-inliner от Печкина: Данная утилита автоматически приводит все CSS, которые есть в вашем HTML в inline-style. инструмент
3. Разработка
- Bulletproof Email Buttons Litmus: Подходы к созданию универсальных кнопок;
- Bulletproof Email Buttons List A Part: Статья о том, как сделать письмо адаптивным;
- HTML5 Video Background in Email Litmus: Руководство Litmus о том, как встроить HTML5-видео в фон письма;
- Meet the Ipsums: Как применить технику модульного дизайна;
- Процесс вёрстки писем – разбор верстки писем от Sitepoint
- Outlook Conditional CSS MailChimp:Об условных конструкциях CSS для MS Outlook.
4. Сообщества
- Litmus | Discussions: Список веток в сообществе Litmus.
5. Отправка писем
- Emailonacid: Статья о влиянии веса письма на его доставку получателям.
6. Self-hosted приложения
- Sendy: Self-hosted приложение для почтовой рассылки*
7. Шрифты и типографика
- Q&A with Paul Airy (Litmus Blog): Об оформлении писем и шрифтах с Полом Эйри;
- Font Squirrel: Бесплатные шрифты для оформления писем;
- Typekit Practice: Уроки типографики;
- How-to: Типографика в дизайне email-писем
- WhatFont: Сервис, позволяющий определить шрифт при наведении курсора.
8. Руководства
- Как создавать формы для подписки на email-рассылку: Ошибки и решения;
- Зачем нужны plain-text письма, и как их нужно делать: 6 советов;
- Как создать слайдер изображений в почтовом сообщении;
- Как сверстать интерактивные вкладки в email-письме;
- Campaign Monitor's «Will It Work?»: Оформление рассылки средствами CSS и HTML;
- Litmus Our Favorite Responsive and Mobile Email Resources: Уроки, статьи и советы по email-маркетингку.
9. Изображения
- Optimizer JPG: Бесплатный онлайн-инструмент для сжатия jpeg-изображений;
- Tiny PNG: Уменьшение веса PNG-изображений.
10. Адаптивный дизайн
- Multi-Column Responsive Layouts (Campaign Monitor): Адаптивный дизайн для мобильных устройств;
- Responsive HTML Emails: Об адаптивном дизайне писем для мобильных устройств
- From Brad Frost's «This is Responsive»: Подборка источников по адаптивному дизайну;
- Responsive Web Design Resources: Список ссылок на статьи и сайты об адаптивном дизайне.
11. Данные и статистика
- Как создать успешную рассылку — тренды и статистика по Рунету, собранные сервисом «Печкин»;
- The best time of day to send emails (infographic): Инфографика на тему оптимального времени отправки писем;
- Deployment Times: Заметка о том, когда лучше всего отправлять письма;
- Email Still Dominates Sharing: Статистика нажатия на кнопки (поделиться, прочитать позже…);
- Mobile vs Desktop (infographic): Инфографика для разработки дизайна под мобильные устройства;
- Heatmapping Technology CrazyEgg: Веб-инструмент для создания «тепловой карты» сайта.
12. Другие инструменты
- Litmus Scope: Инструмент от Litmus для создания веб-версии писема;
- Emmet: Набор плагинов для различных популярных текстовых редакторов;
- FFFFallBack Bulletproof Web Typography: Инструмент для работы с текстами, шрифтами и их оформлением;
- HTML Tidy: Исправление ошибок в HTML и улучшение внешнего вида верстки;
- Sublime Text: Кроссплатформенный текстовой редактор.
sidristij
Охренеть, сколько всего существует. Даже не думаешь об этом когда не открывая ставишь везде галочки и жмешь «Удалить» =))