Как перевести письмо в html
Изменение формата сообщения на HTML, RTF или обычный текст
Вы можете изменить формат сообщения при ответе на него или его пересылке. Например, если кто-то отправляет вам сообщение в виде обычного текста, можно ответить на него или переслать его в формате HTML или RTF.
То, как сообщение отображается для человека, получившего его, зависит от его почтовой программы. Например, если почтовая программа получателя настроена для преобразования сообщений, ваше письмо в формате HTML может быть преобразовано в формат обычного текста.
Доступные типы формата сообщений
Outlook предлагает три формата сообщений. Вы можете выбрать формат в зависимости от того, хотите ли использовать полужирный или курсивный текст, цвета, маркеры или фотографии в тексте сообщения.
У каждого формата есть свои преимущества.
Это стандартный формат сообщений в Outlook. Его нужно использовать, если вы хотите создавать сообщения, которые выглядят как обычные документы с различными шрифтами, цветами, маркированными и нумерованными списками, а также добавлять в текст сообщения изображения.
Обычный текст
Этот формат поддерживается всеми почтовыми программами, но в нем нет полужирного шрифта или курсива, цветных шрифтов и другого форматирования текста. Формат обычного текста также не позволяет добавлять изображения в текст сообщения, хотя их можно включать в виде вложений.
RTF — это формат Майкрософт, который поддерживается только следующими почтовыми приложениями:
клиент Microsoft Exchange версий 4.0 и 5.0;
все версии Outlook.
Формат RTF можно применять при отправке сообщений внутри организации, в которой используется Microsoft Exchange, но мы рекомендуем использовать HTML. На самом деле, когда вы отправляете сообщение в формате RTF кому-то за пределами организации, Outlook автоматически преобразует его в HTML, поэтому форматирование и вложения сохраняются. Outlook также автоматически форматирует сообщения, которые содержат кнопки голосования, и преобразует задачи и приглашения на собрания в формат iCalendar.
Формат RTF позволяет добавлять маркированные списки, выравнивать текст и использовать другие возможности, включая добавление связанных объектов. Вложения в сообщениях формата RTF отображаются в виде значков в тексте. В HTML-сообщениях они указываются под темой.
Отправка html-письма при помощи web-интерфейса Gmail
В отличие от специализированных программ-почтовиков, создание html-сообщения электронной почты в веб-интерфейсах распространённых почтовых сервисов, задача, мягко говоря, не тривиальная. Но ознакомится с тем, как это действует, есть резон. Просто уже потому, что этот инструмент всегда есть под рукой. Т.е., ничего не надо скачивать, устанавливать — зашел на соответствующий сервис в браузере, и, что называется — бери и пользуйся.
Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.
Видео
1 этап — ревизируем шаблон нашего html-письма
Перво-наперво, проверяем, что наше письмо содержит целиком прописанные ссылки на свои изображения. И что картинки расположены не на локальном диске компьютера, а на внешнем сервере. Иначе, Gmail изображения попросту не увидит, и отображаться в письме они не будут.
2 этап — создаём письмо из своего html-шаблона в среде браузера
Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху
Рис. 1
Раскрывшееся окошко «Новое сообщение» развернём по максимуму, нам далее очень пригодится это пространство
Рис. 2
Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».
Рис. 3
Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.
Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами
Рис. 4
Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».
Правый клик по выделенному блоку
Рис. 5
Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».
Рис. 6
Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.
Рис. 7
Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).
Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.
Рис. 8
Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор
, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.
Рис. 9
В результате получится модифицированный код страницы браузера из Gmail с внедрённым в него содержимым нашего письма. Но пока он только в «Блокноте», поэтому выделяем всё в этом, только что дополненном нашим кодом, окне и вновь копируем в буфер теперь уже это содержимое.
Рис. 10
Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».
Рис. 11
Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.
Рис. 12
Для выхода из режима правки html-кода закроем окна, отражающие этот код.
Рис. 13
Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.
Рис. 14
И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.
Полное руководство по электронным письмам в формате HTML
Дата публикации: 2021-05-03
От автора: в новой короткой серии публикаций мы расскажем о некоторых полезных инструментах и методах для разработчиков и дизайнеров. На этот раз мы рассмотрим шаблоны и инструменты для создания и разработки электронных писем в формате HTML.
Начало работы с электронной почтой в формате HTML
Если вы просто пытаетесь понять все, что происходит за кулисами причудливого мира электронной почты в формате HTML, Кейти Г. О’Коннор опубликовала прекрасное руководство о том, как начать кодирование электронных писем. В статье представлены курсы, учебные пособия и просто общие рекомендации, которые следует учитывать при создании и разработке электронных писем — все в виде подробного одностраничного руководства. На SmashingMag, Ли Манро также опубликовал подробное руководство по созданию и отправке электронных писем в формате HTML.
В качестве альтернативы, Как кодировать электронные письма в HTML для любого устройства — это очень подробное руководство по созданию надежного шаблона электронной почты в формате HTML и его тестированию, а также практический пример создания шаблона информационного бюллетеня с нуля. В общем, это очень основательный обзор всего, что вам нужно знать, чтобы начать правильно работать.
У Джейсона Родригеса есть подробный видеокурс по электронной почте в формате HTML (платный), в котором есть практически все, что нужно знать, от доступности до устранения неполадок, рабочих процессов и инструментов.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
А если вы столкнулись с проблемой электронной почты или просто ищете помощи от сообщества, #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 почтовом клиенте.
Репозиторий ошибок электронной почты
Apple Mail не показывает встроенные SVG-файлы, Gmail не отображает электронные письма во всю ширину, Outlook меняет поведение анимированных Gif-файлов — все мы знаем, как странно иногда себя ведут почтовые клиенты.
Чтобы помочь вам понять, что происходит, когда вы сталкиваетесь с подобными ошибками, Реми Парментье поддерживает Email Bugs, репозиторий GitHub для некорректного поведения почтового клиента. Он не только упрощает жизнь дизайнерам электронной почты, предоставляя место для обсуждения ошибок, но также пытается сообщать о каждой ошибке в соответствующую компанию и исправлять их навсегда. Но на всякий случай, если это невозможно, «Как настроить таргетинг на почтовых клиентов» предоставляет обзор обходных путей для работы с конкретными почтовыми клиентами.
Генератор ссылок Mailto
Старые добрые HTML-ссылки могут делать больше, чем мы обычно им приписываем. Мы можем использовать префикс mailto:, но на самом деле создание кода может быть довольно неприятным. Mailtolink.me делает это за нас, и делает это хорошо: он генерирует фрагмент для ссылок mailto, включая CC, BCC, строку темы и основной текст.
Подсказка выбора почтового клиента Mailto
Иногда, когда вы нажимаете на адрес электронной почты, может открываться приложение, которое ваши клиенты на самом деле не используют. Вот почему принято копировать и вставлять адреса электронной почты вместо того, чтобы напрямую переходить по ссылкам. Чтобы избежать этого, мы можем использовать Mailgo и MailtoUI.
Электронная почта для вдохновения
Это может показаться просто потому, что электронная почта HTML кажется довольно древней и устаревшей, как и возможности того, что мы можем сделать с электронной почтой HTML. Тем не менее, существует множество ресурсов, блогов и подкастов, посвященных новым методам работы с электронной почтой — некоторые из них часто относятся к очень творческой стороне кодирования электронной почты!
Litmus Blog, CampaignMonitor блог и HTML Email имеют много статей и подкастов с передовым опытом, советами, ресурсами и даже подкаст на HTML электронной почте. И если вам нужно немного вдохновения для создания писем, отсортированных по отраслям, Really Good Emails и EmailLove тоже могут быть полезными для Вас.
Вам не нужно рыться в собственном почтовом ящике, чтобы найти вдохновение для HTML-дизайна электронной почты. Email Love собрал фантастическую подборку вдохновляющих писем от ведущих компаний.
Really Good Emails упрощает поиск идей для HTML-писем. У вас есть выбор: изучить коллекцию в хронологическом порядке или сузить результаты в зависимости от типа электронного письма (например, купон, бесплатная пробная версия), цели (например, вознаграждение клиентов, благодарность), названия компании или категории и так далее.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Доступные электронные письма
Где мы находимся с электронной почтой с точки зрения доступности? Правильно ли мы объявляем электронные письма читателям с экрана? А как насчет темного режима? Репозиторий 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
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3