Все о почтовых ссылках: работа с mailto HTML
Основной функционал
<a href=”mailto:[email protected]”>Email Us</a>
| 1 | <a href=”mailto:[email protected]”>Email Us</a> |
Это работает! Но мы сразу же сталкиваемся с несколькими проблемами UX. Одной из них является то, что события после нажатия на эту ссылку удивляют некоторых людей и им это не нравится. Что-то вроде того, как человек кликает по ссылке на PDF-файл, и открывается файл вместо веб-страницы. Легкий вздох. Мы вернемся к этому немного позже.
«Открыть в новой вкладке» иногда важно
Если у пользователя почтовый клиент по умолчанию (например, Outlook, Apple Mail и т. д.) настроен как отдельное приложение, это не имеет значения. Они нажимают на mailto: ссылку, открывается это приложение, создается новое электронное письмо, и оно ведет себя одинаково независимо от того, пытались ли вы открыть эту ссылку в новой вкладке или нет.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Но если у пользователя настроен почтовый клиент на основе браузера, это имеет значение. Например, вы можете разрешить Gmail обрабатывать электронную почту по умолчанию в Chrome. В этом случае ссылка ведет себя как любая другая ссылка. Если вы не откроете новую вкладку, страница будет перенаправлена к Gmail.
Я не совсем уверен насчет этого. Раньше я рассматривал вопрос об открытии ссылок в новых вкладках, но не об открытии электронных писем. Я бы сказал, что скорее склоняюсь к использованию target=»_blank» для таких ссылок, несмотря на свои чувства по поводу использования открытия в новой вкладке в других сценариях.
<a href=”mailto:[email protected]” target=”_blank” rel=”noopener noreferrer”>Email Us</a>
| 1 | <a href=”mailto:[email protected]” target=”_blank” rel=”noopener noreferrer”>Email Us</a> |
Добавление темы и тела письма
По какой-то причине это можно увидеть довольно редко, но mailto: ссылки позволяют также определять тему и содержание письма.
Это просто параметры запроса!
mailto:[email protected]?subject=Important!&body=Hi.
| 1 | mailto:[email protected]?subject=Important!&body=Hi. |
Добавление поддержки для копии и скрытой копии письма
Вы можете отправлять электронную почту на несколько адресов и даже копии (CC) и скрытые копии (BCC). Трюк заключается в добавлении дополнительных параметров запроса и разделении запятыми адресов электронной почты.
mailto:[email protected][email protected],[email protected],[email protected]&[email protected]
| 1 | mailto:[email protected][email protected],[email protected],[email protected]&[email protected] |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Полезный сайт
Используйте form, чтобы люди сначала создали электронное письмо
Я не уверен, насколько это полезно, но любопытно, что вы можете создать form, выполняющую запрос GET, который по сути является перенаправлением на URL-адрес — и этот URL может быть в формате mailto: с параметрами запроса, заполненными входными данными! Его можно даже открыть в новой вкладке.
=”mailto:”]::after { content: ” (📨↗️)”;}
Если вам не нравятся mailto: ссылки, у вас есть расширение для браузера
https://ihatemailto.com/
Оно блокирует такую ссылку, но копирует адрес электронной почты в буфер обмена и сообщает, что сделало это.
Автор: Chris Coyier
Источник
Как просмотреть HTML-код электронного письма?
Каждый, кто занимался дизайном маркетинговых писем, сталкивался с чьей-то работой, и им понравилось то, что они увидели. В такие времена вы, вероятно, хотели бы знать, как использовать их идею или макет в своем следующем электронном письме или кампании. К счастью, есть способы узнать, что они сделали.
Несмотря на то, что для некоторых приложений сообщения электронной почты в виде обычного текста по-прежнему подходят, большинство маркетинговых электронных писем содержат большое количество контента и являются интерактивными.
Они быстро реагируют и используют контролируемое раскрытие информации, чтобы упростить навигацию по ним независимо от устройства.
Что такое HTML-код в электронном письме?
Если у вас нет опыта работы с HTML-кодом, вы все равно можете просматривать код из каждого получаемого вами электронного письма без специального программного обеспечения. Доступ к коду возможен с рабочего стола и веб-клиентов.
Точно так же, если вы создаете свои шаблоны из Campaign Monitor, вы также можете проверить базовый HTML. Вы даже можете скачать, изменить и загрузить его снова.
И если у вас нет желания изучать программирование, это тоже нормально. Редактор Campaign Monitor с функцией перетаскивания позволяет легко создавать красивые электронные письма, даже не прикасаясь к коду и не редактируя его.
Как просмотреть HTML-код в Outlook?
В Microsoft Outlook дважды щелкните, чтобы открыть сообщение электронной почты. Вы увидите меню «Действия» на вкладке «Сообщение». Нажмите на это меню и выберите «Другие действия», затем нажмите «Просмотреть исходный код», чтобы увидеть HTML-код.
Независимо от того, какой у вас текстовый редактор по умолчанию, файл HTML будет открываться как файл .txt.
Как просмотреть HTML-код в Gmail?
Если вы используете веб-клиент Gmail, вы можете щелкнуть правой кнопкой мыши письмо и выбрать «Просмотреть исходный код страницы». Однако это покажет вам весь HTML-код веб-страницы, включая информацию о сообщении.
Использование Outlook, подключенного к вашей учетной записи Gmail, позволит вам напрямую просматривать HTML-код письма.
Как просмотреть HTML в Campaign Monitor?
В Campaign Monitor вы можете увидеть HTML-код в окне предварительного просмотра. После того, как вы разработали свой шаблон, вы можете открыть окно предварительного просмотра на странице «Снимок кампании» и выбрать «Просмотреть исходный код страницы».
Вы можете сохранить файл, щелкнув правой кнопкой мыши и выбрав «Сохранить как» или скопировав текст и вставив его в свой любимый текстовый редактор с поддержкой HTML.
Это позволит вам изменить HTML-код локально, а затем повторно импортировать его в Campaign Monitor для использования в будущих кампаниях.
Обратите внимание, что после того, как вы измените HTML-код и снова импортируете его в онлайн, вы больше не сможете изменять его с помощью пользовательского интерфейса. Вам придется вносить все будущие изменения в адрес электронной почты в коде HTML.
Как измерить эффективность HTML-кода электронной почты
HTML делает возможным доставку эффективных и отзывчивых электронных писем. Хотя обычные текстовые электронные письма также хорошо работают для некоторых целей или аудиторий, маркетологи обычно предпочитают рекламировать свои продукты или услуги с помощью электронных писем в формате HTML.
Отслеживая показатели открытия и кликабельности, вы будете знать, какой формат подходит для вашего конкретного бренда и вашей конкретной аудитории.
Также сегментируя открываемость по устройствам, вы увидите, когда ваши электронные письма не оказывают желаемого эффекта на мобильных клиентов.
Разве это имеет значение?
С помощью современных электронных писем в формате HTML вы можете добавлять фоны, видео, кнопки и почти все, что есть на веб-страницах. Вы также можете убедиться, что ваши электронные письма реагируют независимо от устройства, используемого для их открытия.
Еще одна замечательная особенность электронных писем на основе HTML — это аналитика, которую они собирают для маркетологов. С электронными письмами на основе HTML вы можете отслеживать каждое взаимодействие, которое делает получатель.
С настоящими текстовыми электронными письмами дело обстоит иначе. Однако электронные письма с простым текстом, которые на самом деле представляют собой электронные письма в формате HTML, отформатированные так, чтобы они выглядели как обычный текст, могут включать аналитику.
Что теперь?
Если вы хотите узнать больше об использовании HTML-кодирования в своих электронных письмах, ознакомьтесь с этим руководством, чтобы узнать больше о том, как использовать его в шаблонах.
Хотя вы можете знать HTML и CSS, есть несколько предостережений при их использовании для разработки электронных писем с поддержкой HTML, поэтому важно с ними ознакомиться.
&двоеточие; Элемент «Контактный адрес» — HTML: Язык гипертекстовой разметки
HTML-элемент
Контактная информация, предоставляемая содержимым элемента , может принимать любую форму, подходящую для контекста, и может включать любой тип необходимой контактной информации, такой как физический адрес, URL-адрес, адрес электронной почты, номер телефона. , идентификатор в социальных сетях, географические координаты и т. д. элемент должен включать имя лица, людей или организации, к которым относится контактная информация.
может использоваться в различных контекстах, таких как предоставление контактной информации компании в заголовке страницы или указание автора статьи путем включения элемента в 
| Категории контента | Вытекающее содержимое, пальпируемое содержимое. |
|---|---|
| Разрешенный контент | Потоковое содержимое, но без вложенного элемента , без заголовка
содержимое ( , , , , ), без разделов
( <артикул> , <в стороне> , <раздел> , <заголовок> или <нижний колонтитул> элемент. |
| Отсутствие тега | Нет, начальный и конечный теги обязательны. |
| Разрешенные родители | Любой элемент, принимающий
содержимое потока, но всегда исключая элементов (согласно
логическому принципу симметрии, если <адрес> тег, как родитель, не может иметь вложенных <адрес> элемент, далее то же самое <адрес> содержание не может иметь <адрес> тег в качестве родителя). |
| Неявная роль ARIA | Нет соответствующей роли |
| Разрешенные роли ARIA | Любой |
| Интерфейс DOM | HTMLЭлемент До Gecko 2.0 (Firefox 4),
Gecko реализовал этот элемент с помощью Интерфейс HTMLSpanElement |
Этот элемент включает только глобальные атрибуты.
- Элемент
- Этот элемент не должен содержать больше информации, чем контактная информация, например, дату публикации (которая относится к
<время>элемент). - Обычно элемент
текущего раздела, если таковой имеется.
В этом примере показано использование для разграничения контактной информации автора статьи.
<адрес> Вы можете связаться с автором по адресу www.somedomain.com.
Если вы видите какие-либо ошибки, пожалуйста, связаться с веб-мастером.
Вы также можете посетить нас:
Фонд Mozilla
331 E Эвелин Авеню
Маунтин-Вью, Калифорния 94041
США
Результат
Хотя он отображает текст с тем же стилем по умолчанию, что и элементы или , более уместно использовать при работе с контактной информацией, так как он передает дополнительную информацию. семантическая информация.
| Спецификация |
|---|
| Стандарт HTML # the-address-element |
Таблицы BCD загружаются только в браузере
с включенным JavaScript.
