Полное руководство по электронным письмам в формате HTML

От автора: в новой короткой серии публикаций мы расскажем о некоторых полезных инструментах и методах для разработчиков и дизайнеров. На этот раз мы рассмотрим шаблоны и инструменты для создания и разработки электронных писем в формате HTML.

Начало работы с электронной почтой в формате HTML

Если вы просто пытаетесь понять все, что происходит за кулисами причудливого мира электронной почты в формате HTML, Кейти Г. О’Коннор опубликовала прекрасное руководство о том, как начать кодирование электронных писем. В статье представлены курсы, учебные пособия и просто общие рекомендации, которые следует учитывать при создании и разработке электронных писем — все в виде подробного одностраничного руководства. На SmashingMag, Ли Манро также опубликовал подробное руководство по созданию и отправке электронных писем в формате HTML.

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

У Джейсона Родригеса есть подробный видеокурс по электронной почте в формате HTML (платный), в котором есть практически все, что нужно знать, от доступности до устранения неполадок, рабочих процессов и инструментов.

А если вы столкнулись с проблемой электронной почты или просто ищете помощи от сообщества, #emailgeeks — отличная отправная точка. Это сообщество Slack только по приглашению с множеством каналов для обсуждения кода, дизайна, вакансий, событий и новых инструментов и ресурсов. Вы также можете найти множество ресурсов с хэштегом #emailgeeks в Твиттере.

Языки и фреймворки электронной почты HTML

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

Языки и платформы электронной почты HTML

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

MJML делает кодирование адаптивных писем немного более удобным

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

HTML-платформа электронной почты на основе Tailwind CSS

Заставить электронную почту HTML работать с почтовыми клиентами — непростая задача. К счастью, существует множество надежных инструментов, шаблонов и фреймворков, которые упростят выполнение вашей работы. Например, Maizzle — это фреймворк, который помогает быстро создавать электронные письма в формате HTML с помощью Tailwind CSS и расширенной пост-обработкой. Он также предоставляет несколько готовых проектов (Maizzle Starters ), с которых вы можете начать прямо сейчас.

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

«Пуленепробиваемые» шаблоны электронной почты HTML

Cerberus и HTML Email предоставляют небольшие коллекции надежных и надежных шаблонов для адаптивных электронных писем HTML, которые хорошо протестированы в более чем 50 почтовых клиентах, включая Gmail, Outlook, Yahoo, AOL и многие другие. EmailFrame.work позволяет создавать адаптивные HTML-шаблоны электронной почты с предварительно созданными параметрами сетки и базовыми компонентами, которые поддерживаются более чем в 60+ почтовых клиентах.

Codedmails включает 60 шаблонов и тем электронной почты, написанных на MJML и протестированных на совместимость. Весь код доступен на Github, а шаблоны можно использовать бесплатно для некоммерческих проектов, а исходные файлы MJML предоставляются за дополнительную плату.

Stripo, Chamaileon, Postcards, Topol.io, GoodEmailCode, Pixelbuddha и Bee Free — все содержат множество бесплатных HTML-шаблонов электронной почты, Litmus предоставляет адаптивные шаблоны электронной почты для информационных бюллетеней, обновлений продуктов и квитанций, а CampaignMonitor имеет бесплатный конструктор HTML-шаблонов электронной почты drag’n’drop функциональностью.

Поддержка функций электронной почты в формате HTML

Caniemail.com — удобный инструмент, который принадлежит набору инструментов каждого, кто сталкивается с проблемой электронной почты HTML — будь то время от времени или регулярно — это caniemail.com. Вдохновленный успешной концепцией caniuse.com, caniemail.com позволяет вам проверить поддержку 179 функций HTML и CSS в 31 почтовом клиенте.

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

Репозиторий ошибок электронной почты

Apple Mail не показывает встроенные SVG-файлы, Gmail не отображает электронные письма во всю ширину, Outlook меняет поведение анимированных Gif-файлов — все мы знаем, как странно иногда себя ведут почтовые клиенты.

Чтобы помочь вам понять, что происходит, когда вы сталкиваетесь с подобными ошибками, Реми Парментье поддерживает Email Bugs, репозиторий GitHub для некорректного поведения почтового клиента. Он не только упрощает жизнь дизайнерам электронной почты, предоставляя место для обсуждения ошибок, но также пытается сообщать о каждой ошибке в соответствующую компанию и исправлять их навсегда. Но на всякий случай, если это невозможно, «Как настроить таргетинг на почтовых клиентов» предоставляет обзор обходных путей для работы с конкретными почтовыми клиентами.

Генератор ссылок Mailto

Старые добрые HTML-ссылки могут делать больше, чем мы обычно им приписываем. Мы можем использовать префикс mailto:, но на самом деле создание кода может быть довольно неприятным. Mailtolink.me делает это за нас, и делает это хорошо: он генерирует фрагмент для ссылок mailto, включая CC, BCC, строку темы и основной текст.

Подсказка выбора почтового клиента Mailto

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

Вместо открытия собственного почтового клиента оба инструмента запрашивают модальное окно , позволяющее пользователю выбрать одну из предпочтительных служб или скопировать и вставить ссылку. Кроме того, Mailgo может обращаться ко всем ссылкам tel, позволяя им открывать Telegram, WhatsApp, Skype, звонить по умолчанию или копировать номер телефона — и он также поддерживает темный режим.

Электронная почта для вдохновения

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

Litmus Blog, CampaignMonitor блог и HTML Email имеют много статей и подкастов с передовым опытом, советами, ресурсами и даже подкаст на HTML электронной почте. И если вам нужно немного вдохновения для создания писем, отсортированных по отраслям, Really Good Emails и EmailLove тоже могут быть полезными для Вас.

Доступные электронные письма

Где мы находимся с электронной почтой с точки зрения доступности? Правильно ли мы объявляем электронные письма читателям с экрана? А как насчет темного режима? Репозиторий Accessible Email содержит ряд статей, инструментов, презентаций и ресурсов о специальных возможностях — не только для электронной почты, но особенно для нее.

С Accessible-Email.org вы можете анализировать отправленные письма и проверять доступность их улучшения. С помощью темного режима для имитатора электронной почты вы можете проверить, как ваша электронная почта выглядит в темном режиме.

Соответствие с CSS и преобразование HTML

С помощью инструмента Alter.Email вы можете выбрать несколько «преобразователей» — например, встроить CSS и очистить код, удалить неиспользуемый CSS, а также отформатировать HTML и даже запретить использование лишних слов. В качестве альтернативы вы также можете использовать Postdrop, который также позволяет вам встроить и минимизировать CSS.

Удаление неиспользуемого CSS из шаблонов электронной почты

Написание CSS не является захватывающей задачей для почты HTML в которой повсюду разбросаны встроенные стили. Чтобы удалить неиспользуемый CSS из шаблонов электронной почты, есть Email Comb. Инструмент позволяет вам добавлять классы и идентификаторы, которые вы хотели бы игнорировать, выбирать, хотите ли вы их минимизировать и удалять комментарии, и показывает, что именно было удалено.

Шпаргалка по таргетингу почтовых клиентов

Почтовые клиенты изменяют и удаляют часть вашего HTML и CSS, часто безжалостно. Если один из почтовых клиентов работает не так, как ожидалось, вы можете обработать его отдельно. Шпаргалка для таргктинга клиентов электронной почты позволяет выбрать клиент целевой электронной почты и, по крайней мере, попытаться обратиться к нему напрямую. Это может не всегда сработать, поскольку почтовые клиенты постоянно меняются, но это то, что стоит попробовать.

Все ресурсы электронной почты в формате HTML

Thebetter.email предоставляет постоянно растущее хранилище полезных ресурсов электронного маркетинга, включая людей, обучающие сайты, инструменты, сведения о поставщиках услуг электронной почты, информационные бюллетени, код и интерактивные ресурсы электронной почты. Отобранный вручную Джейсоном Родригесом, который проработал в индустрии много лет и потратил уйму времени, работая над данным ресурсом.

Ресурсы электронного маркетинга

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

А если вы ищете текущие тенденции в электронном маркетинге, Oracle’s Email Marketing Trends включает множество видеороликов о доставке электронной почты, модульной архитектуре электронной почты, доступности электронной почты, а также электронном маркетинге.

Темный режим в Gmail и Outlook

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

Руководство разработчика по темному режиму в электронной почте подчеркивает некоторые важные рекомендации, которые следует учитывать при создании версии электронной почты в формате HTML в темном режиме. В нем объясняется, как настроить темный режим, как работать с изображениями и общей поддержкой браузера (что очень хорошо!).

Реми Парментье идет немного глубже, показывая, как исправить проблемы темного режима Gmail с помощью режимов наложения CSS. Gmail принудительно изменяет любой цвет светлого текста на темный цвет текста. Если вам нужно это исправить, Реми придумал творческое использование mix-blend-mode(поддерживается в Gmail), чтобы сохранить светлый цвет текста, если вам нужно.

IDE для разработки электронной почты HTML

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

Кроме того, вы также можете взглянуть на Mail Studio, сложное настольное приложение (для Windows, macOS и Linux), которое объединяет визуальное редактирование и редактирование кода в одной электронной среде IDE.

Приложение поставляется с библиотекой компонентов, парой адаптивных шаблонов электронной почты, интеграцией Google Fonts, встроенной поддержкой Sass, палитрой команд, инструментами для совместной работы, предварительным просмотром электронной почты и даже интеграцией с поставщиками услуг электронной почты, такими как MailChimp, Campaign Monitor и Sendgrid. Вскоре ожидается интеграция с Figma.

Предварительный просмотр электронной почты в полноэкранном режиме

Если вам нужен полноэкранный предварительный просмотр вашего электронного письма в формате HTML, Emailpreview.io может быть именно тем, что вам нужно. Вы можете скопировать / вставить HTML или импортировать файл EML, который вы только что получили, и инструмент выведет полностью визуализированное изображение вашего электронного письма. Вы также можете выбрать ширину устройства. Маленький полезный инструмент, который стоит держать под рукой.

Блокировщик почтового трекера

Большинство маркетинговых электронных писем включают трекеры в электронную почту HTML, поэтому они могут отслеживать, как часто, когда и где клиенты открывают электронные письма. MailTrackerBlocker действует как блокировщик рекламы для браузеров, но работает с почтовыми клиентами. Инструмент отмечает, кто отслеживает клиентов, и удаляет пиксели отслеживания, прежде чем они могут быть отображены, поэтому вы все равно можете загружать весь удаленный контент и сохранять конфиденциальность своего поведения. В настоящее время доступно только для Apple Mail на macOS 10.11 — 11.x (привет Джереми Кейту!).

Вы можете использовать блокировщик рекламы, чтобы заблокировать стороннее отслеживание, а для Apple Mail можете также использовать MailTrackerBlocker, чтобы блокировать пиксели отслеживания в электронных письмах.

Улучшение электронной почты

Переполнение почтовых ящиков, спам с запросами на обратные ссылки, люди, пишущие вам по электронной почте в пятницу днем и последующие сообщения в понедельник утром — есть много вещей, которые делают работу с электронной почтой неприятной. Однако, поскольку электронную почту невозможно обойти, есть только одно решение: давайте исправим ситуацию вместе. Помня об этом, Крис Койер запускает сайт «Электронная почта — это хорошо», посвященный продуктивности электронной почты.

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

Заключение

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

Автор: Vitaly Friedman

Источник: www.smashingmagazine.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен