02.08.2021
e60990aecae70839c7e4651f1ecb1d22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 почтовом клиенте.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Недостаточно? Есть также HTML-дизайн электрической почты и HTML-галерея электронной почты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *