Html email link: Соединения электро

Содержание

Соединения электро

  • учебник HTML
  • чебное руководств HTML
  • Обзор HTML
  • Бирки HTML основные
  • Элементы HTML
  • Атрибуты HTML
  • Форматизация HTML
  • Бирки фразы HTML
  • Бирки меты HTML
  • Комментарий HTML и <! —….—> бирка
  • Изображения HTML
  • Таблицы HTML
  • Списки HTML
  • Соединения текста HTML
  • Соединения изображения HTML
  • Соединения электронной почты HTML
  • Рамки HTML
  • Iframes HTML
  • Блоки HTML
  • Предпосылки HTML
  • Цветы HTML
  • Купели HTML
  • Формы HTML
  • HTML врежет мультимедиа
  • Шатёр HTML
  • Коллектор HTML
  • Лист типа HTML
  • HTML Javascript
  • Планы HTML
  • HTML Referenzen
  • Справка бирки HTML
  • Справка атрибута HTML
  • Справка случаев HTML
  • Справка купелей HTML
  • Коды HTML ASCII
  • Следование таблицы ASCII
  • Имена цвета HTML
  • Реальности HTML
  • Типов носителя MIME
  • Зашифрование URL HTML
  • Коды ISO языка
  • Зашифрования характера HTML
  • Бирки Устаревшее HTML
  • HTML nützlich Ressourcen
  • Строитель таблицы расцветки HTML
  • Обсуждение HTML
  • Он-лайн редактор HTML
  • Selected Reading
  • UPSC IAS Exams Notes
  • Developer’s Best Practices
  • Questions and Answers
  • Effective Resume Writing
  • HR Interview Questions
  • Computer Glossary
  • Who is Who

Previous Page

Next Page  

Page Not Found

404 — Page Not Found

404

We’re sorry, but the page you were looking for doesn’t exist.

Here are some useful links

  • Tutorials Library
  • Videos
  • Q/A
  • Coding Ground
  • Dev Tools
  • Contact Us
  • FAQ’s

Mobile First
About us
  • Company
  • Our Team
  • Careers
  • Privacy Policy
  • Cookies Policy
  • Terms of use
  • Investors
Extra Links
  • Articles
  • Dev Tools
  • Free Graphics
  • File Conversion
  • Shared Tutorials
  • NetMeeting
  • Whiteboard

Своя трудная для того чтобы положить соединение электронной почты HTML на ваш webpage но ее может причинить ненужную проблему spamming для вашего учета электронной почты. Люди которые могут побежать программы для того чтобы сжать эти типы электронных почт и последне используйте их для spamming в различных путях.

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

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

Примечание: Вы выучите о формах HTML в формах HTML и вы выучите о CGI в наш другой консультационный программировать CGI Perl.

Бирка электронной почты HTML

Бирка <a> HTML снабубежит вам вариант specifiy адрес электронной почты для посылки электронной почты. Пока использующ бирку <a> как бирка электронной почты, вы будете использовать адрес mailto:email вместе с атрибутом href.

Следование синтаксис использования mailto вместо использования http.

<a href= "mailto:[email protected]">Send Email</a>

Этот Код произведет после соединения которое вы можете использовать для посылки электронной почты.

Send Email 

Теперь если потребитель щелкает это соединение, то, он запускает одного клиента электронной почты (как Lotus Notes, Outlook Express etc.) установленного на компьютер вашего потребителя. Другой риск для использования этого варианта послать электронную почту потому что если потребитель не имеет клиента электронной почты установленного на их компьютер после этого, то не было бы возможно послать электронную почту.

Начальные установкы

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

<a href="mailto:[email protected]
com?subject=Feedback&body=Message"> Send Feedback </a>

Этот Код произведет после соединения которое вы можете использовать для посылки электронной почты.

Send Feedback

Previous Page Print Page Next Page  

Как использовать ссылки mailto: и tel: — Блог HTML Academy

Ссылки tel: нужны, чтобы сделать кликабельным номер телефона на сайте, а через mailto: можно отправить целое письмо, в котором сразу будут заполнены и адрес, и тема, и даже какой-нибудь текст. Иногда это удобно — пользователю не нужно набирать номер телефона вручную, а письмо в службу поддержки можно начать сразу с конкретной темы.

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

mailto:

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

<a href="mailto:[email protected]">Напишите нам</a>

Текст письма указывается с помощью параметра body

<a href="mailto:[email protected]&body=привет">Напишите нам</a>

За тему письма отвечает параметр subject.

<a href="mailto:[email protected]&body=привет?subject=вопрос">Напишите нам</a>

Можно даже указать кого-то в копии, для этого используются параметры cc и bcc.

<a href="mailto:[email protected]&[email protected]?body=Привет, подпишитесь на рассылку">Напишите нам</a>

Что произойдёт, если кликнуть на ссылку с

mailto

Откроется почтовая программа, в которой уже будут заполнены все нужные поля. Например, так ссылку выше обработает программа «Почта» в OS X:

Если почтовая программа по умолчанию не установлена, появится окно выбора программы.

Обратите внимание, что адреса с нестандартными символами, например, кавычками или дополнительными знаками @, нужно записывать особым образом.

=»mailto:»] { font-size: 16px; line-height: 32px; color: #000000; }

tel:

Ссылка на номер телефона размечается с помощью специального префикса перед номером телефона — tel:.

<a href="tel:+79001111111">+7-900-111-11-11</a>

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

Хорошо

<a href="tel:+78121111111">(812) 123-45-67</a>

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

Чуть хуже

<a href="tel:+78121111111">123-45-67</a>

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

Плохо

<a href="tel:1234567">123-45-67</a>

Телефоны с питерскими сим-картами дозвонятся по этому городскому номеру, но жители других городов попадут куда-то ещё.

Другое обязательное требование RFC 3966 — номер телефона, указанный в href, должен быть явно виден на странице.

Хорошо

Звоните <a href="tel:+79001111111">8-900-111-11-11</a> по любому поводу. 

Номер видно в тексте ссылки.

Плохо

<a href="tel:+79001111111">Звоните</a> по любому поводу.

Номер не видно в тексте ссылки, непредсказуемое поведение.

Что произойдёт, если кликнуть на ссылку с tel

На смартфоне откроется приложение-звонилка, в котором будет набран указанный в ссылке номер. Если открыть такую ссылку на компьютере, где есть программа для звонков, произойдёт то же самое. Но вообще то, что произойдет, сильно зависит от устройства и операционной системы, браузера и устройства. =»tel:»]:before { content: «\260e»; margin-right: 0.5em; }

Получится такой результат:

Дополнительные материалы по теме

  • RFC 6068 — The ’mailto’ URI Scheme
  • RFC 3966 — The tel URI for Telephone Numbers
  • The Current State of Telephone Links

Учитесь продуктивно

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

Регистрация

Ещё из рубрики «HTML»

Adobe покупают Фигму. Всё пропало?

Не факт, но есть разные мнения.

Работа с Git в Visual Studio Code

Один из способов работать с Гитом.

Как искать и выбирать npm-пакеты?

Шпаргалка для начинающих.

HTML/URL схема «mailto:»

Синтаксис

mailto:<E-mail>?<to>&<subject>&<body>&<cc>&<bcc>

Описание

URL-схема «mailto:« создаёт ссылку на E-mail адрес. При активации такой ссылки браузер запускает почтовую программу (если такая программа есть на компьютере пользователя).

Примечание

С помощью знака «?» (знак вопроса) адресу почты (через знак «&») могут быть добавлены дополнительные параметры.

Условия использования

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

Если в e-mail адресе встречаются спецсимволы, то их необходимо заменить на специальные символы заменители. Например,

[email protected] преобразуется в user%[email protected]xample.com.


Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.


Спецификация

RFC Название
1738 Uniform Resource Locators (URL)
3. 5. MAILTO…
2368 The mailto URL scheme
5436 Sieve Notification Mechanism: mailto
3508 The ‘mailto’ URI Scheme


URL-составляющие

Символы параметров

?
Символ присоединяющий к mailto: дополнительные параметры.
mailto:?subject=Work
mailto:[email protected]?subject=Work
&
Символ присоединения дополнительных параметров друг к другу. При использовании данной URL схемы в (X)HTML документе знак «&» АМПЕРСАНД [U+0026] всегда должен заменяться соответствующими символьными ссылками («&amp;»).

mailto:[email protected]?subject=Work&amp;[email protected]

Основной параметр

<E-mail>
Указывает E-mail адрес(-а) на который должно быть отправлено письмо.
Данному параметру может быть задано несколько E-mail адресов через специальные символы заменители запятой («%2C%20»). Так же вместо данного параметра или в дополнение к нему может быть указан дополнительный параметр «to».
mailto:[email protected]
mailto:[email protected]%2C%[email protected]%2C%[email protected]

Дополнительные параметры

to
Указывает E-mail адрес(-а) на который должно быть отправлено письмо. Данному параметру может быть задано несколько E-mail адресов через специальные символы заменители запятой («%2C%20»). Так же данный параметр может быть использован вместо или в дополнение к основному параметру <E-mail>.
mailto:[email protected]
mailto:[email protected]%2C%[email protected][email protected]%2C%[email protected]
mailto:[email protected][email protected]&amp;subject=Work
subject
Указывает тему письма. Для корректного отображения темы пробелы в теме необходимо заменить символами подчеркивания («_») или специальными символами заменителями («%20»). (Пробелы воспринимаются не всеми почтовыми программами.)

mailto:[email protected]?subject=Тема%20письма

body
Указывает содержание письма. Сделать перевод строки можно при помощи специальных символов заменителей («%0D%0A», где «%0D» ‒ возврат каретки, «%0A» ‒ перевод строки).

mailto:[email protected]?body=Строка1.%0D%0AСтрока2.

cc
Указывает адрес на который будет отправлена копия письма. Данному параметру может быть задано несколько E-mail адресов через специальные символы заменители запятой («%2C%20»).

mailto:[email protected][email protected]

bcc
Указывает адрес на который будет отправлена скрытая копия письма (адрес получателя скрытого письма не отображается у других получателей писем). Данному параметру может быть задано несколько E-mail адресов через специальные символы заменители запятой («%2C%20»).

mailto:[email protected][email protected]

HTML-ссылки mailto: пошаговое руководство

Ссылка mailto в формате HTML открывает клиент электронной почты посетителя по умолчанию при наличии ссылки. Этот тип ссылки позволяет пользователю быстро связаться с вами по электронной почте. Вы можете указать тему по умолчанию, CC, BCC и тело со ссылкой mailto.

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

Найдите подходящий учебный лагерь

  • Career Karma подберет для вас лучшие технологические учебные курсы
  • Доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите интересующий вас вопрос
Разработка программного обеспеченияДизайнОбработка и анализ данныхАналитика данныхПродажиUX-дизайнКибербезопасностьЦифровой маркетингИмя

Фамилия

Электронная почта

Номер телефона

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

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

HTML-ссылки mailto

HTML-ссылка mailto позволяет пользователю легко связаться с вами по электронной почте. При нажатии на ссылку mailto открывается почтовый клиент пользователя. Создается новое электронное письмо, адресованное электронной почте в ссылке mailto.

Самый распространенный способ связать электронное письмо в HTML — это использовать тег привязки с атрибутом href .

href будет указывать на адрес электронной почты, на который вы хотите отправить электронное письмо.

Вот синтаксис основной ссылки mailto:

 Электронная почта 

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

Ссылка mailto принимает следующее:

  • Электронная почта пользователя.
  • Тематическое поле.
  • Копия электронной почты.
  • Электронная почта скрытой копии.
  • Основной текст по умолчанию.

Давайте подробнее рассмотрим, как использовать HTML-ссылку mailto.

mailto Пример HTML

Мы создаем страницу «Свяжитесь с нами» на нашем веб-сайте, и нам нужна ссылка, по которой пользователям будет легко отправлять нам электронные письма. Мы можем реализовать эту ссылку, используя функцию ссылок HTML mailto email:

 
  <тело>
    <дел>
        

Свяжитесь с нами!

[email protected]

Если вы хотите добавить тему к электронному письму, это тоже можно сделать!

 
  <тело>
    <дел>
        

Свяжитесь с нами!

[email protected]

Наша ссылка mailto заключена в HTML-тег выше. Мы можем разбить строку mailto на три части:

  1. Ключевое слово href: mailto:
  2. Электронная почта: [email protected]
  3. Тема: ?subject=Mail from xyz.com

    24

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

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

 
  <тело>
       

Свяжитесь с нами!

<дел>
[email protected] com< /а>

Строка разбита следующим образом:

  1. Ключевое слово href: mailto:
  2. Электронная почта: [email protected]
  3. The CC: ? CC = [email protected] — Вы можете добавить несколько CC в качестве сменных значений
  4. . [email protected] — сюда также можно добавить несколько скрытых копий в виде значений, разделенных запятыми.
  5. Тема: &subject=Почта от xyz.com
  6. Тело: &body=Тело идет сюда

Электронное письмо со всей этой информацией создается и открывается в почтовом клиенте пользователя по умолчанию.

Заключение

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

Мы рассмотрели, как добавить ссылку mailto href в тег привязки. Эта ссылка означает, что пользователь может щелкнуть электронное письмо на веб-сайте, и он откроет свой почтовый клиент по умолчанию с предварительно заполненными данными. Если вам удобно, я бы посоветовал вам сделать то же самое, но с телефонными номерами или направлениями Google Map!

Хотите узнать больше о HTML? У нас есть руководство How to Learn HTML для вас. Это руководство содержит советы экспертов по изучению HTML. Вы также найдете список лучших учебных ресурсов, которые помогут вам углубить свои знания.

О нас: Career Karma — это платформа, предназначенная для того, чтобы помочь соискателям найти, изучить и подключиться к программам профессионального обучения для продвижения по карьерной лестнице. Узнайте о публикации CK.


Кристина Копецки

Кристина — опытный технический писатель, освещающий такие разнообразные темы, как Java, SQL, Python и веб-разработка. Она получила степень магистра музыки по игре на флейте в Канзасском университете и степень бакалавра музыки с дополнительными знаниями по французскому языку и средствам массовой информации в штате Юго-Восточный Миссури. До прихода в команду Career Karma в июне 2020 года Кристина… читать дальше

Читать дальше Кристины Копецки

Поделись этим

Простое руководство по созданию электронной почты в формате HTML [+ бесплатные шаблоны]

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

Существует два основных типа электронных писем, которые вы можете отправлять и получать: обычные текстовые электронные письма (именно так они и звучат — любое электронное письмо, содержащее простой старый текст без форматирования) и электронные письма в формате HTML, которые отформатированы и оформлены с использованием HTML. и встроенный CSS.

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

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

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

См. шаблон электронной почты Pen HTML от HubSpot от Кристины Перриконе (@hubspot) на CodePen.

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

Как создать электронное письмо в формате HTML

Хорошие новости: на самом деле вам не нужно знать код, чтобы создать электронное письмо в формате HTML.

Большинство инструментов для создания и отправки электронной почты (например, HubSpot) предлагают предварительно отформатированные, готовые к работе HTML-шаблоны, которые позволяют создавать электронные письма без необходимости доступа к фактическому коду на сервере.

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

Все еще хотите создать электронное письмо в формате HTML с нуля?

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

В Интернете доступно множество бесплатных HTML-шаблонов электронной почты (о некоторых из них мы расскажем ниже), и если вы знаете, как работать с файлами HTML, обычно довольно просто адаптировать шаблон к зданию электронной почты. инструмент на ваш выбор.

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

Разрабатываете электронную почту в формате HTML специально для HubSpot?

Если вы разрабатываете HTML-шаблон электронной почты специально для использования в HubSpot, убедитесь, что вы включили необходимые токены HubL (они гарантируют, что ваши электронные письма могут быть настроены и соответствуют законам CAN-SPAM). Полное руководство по написанию HTML-шаблонов электронной почты для HubSpot можно найти здесь. Или, в качестве альтернативы, просто используйте наш простой редактор электронной почты «что видишь, то и получаешь».

Рекомендации по электронной почте в формате HTML

  1. Убедитесь, что ваше электронное письмо в формате HTML адаптировано для разных размеров экрана и устройств.
  2. Убедитесь, что ваш стиль работает в разных почтовых клиентах.
  3. Следите за тем, как долго загружаются электронные письма в формате HTML.
  4. Планируйте (насколько это возможно) несоответствия конечных пользователей.
  5. Проведите тщательное тестирование.

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

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

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

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

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

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

Помните, что разработка действительно отзывчивых электронных писем в формате HTML выходит за рамки структуры и формата вашего сообщения. Подумайте о том, как общий пользовательский опыт вашей электронной почты будет восприниматься на разных устройствах. Убедитесь, что ваш выбор шрифта так же разборчив на мобильных устройствах, как и на настольных компьютерах, и используйте удобные для мобильных устройств кнопки или призывы к действию вместо текста с гиперссылкой (вы когда-нибудь пытались нажать на небольшую строку текста с гиперссылкой на мобильном телефоне? Это не очень просто). ).

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

2. Убедитесь, что ваш стиль работает в разных почтовых клиентах.

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

К счастью, если вы знаете, как самые популярные почтовые клиенты загружают те или иные элементы HTML и CSS, вы можете создать достаточно единообразный интерфейс для разных почтовых ящиков пользователей. Все дело в том, чтобы знать, каких неподдерживаемых тегов следует избегать, и соответствующим образом адаптироваться. В этом подробном руководстве объясняется, как самые популярные почтовые клиенты (включая Gmail и несколько версий Outlook) поддерживают и отображают различные элементы стиля.

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

3. Следите за тем, сколько времени требуется для загрузки ваших писем в формате HTML.

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

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

Используйте изображения экономно.

Таким образом, вы подкрепите сообщение, которое хотите донести до подписчиков. Всегда используйте компрессор изображений (например, Compressor.io), чтобы максимально уменьшить размер файла. Большинство компрессоров изображений могут значительно уменьшить размер файла изображения без ущерба для качества, поэтому этот дополнительный шаг не повредит визуальной целостности вашего электронного письма.

Использовать стандартные веб-шрифты.

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

Попробуйте минификатор HTML.

Минимизатор HTML (например, minifycode.com и smallseotools.com) автоматически удаляет код, который не нужен в файле HTML. Повторяющиеся лишние элементы будут удалены, но фактический рендеринг вашего электронного письма должен остаться прежним (всегда проверяйте!). Каждая строка кода влияет на то, сколько времени требуется для загрузки электронного письма, поэтому время, потраченное на удаление нежелательного кода, может положительно повлиять на время загрузки.

Сосредоточьте свое сообщение на одной цели.

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

4. Планируйте (насколько это возможно) несоответствия конечных пользователей.

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

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

Но вы не должны быть совершенно беспомощны перед этими переменными — вам просто нужно немного заранее спланировать.

Рассмотрите возможность создания веб-версии электронной почты.

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

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

Создайте версию электронной почты в текстовом формате.

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

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

Большинство почтовых инструментов, таких как HubSpot, автоматически предоставляют текстовую версию, которая отображается, если это требуется почтовому серверу получателя, но если вы кодируете электронное письмо в формате HTML с нуля, вам потребуется создать нечто, называемое составным сообщением MIME.

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

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

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

5. Проведите тщательное тестирование.

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

Некоторые инструменты электронной почты (например, HubSpot) предлагают тестирование в приложении в своих конструкторах электронной почты, чтобы упростить процесс. Если вы работаете с нуля, вы можете использовать такой инструмент, как HTML Email Check или PreviewMyEmail, чтобы лучше понять, как ваша электронная почта будет выглядеть в разных почтовых клиентах и ​​устройствах.

Простые и бесплатные HTML-шаблоны электронной почты

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

1. Бесплатный HTML-шаблон электронной почты HubSpot

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

2. HTML-шаблон электронной почты с новостями компании от Campaign Monitor

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

3. Бесплатный HTML-шаблон электронной почты от Unlayer

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

4. МИНИмалистский бесплатный HTML-шаблон электронной почты

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

5. Бесплатные HTML-шаблоны электронной почты от Bee Free

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

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

6. Бесплатный HTML-шаблон электронной почты от Campaign Monitor

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

Создавайте электронные письма в формате HTML, чтобы увеличить количество подписчиков

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

Примечание редактора: этот пост был первоначально опубликован в июне 2019 года и обновлен для полноты.

 

Первоначально опубликовано 10 июня 2021 г., 7:00:00, обновлено 20 апреля 2022 г.

Темы:

Маркетинг по электронной почте Инструменты маркетинга по электронной почте

Не забудьте поделиться этой публикацией!

HTML-ссылки электронной почты — как добавить тему и основной текст

В этом посте объясняется, как создавать сложные HTML-ссылки электронной почты для вашего веб-сайта или блога, включая добавление темы электронного письма и основного текста. Проведя небольшое исследование для этого поста, я обнаружил, что в Интернете очень мало ресурсов, подробно описывающих продвинутые приемы кодирования, которые вы можете использовать для настройки ссылок электронной почты с помощью HTML. Так вот, чтобы внести ясность…

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

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

  • тему
  • основной текст
  • поле CC (копия)
  • поле BCC (слепая копия)

Базовый код

Базовый код для создания ссылки электронной почты в формате HTML выглядит следующим образом:

 Ваш видимый текст ссылки 

Видимая ссылка текст зажат между двумя фрагментами кода, которые сначала открывают, а затем закрывают элемент привязки (ссылки) . Гипертекстовая ссылка (href) всегда начинается с mailto: 

Давайте разберемся…

1. Начните с текста ссылки, т.е. Напишите мне по электронной почте
2. Соедините его с открывающимся и закрывающимся анкерным элементом.

    Напишите мне по электронной почте    

3. Добавьте команду гиперссылки и в кавычках добавьте адрес электронной почты.

  href="mailto:[email protected]"  >Напишите мне по электронной почте 

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

Как создать ссылку электронной почты в WordPress?

Чтобы создать этот базовый код на своем веб-сайте WordPress, выполните ту же процедуру, что и для создания обычной веб-ссылки. Выделите текст, нажмите кнопку инструмента ссылки  и введите mailto: , а затем адрес электронной почты (без пробелов).

 mailto:[электронная почта защищена] 

Добавляете собственный заголовок темы письма?

Для предварительного заполнения заголовка темы вы добавляете ?subject= , за которым сразу следует ваша тема.

 Текст вашей видимой ссылки 

Подождите секунду… что это за фрагмент кода %20?

В атрибуте href нельзя использовать пробелы, поэтому мы заменяем каждый пробел на %20 

Вот еще один пример:

 Видимый текст ссылки 

Хорошо, я понял. Как добавить основной текст к HTML-ссылкам электронной почты?

Для предварительного заполнения сообщения электронной почты с основным текстом вы добавляете ?body= например:

 Ваш видимый текст ссылки 

Как совместить тему и основной текст?

Для объединения нескольких команд помимо адреса электронной почты требуется всего один вопросительный знак ? в начале, который запускает запрос. Затем вы добавляете амперсанд и между каждой командой. Например:

 Ваш видимый текст ссылки 

Итак, первая команда начинается с ? и последующие команды начинаются с и

Какие еще поля электронной почты я могу предварительно заполнить?

Как упоминалось ранее, вы можете предварительно заполнить:

  • тему (  тема=  )
  • основной текст (  body=  )
  • поле CC (копия) (  cc=  )
  • поле BCC (скрытая копия) (  bcc=  )

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

Позвольте разбить информацию на небольшие фрагменты

1. Начните с видимого текста

  Напишите мне по электронной почте  

2. Откройте опорную точку перед видимым текстом

    Напишите мне 

3. Закройте точку привязки после видимого текста

 Напишите мне по электронной почте    

4. Добавьте команду адреса электронной почты к атрибуту гиперссылки

 Напишите мне 

5. Добавьте адрес электронной почты

 Напишите мне 

6. Добавьте команду темы

 Напишите мне 

7. Добавьте тему

 Напишите мне 

8. Добавьте команду основного текста

 Напишите мне 

9. Добавьте основной текст

 Напишите мне 

10. Продолжайте добавлять другие команды, если хотите

 Напишите мне 

Вот код в действии → ссылка по электронной почте

Если вы используете WordPress…
Выделите видимый текст ссылки. Нажмите кнопку ссылки. Затем просто добавьте код гиперссылки между кавычками » . (начиная с mailto: )

Совет
Убедитесь, что в кавычках href нет пробелов.

 

Другие интересные настройки, которые не упоминаются на большинстве других веб-сайтов!!

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

Общие символы абзаца

Символ Код
Добавление одиночного возврата каретки (разрыв строки) %0D
Добавление двойного возврата каретки %0D%0D
Точка . %2E
Запятая  , %2С
Восклицательный знак  ! %21
Вопросительный знак  ? %3F
Речевые знаки  “ %22
Одинарная кавычка  ‘ %27
Амперсанд и %26

Менее распространенные символы

Символ Код
@ %40
Открывающая скобка / квадратная скобка  ( %28
Закрывающая скобка / квадратная скобка  ) %29
Двоеточие : %3А
Точка с запятой  ; %3B
Дефис/тире — %2D
Косая черта  / %2F
Звездочка * %2А
Знак плюс  + %2B
Знак равенства  = %3D
Подчеркивание _ %5F
Символ решетки  # %23
Тильда ~ %7E

Немного потренировавшись и набравшись терпения, вы скоро станете ниндзя ascii. 😉

 

Поищите в Google ASCII-арт, чтобы найти еще что-то подобное.

Надеюсь, эта статья оказалась для вас полезной. Если вы это сделали, рассмотрите возможность поделиться им или добавить комментарий ниже.

Best,
Команда Zaposphere

Безопасность и защита | мое социальное обеспечение

Подтверждение личности

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

Готовы зарегистрироваться? Теперь вы можете создать новую учетную запись my Social Security через нашего партнера по учетным данным, Login.gov, или вы можете получить доступ к своей информации, используя свою учетную запись ID. me, если она у вас есть.

  • Login.gov — это ваша единственная государственная учетная запись для простого, безопасного и частного доступа к участвующим правительственным учреждениям США.
  • ID.me — это поставщик услуг единого входа, который соответствует требованиям правительства США к онлайн-подтверждению личности и аутентификации.

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

Создать учетную запись Войти

Щелкните здесь для получения дополнительной информации о том, как войти в систему или создать учетную запись.

Защита вашей учетной записи

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

Как обнаружить фишинговое письмо, выдаваемое за социальное обеспечение?

  • Большинство электронных писем от Social Security приходят с адреса электронной почты «.gov». Если адрес электронной почты не заканчивается на «.gov», соблюдайте осторожность, прежде чем открывать вложения или нажимать изображения или ссылки в электронном письме. В настоящее время Social Security отправляет электронные письма с адресов [email protected], [email protected], [email protected], [email protected] и echosign.com
  • .
    • В некоторых случаях мы используем маркетинговые фирмы для повышения осведомленности об онлайн-услугах Social Security, включая создание моей учетной записи Social Security. Мы разрешаем этим фирмам отправлять электронную почту напрямую физическим лицам. Любые ссылки, которые вы найдете в этих электронных письмах, всегда должны указывать на веб-адрес «.gov/».
  • Ссылки, логотипы или изображения в теле официального электронного письма службы социального обеспечения всегда будут направлять вас на официальный веб-сайт службы социального обеспечения. Вместо того, чтобы полагаться на то, как выглядит ссылка, выполните следующие действия, чтобы подтвердить подлинность ссылки:
    • Чтобы проверить веб-адрес ссылки или изображения, наведите на них указатель мыши, пока не появится текстовое поле с веб-адресом. Это фактический адрес, на который вас перенаправят, и он всегда должен включать «.gov/». Косая черта всегда должна следовать за доменом «.gov».
    • Пример
    • — https://www.ssa.gov/myaccount/
    • Ссылки на официальный сайт социального обеспечения всегда начинаются с https://www.ssa.gov/ или https://secure.ssa.gov/.
  • Ниже приведены примеры мошеннических веб-сайтов, якобы направляющих вас в Службу социального обеспечения. Обратите внимание на расположение косой черты.
    • https://www.socialsecurity.gov.gmx.de/
    • http://www.socialsecurity.gov.bx.co.rx/setup

Что делать, если я получил фишинговое электронное письмо, якобы отправленное Службой социального обеспечения?

  • Если вы не уверены, что электронное письмо, которое вы получили, поступило от Службы социального обеспечения или одной из наших маркетинговых фирм, НЕ НЕ отвечайте на электронное письмо и не нажимайте на какие-либо ссылки, содержащиеся в электронном сообщении.
  • Сообщите об инциденте, переслав подозрительное электронное письмо в Группу готовности к компьютерным чрезвычайным ситуациям США (US-CERT) по адресу [email protected] (http://www.us-nocert.gov/nav/report_phishing.html).

Какие еще советы я могу использовать для обнаружения фишинговых писем?

  • Проверьте отправителя. Будьте осторожны при получении электронной почты от отправителя, которого вы не знаете или о котором давно не слышали. Наведите указатель мыши на адрес электронной почты «От», чтобы убедиться, что он совпадает с отображаемым адресом электронной почты или именем отправителя.
  • Ищите неправильный выбор формулировки, формулировки или правописания.
  • Если электронное письмо содержит название компании, номер телефона или ссылку на веб-сайт, проверьте легитимность этих элементов, выполнив поиск официального номера или веб-сайта в поисковой системе.
  • Не отвечайте на электронные письма с запросом личной информации. Компании с хорошей репутацией и государственные учреждения не будут запрашивать у вас личную информацию по электронной почте.

Есть ли другие ресурсы, которые я могу использовать, чтобы узнать больше о фишинге?

Во избежание проблем с безопасностью обновляйте веб-браузер. Для получения дополнительной информации о «фишинге» перейдите на сайт OnGuard Online.

Часто задаваемые вопросы о веб-сайте W3C

Ниже приведены часто задаваемые вопросы и ответы о веб-сайте W3C.

  • W3C рассылает мне спам?
  • Я вижу кое-что о W3C в исходный код веб-страницы. Означает ли это W3C отвечает за страницу?
  • Я потерял свой пароль / Забыл логин своей учетной записи
  • Какие системы аутентификации использует W3C на своем сайте?
  • Куда отправлять комментарии о w3. org?
  • Я столкнулся с технической проблемой на сайте W3C.
  • Почему сайт W3C не проходит полную проверку?
  • Какие доменные имена используются W3C?
  • Могу ли я выполнять поиск на веб-сайте W3C?
  • Можно ли удалить мою электронную почту из общедоступного архива списка?
  • Почему W3C блокирует мой IP?
  • Серверы W3C работают медленно вернуть DTD или схемы. Задержка намеренно?
  • Будет ли W3C ссылаться на мой продукт с w3.org?
  • У вас есть список всех DTD? или схемы доступны от W3C?
  • Почему мой браузер пытается загрузить страницу вместо отображения Это?
  • Служба W3C X или Y вниз? (системные сбои)

W3C рассылает мне спам?

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

Есть две причины, по которым вы можете подумать, что W3C отправляет спамите, однако.

1. Вы нашли «w3.org» в источнике документа или электронной почты

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

  

Многие люди видят этот текст и делают вывод, что W3C что-то сделал с созданием документа. Все, что означает этот текст, это то, что текст был написан на HTML, языке, определенном и поддерживается W3C. Текст означает ли , а не , что W3C как-то связан с созданием самого документа.

2. Кто-то подделал электронную почту, чтобы она выглядела так, как будто она была отправлена ​​W3C

К сожалению, люди иногда подделывают адреса электронной почты. Многие адреса электронной почты W3C хорошо видны публике, и это делает их мишенью для подделки. Таким образом, вы можете получить спам с адреса w3.org, но это означает только то, что адрес был использован для отправки поддельного электронного письма.

Я вижу кое-что о W3C в исходный код веб-страницы. Означает ли это, что W3C отвечает за страницу?

Нет. См. комментарии к исходному коду выше.

Примечание: W3C не может вам помочь определить владельца страницы, которой нет на w3.org.

Я потерял пароль / Забыл логин

Вы можете восстановить потерял пароль и увидеть больше информации о счетах.

Какие системы аутентификации использует W3C на своем сайте?

W3C обычно использует базовую аутентификацию HTTP для большинства ресурсы, требующие имя пользователя и пароль. По состоянию на сентябрь 2020 мы начинаем экспериментировать с формой и входы на основе файлов cookie, которые в настоящее время развернуты на защищенных области списка рассылки хост архива.

Мы рекомендуем вам сообщить нам, отправив сообщение на [email protected] с URI (то есть веб-адресом) страницы, о которых идет речь. То есть публично архивный список рассылки.

У меня возникла техническая проблема с сайтом W3C

Пожалуйста, напишите на [email protected] с точным описанием ваших технических проблема.

Почему сайт W3C не полностью подтвердить?

Обратите внимание на страницу редизайна нашего сайта.

Какие доменные имена используются W3C?

w3.org. Два наиболее распространенных варианта использования, которые вы увидите, это «www.w3.org». и «lists.w3.org» (для наших почтовых архивов).

Если доменное имя другое, оно, вероятно, не связано с W3C. Если вы найдете «w3.org» в содержании страницы, это, скорее всего, просто связано с тем, что страница HTML; увидеть наш FAQ вопрос по спаму.

Могу ли я выполнять поиск на веб-сайте W3C?

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

Можно ли удалить мою электронную почту из общедоступного архива списка?

Обычно нет. См. запись часто задаваемых вопросов на редактирование архива.

Почему W3C блокирует мой IP-адрес?

W3C, скорее всего, блокирует ваш IP-адрес из-за чрезмерного трафика; часто это связано с повторным запросом у нас одного и того же ресурса (например, документ DTD, Schema, Entity или Namespace). директивы кэширования, и действительно нет причин запрашивать один и тот же ресурс снова и снова, когда он не собирается меняться. В вашей XML-библиотеке или утилите, вероятно, есть средства для использования XML-каталога. и/или иметь механизм кэширования; обратитесь к документации по как использовать такие функции. Если таких вариантов нет, следует обратитесь к стороне, ответственной за используемую библиотеку или утилиту. Вы можете также поместите кеширующий прокси-сервер между вашим сервером приложений и интернет.

Серверы W3C медленно возвращают DTD. Является ли задержка преднамеренной?

Да. Из-за различных программных систем скачивая DTD с нашего сайта миллионы раз в день (несмотря на кеширование директивы наших серверов), у нас есть начали обслуживать DTD и схемы (DTD, XSD, ENT, MOD и т.д.) с нашего сайта с искусственная задержка. Наши цели при этом должны привлечь больше внимания к нашим текущим вопросы с чрезмерным DTD-трафик, а также для защиты стабильность и время отклика остальных наш сайт. Мы рекомендуем кэширование HTTP или файлы каталога для повышения производительности.

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

Есть ли у вас список всех DTD или схем, доступных в W3C?

№ Каждая спецификация содержит ссылки на полезные ресурсы (например, как DTD и схемы) для этого Технические характеристики. Поисковая система также должна быть полезным в поиске определенного DTD или Схема.

Почему мой браузер пытается загрузить страницу вместо отображать его?

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

См. системы страница состояния. Если вы столкнулись с проблемой нет в списке, пожалуйста, отправьте электронное письмо по адресу сайт-комментарии@w3.org.

Проблемы с отображением электронной почты Outlook и способы их решения

Перейти к основному содержанию
  • Создание электронной почты
  • Дизайн электронной почты

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

Электронные письма Outlook, не отображающие должным образом электронные письма в формате HTML, долгое время были основным продуктом в книге по электронной почте, вызывающей раздражение. Но так ли это должно быть? Узнайте, как преодолевать препятствия Outlook и создавать динамичные, привлекательные электронные письма, которые наверняка будут выглядеть великолепно… даже в Outlook!

В этом посте вы узнаете:

  • Множество версий Microsoft Outlook
  • Как решить проблемы с отображением электронной почты Outlook
  • Код, который вам нужен, чтобы противостоять страхам Outlook

Множество версий Microsoft Outlook

Название «Outlook» охватывает несколько разных почтовых клиентов с несколькими разными механизмами рендеринга и как минимум двумя разными настройками просмотра. Все это может стать огромной головной болью, если вы позволите. Давайте погрузимся в различные версии Outlook.

Outlook 2007-2019

Это настольные версии Outlook для Windows. Они используют Word в качестве механизма рендеринга, что имело смысл в то время, когда электронная почта была похожа на написание писем. (Ах, более простые времена.) Но для маркетологов электронной почты это не подходит для рендеринга электронных писем Outlook в формате HTML.

120 DPI (точек на дюйм) добавляет сложности. Пользователи Windows могут выбрать 120 DPI, чтобы увеличить разрешение экрана. Если они это сделают, почтовые клиенты для настольных компьютеров будут уважать это и будут обновлять изображения и текст, чтобы они были крупнее. К сожалению, это может нанести ущерб вашей электронной почте.

Outlook для Mac

Это настольная версия Outlook для Mac. Он использует Webkit в качестве механизма рендеринга. Это означает, что он обычно находится на одном уровне с Apple Mail и iOS в том, что касается рендеринга электронной почты. Если он хорошо выглядит в вашем браузере, есть большая вероятность, что он будет хорошо выглядеть в Outlook для Mac, и у вас будет меньше шансов, что ваше электронное письмо в формате html не будет отображаться должным образом.

Outlook.com и мобильные приложения Outlook

Эти клиенты используют Webkit или механизмы рендеринга на основе Webkit, поэтому они обеспечивают хорошее рендеринг HTML и обычно не нарушают работу ваших электронных писем.

Outlook Office 365

Существует две разные версии Outlook Office 365:

  • Настольный почтовый клиент
  • Веб-клиент электронной почты

Настольная версия аналогична Outlook 2007-2019 и использует Word в качестве механизма рендеринга (сложно для электронной почты). Веб-клиент электронной почты использует Webkit или Blink и отображает электронные письма аналогично Outlook.com (намного проще).

Больше неработающих писем

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

Узнайте, как →

 

Один Outlook, чтобы управлять ими всеми

В январе 2021 года Microsoft объявила о своем видении «Единого Outlook» по замене настольных клиентов одним клиентом, который будет работать везде, начиная с этого года.

Новый почтовый клиент Outlook будет основан на текущих веб-приложениях Outlook. Есть большие надежды, что он будет иметь механизм рендеринга на основе Webkit и будет отображать электронные письма в формате HTML, чтобы уменьшить вероятность того, что ваше электронное письмо в формате html не будет отображаться должным образом в Outlook. К сожалению, все эти старые настольные клиенты не исчезнут, когда это произойдет, поэтому их все равно придется поддерживать в некоторой степени.

Как решить проблемы с рендерингом электронной почты в Outlook: что можно и чего нельзя делать

Ключевым моментом является то, что мы работаем с двумя разными механизмами рендеринга — Word и Webkit. Webkit легче кодировать, а Word сложнее. Ни то, ни другое не обязательно хорошо или плохо, они просто требуют разных подходов и имеют разные особенности, которые необходимо учитывать.

Давайте рассмотрим некоторые распространенные проблемы с отрисовкой в ​​настольных клиентах Outlook и способы их решения.

Включите в изображения атрибуты ширины и высоты

Outlook не поддерживает стили CSS для ширины и высоты. Если вы не включите атрибуты ширины и высоты, Outlook отобразит ваше изображение в его реальном размере. Если вы используете изображения Retina (что и должно быть), это приведет к гигантским изображениям, которые сломают ваши электронные письма.

Изображение Retina без атрибута ширины в Outlook делает электронное письмо шире

Включите текст ALT

Не позволяйте сообщению безопасности Outlook говорить за ваши изображения. Не забудьте включить текст ALT; Outlook не отображает изображения по умолчанию, если люди не включают эту функцию.

Электронная почта в Outlook с заблокированными изображениями

Используйте таблицы

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

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

Используйте код, специфичный для Outlook, для решения проблем с отрисовкой

Это может не решить все ваши проблемы, но включение некоторых специфичных для Outlook CSS может помочь вам решить проблему с отрисовкой, которую вы видите только в Outlook. Или вы можете скрыть небольшой блок, если ваша электронная почта Outlook не отображается должным образом, и использовать условный код, чтобы показать версию, которая будет работать с для определенной версии Outlook. (Подробнее об условном коде позже.)

Добавлять высоту строки для небольших изображений или ячеек таблицы

Outlook устанавливает минимальную высоту для ячеек таблицы и изображений. Если вы используете ячейку таблицы в качестве разделителя или у вас есть небольшое изображение, обязательно добавьте к элементу атрибут line-height, равный высоте, которую вы хотите, чтобы они отображались. Например:

Исправьте проблемы масштабирования DPI

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

К счастью, есть решение. Во-первых, вы должны добавить пространство имен XML в тег HTML:

.

 

Затем добавьте код для исправления масштабирования изображения прямо перед тегом :

 

Наконец, не забудьте указать любую установленную ширину как свойства CSS с пикселями, а не как атрибут таблиц.

✗ Не для ширины=”600″:

 

✔ Да, вот так со стилем=”width:600px;”:

Это решит большинство ваших проблем для клиентов с разрешением 120 DPI. Взгляните на это параллельное сравнение таблиц до и после этого исправления:

8 8
Outlook 2013 с разрешением 120 DPI (без исправления) Outlook 2013 с разрешением 120 DPI (с исправлением)

 

Какая разница!

Не ожидайте, что эффекты наведения будут работать

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

Не полагайтесь на анимированные GIF-файлы, чтобы донести свою точку зрения

Клиенты Outlook для настольных ПК не поддерживают анимированные GIF-файлы. Вы можете сделать так, чтобы в начальном кадре отображалось изображение, которое вы хотите отобразить в Outlook, или вы можете скрыть анимированный GIF-файл из Outlook и использовать условное кодирование для отображения нужного неподвижного изображения. (h4) Не используйте интерактивный контент без запасного варианта

Интерактивные электронные письма в формате HTML — это большое «нет» для Outlook. Они зависят либо от кода AMP, либо от взлома флажка, ни один из которых не поддерживается в Outlook.

В случае AMP для электронной почты вместо AMP-файла будет отображаться HTML-файл, поэтому для этого не требуется дополнительное кодирование. Для интерактивности взлома флажка вам придется скрыть интерактивный контент и показать запасной вариант Outlook. Опять же, условное кодирование — ваш друг, когда дело доходит до электронных писем Outlook в формате HTML.

Не добавлять отступы и поля к изображениям

Outlook удаляет отступы и поля с изображений. Добавьте отступы к ячейке таблицы вокруг изображения или, если изображение находится в той же ячейке, что и копия, добавьте поле к тегу вокруг копии (

,

,

и т. д.).

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

Есть три типа кода, которые помогут сделать ваши электронные письма сияющими в этих клиентах: условное кодирование, свойства MSO и VML.

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

Условное кодирование

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

 

Вы даже можете использовать это для целевых версий настольных клиентов Outlook, добавив номера версий:

 

Outlook далеко не прост, поэтому номера версий не соответствуют названию почтового клиента:

  • Outlook 2000 = mso 9
  • Outlook 2002 = mso 10
  • Outlook 2003 = mso 11
  • Outlook 2007 = mso 12
  • Outlook 2010 = mso 14
  • Outlook 2013 = mso 15
  • Outlook 2016, Outlook 2019 и Office 365 desktop = mso 16
  • 9000 клиентов. где меньше (lt), больше (gt), меньше или равно (lte) или больше или равно (gte). Например:

    
     

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

    Вы также можете использовать условные комментарии, чтобы скрыть содержимое от Outlook, сказав «if !mso», что означает «если не mso»:

    Это видно во всех приложениях, кроме настольных клиентов Outlook

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

    Существуют также способы нацеливания на веб-клиенты, но нет способа нацелить один веб-клиент Outlook на другой. Поэтому, когда вы ориентируетесь на Outlook.com, вы также ориентируетесь на веб-клиент Office 365 (но не на настольный клиент).

    Вы можете ориентироваться на веб-клиенты Outlook, используя тот факт, что Outlook добавляет «x_» ко всем именам классов, но не делает этого для селектора атрибутов. Итак, если у вас есть класс «foo» и вы хотите по-разному относиться к нему для веб-клиентов Outlook, вы можете настроить его с помощью этого кода:

    [класс~="x_foo"] { }
     

    (Спасибо Марку Роббинсу за это исправление и Дилану Смиту за howtotarget.email.)

    Свойства MSO

    Как упоминалось выше, для Outlook можно добавить специальный CSS, который будет влиять только на настольные почтовые клиенты Outlook. Вот некоторые из наиболее распространенных:

    mso-hide: all;

    Это свойство скрывает все от настольных клиентов Outlook. Он удаляется при пересылке электронной почты, поэтому будьте осторожны с его использованием отдельно, если это функция, которую, как вы знаете, часто используют ваши подписчики. Вы можете соединить его с условным кодом «if not mso», если вы кодер «на всякий случай».

    mso-line-height-rule: точно;

    Это свойство гарантирует, что Outlook отображает высоту строки, указанную вами в свойстве line-height. Без этого Outlook не обязательно учитывает высоту строки. Если вы работаете в отрасли, где точность является ключевым фактором, вы, вероятно, хорошо знакомы с этим свойством.

    mso-padding-alt

    Это немного менее распространено, но позволяет объявить отступы, специфичные для Outlook. Если обычное заполнение, которое у вас есть в ячейке, не совсем правильно отображается в Outlook, вы можете использовать mso-padding-alt , чтобы установить значения, соответствующие вашему дизайну для Outlook.

    mso-ansi-font-size

    Это позволяет установить размер шрифта, характерный для Outlook. Если Outlook отображает ваш шрифт немного больше, чем в других почтовых клиентах, и вы получаете короткую последнюю строку копии, которую вы не хотели, добавьте mso-ansi-font-size и установите размер шрифта, который подходит для вашей копии. .

    Существует множество других свойств MSO, которые вы можете использовать, поэтому поэкспериментируйте, чтобы найти что-нибудь, что устранит проблему рендеринга.

    VML

    VML означает язык векторной разметки. Это версия SVG от Microsoft, но язык устарел и используется очень редко (ура, электронная почта!). У Microsoft есть документация по VML, заархивированная в Интернете, поэтому вы все равно можете посмотреть, как использовать ее для создания векторов в Outlook, где она все еще поддерживается. Теоретически, когда Microsoft перейдет на свою модель «One Outlook», мы сможем отказаться от VML.

    Обязательно включите объявление пространства имен VML. Обычно я добавляю его к элементу в моем стандартном шаблоне, чтобы я мог использовать VML всякий раз, когда мне нужно:

    
     

    После этого вы можете добавить любой VML в свой код внутри условий MSO:

     

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

    Протестируйте, чтобы убедиться, что рендеринг электронной почты Outlook проходит гладко!

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

    С помощью правильных инструментов вы можете создавать красивые электронные письма Outlook HMTL, которые правильно отображаются в Outlook. Ознакомьтесь с ресурсами в этом посте, чтобы создать свои навыки кодирования в Outlook, и протестируйте их в своих электронных письмах с помощью Litmus Builder и Email Previews. Думайте о кодировании для Outlook как о головоломке, ожидающей решения, и вы можете полюбить Outlook и все его причуды.