Как вывести головную боль из CSS и HTML в электронных письмах

Недавно я спустился с кроличьей луной создания мощного рабочего процесса по электронной почте, используя Глюч Кодировать, составить и предварительно просмотреть наши маркетинговые электронные письма HTML.

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

Для кого этот пост?

Если вы отправляете электронные письма, этот пост для вас. Может быть, вы отправляете электронные письма как часть вашей работы, или в качестве концерта или даже для развлечения. Вы можете использовать MailChimp, Tinyletter, Customer.io или одну из буквально миллионов других услуг.

Этот пост Определенно Для вас, если вы обнаружили, что кодируете свои электронные письма в необработанном HTML, а не за строителем перетаскивания.

И это Определенно Для вас, если вам нравятся расширенные листы в стиле.

Проблема – электронная почта

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

Некоторые клиенты Outlook (я знаю) даже используют старые двигатели Microsoft Word, чтобы отобрать свою электронную почту (я знаю).

Некоторые клиенты не уважают листы стиля, в то время как другие не уважают определенные части листов стиля. Это все.

Таким образом, лучшая практика в нашем забавном углу мира – это встроить как можно больше стилей.

Настройка электронных писем с помощью встроенных стилей – это тяжелая работа, особенно когда вам нужно сделать это снова, и снова, и снова.

Это настолько разочаровывает, что появилось множество новых инструментов, чтобы сделать это для вас. Возьмите Automattic’s Сок или Litmus ‘ Оплаченный по электронной почте строитель Анкет Все здорово!

Но некоторые не свободны, а некоторые решают только кусок головоломки.

Решение – бегун задачи

Задача задачи (например, grunt ) объединяет ряд различных дел в одном шаге выполнения.

Я очень мало знаю о JavaScript, но я знаю, как следовать за Readmes и Tinker, пока не сломаю вещи и не заставлю их снова работать.

Поэтому, когда я наткнулся на ворчание и, наконец, понял это, это потрясло мой маленький мир электронной почты. Особенно, когда я нашел Грант-эмаловый поток Ли Манро Анкет Я мог бы использовать SCSS (Fancy CSS) и встроить все это одновременно, сохраняя мои шаблоны в чистоте, пока я кодировал, но выводил все, что мне нужно.

После того, как я запустил его (и настроен), благодаря магии функциональности предварительного просмотра Glitch, я мог видеть просмотр живых просмотров на падении шляпы.

Что делает эта задача бегуна?

Используя некоторые основные модули, я создал приложение для сбоя, которое делает несколько основных вещей:

• Принимает SCSS/SASS Partials и объединяет их в единую таблицу стилей
• Принимает эту таблицу стилей и внедряет все стили в один HTML -файл
• Загружает этот HTML в предварительный просмотр, который вы можете скопировать/вставить непосредственно в свой почтовый клиент.

Как мне его использовать?

1. Go Glitch.com 🎏 и создайте учетную запись, если вы еще этого не сделали.
2. Отправляйтесь в проект Груз для эм-элева и нажмите Remix для своей собственной версии той же. Вам нужно будет обновить пару маленьких вещей, таких как некоторые фиксированные ссылки в /public/index.html Анкет
3. Сделайте его частный проект, если вы хотите, чтобы ваш код был только для вас.
4. Следуйте Readme, чтобы настроить папки и рабочий процесс.
5. Начните выполнять свои собственные задачи.
6. Нажмите «Show»> «Показать рядом с кодом» для некоторого сладкого, сладкого предварительного просмотра.
7. Для получения дополнительного удовольствия, проверьте дополнительные ресурсы в Readme.

Если у вас есть вопросы или отзывы, не стесняйтесь оставить комментарий! И если вы найдете этот инструмент полезным, пожалуйста, Unicorn 🦄 Этот пост.

Мы очень скоро запускаем несколько захватывающих функций на Glitch. Узнай первым .

Оригинал: “https://dev.to/glitch/how-to-take-the-headache-out-of-css-and-html-in-emails-2kf0”