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

Обновлено: 07.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 лучше и быстрее.

Что означает адрес электронной почты?

Что такое правильный формат для адреса электронной почты?

Адрес электронной почты имеет формат username@entity.TLD . Только определенные символы (в основном буквы и цифры, а также несколько знаков препинания, такие как точка или подчеркивание) допускаются для имен адресов электронной почты . Имя пользователя может быть в различных форматах, включая Имя (как указано выше с Джейн), Имя.Последнее имя (например, Jane.Doe) или Имя, Фамилия (например, jdoe).

Адрес электронной почты может быть длиной до 254 символов (включая знак @ и имя домена).

Где и как я могу получить адрес электронной почты?

Что такое одноразовый адрес электронной почты?

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

Электронная почта стала основным способом общения деловых людей. Большинство из нас посылают больше деловых писем, чем любые другие формы делового общения.

Каждый день вы отправляете электронное письмо своему боссу, вашим клиентам, вашим поставщикам и вашим рабочим контактам.

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

Несмотря на свою важность, форматирование электронного письма часто игнорируется. Правильное форматирование улучшает шансы того, что получатель прочтёт, ответить и отреагирует положительно на ваше электронное письмо.

Прежде чем приступить к рассмотрению этих шагов, рассмотрите возможность загрузки нашей новой книги: The Ultimate Guide to Inbox Zero Mastery. (Она БЕСПЛАТНА с подпиской на Tuts + Business Newsletter.)

1. Определите аудиторию для электронного письма

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

Вот краткое описание некоторых общих правил о том, когда использовать формальный или неформальный стиль для электронного письма.

Использование формального стиля письма:

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

Использование неформального стиля электронного письма:

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

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

2. Знать как составлять деловое электронное письмо

Все хорошие электронные письма должны иметь по крайней мере следующие части:

Используйте правильный формат электронного письма. Организуйте ваше электронное письмо таким образом, чтобы первые несколько предложений рассказали, о чём это письмо. Последние несколько предложений должны быть заключением, которое подводит итог рабочего электронного письма. Заключение, также является хорошим способом для призыва к действию. Призыв к действию сообщает читателю электронное письмо, что делать дальше и как это сделать.

3. Проблема большинства писем

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

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

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

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

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

Многие компании считают, что вышеупомянутое письмо нелепое. Тем не менее, для бизнес-профессионала необычно писать письма быстро и без обдумывания. У некоторых из этих торопливо написанных электронных писем, те же проблемы что и у нашего примера.

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

Давайте внимательно рассмотрим каждую часть письма, чтобы определить, что не так. Вот некоторые из проблем:

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

4. Теперь отформатируем эти электронные письма правильно

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

Давайте посмотрим, что мы сделали, чтобы улучшить электронную почту:

Подсказка: это электронное письмо может быть ещё улучшено, если добавить профессиональный шаблон подписи электронного письма, такой как те, что найдены на рынке Envato. Вот три примера того, как можно использовать профессиональный шаблон подписи электронного письма:

Узнайте больше о том, как составить профессиональную подпись электронного письма:

Вот пример неформального электронного письма, переписанное и переформатированное, для передачи более профессионального образа.

Что изменилось? Давайте посмотрим:

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

Вы можете узнать ещё больше о создании эффективных электронных писем в этом уроке Tuts+ от Дэвида Мастерса:

5. Как избежать катастрофы в письме

Вот четыре простых совета для написания правильных деловых писем:

Не спешите. Электронное письмо, написанное в спешке, часто — плохо отформатированное и плохо написанное письмо. Предоставьте себе достаточно времени, чтобы правильно отформатировать каждое электронное письмо, которое вы пишете.
Избегайте эмоций. Никогда не рекомендуется отправлять электронное письмо, когда вы расстроены. Вместо этого подожди, пока вы не успокойтесь.
Будьте кратки. Используйте короткие предложения и короткие абзацы. Если необходимо, используйте маркированные или пронумерованные списки.
Просмотр. Дважды проверьте электронное письмо на наличие опечаток, грамматических и других ошибок. Также, хорошей мыслью будет убедиться, что присутствуют все части электронного письма.

Ваши деловые письма важны!

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

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

Чтобы узнать, как писать эффективные электронные письма, ознакомьтесь с нашим руководством по написанию эффективных электронных писем или начните с первого урока в серии из нескольких частей:

Хотите ещë получить профессиональные советы и лучшие схемы по работе с электронными письмами. Узнайте, как управлять вашим почтовым ящиком, быстрее обрабатывать электронную почту и управлять электронной почтой, как профи. Подпишитесь на рассылку Tuts + Business Newsletter и получите бесплатную электронную книгу Inbox Zero eBook.

Какие схемы для электронного письма подошли вам больше всего? Сообщите мне в комментариях.

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

На заметку . Единственное, что поменять нельзя, так это адрес ящика (логин). Подробнее об этом читайте здесь.

Яндекс.Почта

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

Откроется страница, где и можно изменить необходимые параметры. С левой стороны будет меню для перехода к другим настройкам.

Открывается страница со списком того, что можно изменить в почте.

Для изменения параметров почты от Google нужно нажать на картинку с изображением шестеренки в верхнем правом углу своего ящика.

Откроется новая страница. На сером фоне будет куча параметров, которые можно изменить.

Но это еще не все! Вверху есть закладки для редактирования других настроек.

Самые важные настройки

Из всей этой кучи настроек я выделил только три, которые действительно следует изменить – имя отправителя, фотография и подпись.

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

Где поменять

Яндекс.Почта : → Личные данные, подпись, портрет.

Для добавления подписи к письмам:

Как проверить

Вот какое письмо пришло в моем случае:

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

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