Html как сделать сообщение

Обновлено: 02.07.2024

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Языки и фреймворки электронной почты 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.

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

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

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

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

Генератор ссылок 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 тоже могут быть полезными для Вас.

Вам не нужно рыться в собственном почтовом ящике, чтобы найти вдохновение для HTML-дизайна электронной почты. Email Love собрал фантастическую подборку вдохновляющих писем от ведущих компаний.

Really Good Emails упрощает поиск идей для HTML-писем. У вас есть выбор: изучить коллекцию в хронологическом порядке или сузить результаты в зависимости от типа электронного письма (например, купон, бесплатная пробная версия), цели (например, вознаграждение клиентов, благодарность), названия компании или категории и так далее.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 лучше и быстрее.

What You'll Be Creating

Лучший способ понять любой процесс - выполнить его самостоятельно, с самого начала. Сегодня мы проделаем это с дизайном электронного письма, создавая его с нуля.

Материалы

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

Чудесные 2D иконки от Pierre Borodin на Dribbble
Использованные шрифты Oil Can, Source Sans Pro и Mission Script
Иконки социальных сетей от Metrize Icons

Теперь, как мы уже обсуждали в предыдущем уроке, начинаем HTML письмо с XHTML doctype:

После этого можем начать строить остальную часть письма.

Создание контейнера и основной таблицы.

Прежде всего мы создадим общую структуру нашего письма с помощью тега и зададим ему нулевые margin и padding, чтобы избежать неожиданного пространства.

Мы также создадим table с шириной 100%. Это и будет служить основным контейнером нашего письма, т. к. стили для body не везде поддерживаются. Если Вы хотите добавить фон для body, Вам необходимо будет применить это свойство для основной таблицы.

Установите нулевые значения cellpadding и cellspacing, чтобы избежать неожиданного пространства в таблице.

Внимание: мы собираемся оставить значение border="1" для всех таблиц, чтобы видеть скелет макета. В конце мы удалим это значение с помощью простой функции Найти и Заменить.

Если какой-либо атрибут существует в HTML, используйте его вместо CSS свойства.

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

Задайте ширину в HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML писем: если какой-либо атрибут существует в HTML, используйте его, вместо CSS свойства.

Теперь заменим наше небольшое приветствие ‘Hello!’ на эту таблицу:

Мы также добавили инлайновые стили, которые задают свойству border-collapse значение collapse . Если мы этого не сделаем, последние версии Outlook добавят небольшое пространство между таблицей и обводкой.

Создание Структуры и Шапки.

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

Возьмем строку, которую мы уже создали и продублируем её три раза. Я изменил текст внутри них так, чтобы мы могли различить каждую строку.

Теперь зададим им цвет в соответствии с дизайном. Поскольку bgcolor является валидным атрибутом HTML, мы будем использовать его вместо CSS, чтобы задать цвет фона. Помните, чтобы всегда использовать полное шестизначное значение hex кода, трёхзначные сокращения не всегда работают.

Хорошо, в следующем шаге сфокусируемся на Строке 1. Нам необходимо задать padding в ячейке и затем вставить изображение.

Использование Padding

Когда используете padding в HTML письмах, всегда необходимо задавать каждое отдельное значение (top, right, bottom и left), в противном случае результаты могут быть непредсказуемы. Я считаю, здесь всё ещё можно использовать сокращённую форму записи padding: 10px 10px 8px 5px; , но если у Вас возникнут проблемы, напишите полную форму padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;

Если у Вас всё же возникли большие проблемы с padding (например почтовый клиент удаляет Ваш CSS), не используйте их совсем. Просто используйте пустые ячейки, чтобы создать пространство. Совсем не обязательно использовать gif распорку, можно просто добавить style="line-height: 0; font-size: 0;" для ячейки, вставить внутрь и задать определённую высоту или ширину. Пример ниже:

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

Создание области конента

Прежде всего добавим padding для средней ячейки, так, чтобы таблица внутри имела вокруг немного пространства, в соответствии с дизайном.

Теперь добавим таблицу с тремя строками для главного контента — одна для главного заголовка, вторая для вступительного текста и третья для строки с двумя колонками. Зададим ширину таблицы 100%, используем проценты, а не пиксели, т.к. это поможет нам в дальнейшем сделать письмо адаптивным. Если всё время использовать значения в пикселях, в конечном итоге можно запутаться с огромным количеством значений, которые придётся переопределять с помощью медиа запросов. Если задать определённую ширину родительскому контейнеру, а вложенным в него таблицам размеры в процентах, все элементы будут адаптироваться пропорционально.

Теперь вставим наш контент и добавим padding для средней ячейки.

Добавим две колонки с контентом для строки 3. Нам нужен margin между двумя ячейками, но margin не поддерживается, поэтому мы создадим таблицу с тремя колонками и средняя колонка останется пустой.

Сколько бы я не придерживался процентов, но, если Вам нужен контент определённого размера, может быть непросто перевести его в проценты (например, колонки будут равны 48,1%, что может привести к путанице ). Именно поэтому, учитывая, что наши изображения равны 260px, мы создадим колонки шириной 260px, с ячейкой для margin в 20px посередине. (В общем выходит 540px: 600px ширина таблицы минус padding 30px с каждой стороны). Обязательно обнулите font-size и line-height и добавьте неразрывный пробел в ячейку с margin.

Также установим valign значение "top" для каждой ячейки, чтобы выравнять их по вертикали, даже если одна из колонок имеет больше содержимого, чем остальные. Значение по умолчанию "middle" .

Теперь добавим изображение и контент в эти колонки. Т.к. нам нужно несколько строк, вставим ещё одну таблицу, потому что мы не можем использовать colspan или rowspan. Мы также добавим padding между изображениями и скопируем каждую колонку.

Здесь мы установили ширину изображений с помощью HTML на 100% ширины колонки. Это, опять же, для того, чтобы сделать письмо адаптивным. Мы можем использовать только медиа запросы, чтобы изменить ширину родительского элемента. Нам нужно переопределить высоту в пикселях, потому что используя style="height: auto" теперь не будет работать везде (кашель, Outlook). Так что зададим в пикселях. Это значит, нам придётся установить height: auto!important этим изображениям используя медиа запросы, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Как только установим ширину в процентах, не нужно будет ничего переопределять. Чем меньше элементов для переопределения, тем лучше.

Footer

Теперь добавим padding для строки footer.

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

Создадим другую небольшую таблицу для иконок социальных сетей. Зададим родительской ячейке align="right" . Убедитесь, что Вы установили border="0" на ссылках с изображением (чтобы избежать подчёркивания ссылки) и не забудьте display:block

Теперь вставим текст и зададим ширину для ячеек, на всякий случай, даже если между ними достаточно пространства. Установим ширину этой ячейки на 75% и других на 25%.

Ну вот и всё! Наша вёрстка закончена.

Валидация

Давайте прогоним код через W3C валидатор, чтобы убедиться, что ничего не сломалось. Если Вы точно всему следовали, то валидатор скажет, что всё в порядке.

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

Взгляни онлайн

Стилизация текста

Наша первая строка - это заголовок. Будем использовать тег , чтобы сделать текст жирным, потому, что, как мы знаем, если есть возможность стилизовать в HTML, используем это, вместо CSS свойств.

Также добавим эти стили ко всем другим ячейкам текста:

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

И вот оно! Всё готово! Время, чтобы выключить границы и увидеть, как всё красиво выглядит. Пройдитесь по коду и замените каждое border="1" на border="0"

Сейчас всё выглядит немного грустно, плавает в белом пространстве, так что давайте вернёмся к нашей первой ширине 600px и добавим:

Теперь ничего не плавает в пространстве. В качестве последнего шриха я добавлю 30px padding к нижней части самой первой ячейки, чтобы предотвратить внезапную остановку нашей электронной почты на некоторых почтовых клиентах (таких, как Apple Mail), и 10px padding сверху, так, чтобы наш синий заголовок имел немного воздуха.

И это всё! Мы готовы к финальному тесту.

Взгляните онлайн

Готово!

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

Сейчас самое подходящее время для финального теста и тогда Ваше электронное письмо готово к отправке!

Ну а чтобы поднять Ваши знания на новый уровень, смотрите следующие уроки:

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

Основные нюансы при формировании таких писем:

Все стили должны встраиваться (inline) в виде атрибута style для конкретного HTML-элемента.
Все изображения должны встраиваться, либо как отдельные вложения в в письме, либо в виде base64-кодированных данных (второе банально удобнее).
Письмо должно поддерживать DKIM (настройка мэйлера), а домен отправителя — содержать SPF-запись.

Ранее я использовал для формирования HTML-писем проект Premailer, созданный на Ruby. Пришлось даже заняться поддержкой проекта (сейчас времени на это нет, мэйнтейнеры приветствуются).

Сейчас же хотелось избежать внедрения Ruby, в то время, как Node проник везде.

Juice

К счастью, современная экосистема Node предоставляет богатые возможности по формированию электронных писем. Мы выбрали цепочку по формированию электронной почты в виде pug-шаблонов, преобразованию оных с помощью juice и подстановки конкретных данных на бэкэнде (у нас это Perl).

Предполагается, что Вы используете node 6+ , babel (es2015, es2016, es2017, stage-0 presets).

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

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

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

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

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

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

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

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

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

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

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

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

Вам не нужно рыться в собственном почтовом ящике, чтобы найти вдохновение для HTML-дизайна электронной почты. Email Love собрал фантастическую подборку вдохновляющих писем от ведущих компаний.
Really Good Emails упрощает поиск идей для HTML-писем. У вас есть выбор: изучить коллекцию в хронологическом порядке или сузить результаты в зависимости от типа электронного письма (например, купон, бесплатная пробная версия), цели (например, вознаграждение клиентов, благодарность), названия компании или категории и так далее.
Недостаточно? Есть также HTML-дизайн электронной почты и HTML-галерея электронной почты .

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

Читайте также: