MailTo — что это и как в Html создать ссылку для отправки Емейла

Содержание материала:

«Как создать и отправить HTML-письмо для грамотной email-рассылки?»

Инструкция по созданию шаблона и отправке HTML-кода в письмах

Индивидуальный HTML шаблон письма с фирменным стилем, от 500 рублей. Свяжитесь со мной!

Польза HTML-писем и рассылок

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

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

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

С чего начать и как создать?

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

Создание HTML-письма по шаблону

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

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

Как отправить HTML-письмо?

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

В открывшемся коде, перед нами сразу предстанет строчка body .

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

Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

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

Ссылка на email. Полный формат ссылки типа mailto.

Обычно при указании ссылки на email используется короткая запись ссылки

Но можно использовать и дополнительные опции. Полный формат ссылки такой

mailto:[ mail address ] [?] [subject=subject] [&cc=mail address] [&bcc=mail address] [&body=message body]

Думаю тут всё ясно.
mail address — e-mail адрес
subject — тема сообщения
cc — email, на который отсылать копию письма
bcc — скрытый email адрес, на который отсылается письмо
body — сообщение, текст письма

То есть ссылка может иметь следующий вид:

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

При подстановке кириллических символов в тело письма и в тему возникли проблемы с кодировками. У меня MS Outlook Express 6.

Для решения проблемы использовал php функцию urlencode. Правда в почтовом клиенте Outlook так и остались вместо пробелов плюсы. Ну что ж, можно использовать str_replace

Делаем ссылку на e-mail

Обновлено 11.12.2015 г.

Наверное Вы не раз обращали внимание, что на многих сайтах есть ссылка вида: Написать автору (когда мы не видим истинного адреса электронной почты) или указывается e-mail адрес например вот так: [email protected] Кликнув на такую ссылку открывается почтовая программа, в которой уже частенько заполнены поля: Кому (e-mail адрес адресата), Тема письма , иногда еще некоторые необязательные параметры.

Из этой статьи Вы узнаете, как создаются такие ссылки на e-mail (на адреса электронной почты).

На самом деле все очень просто. Ссылка на e-mail (на адрес электронной почты) создается как и обычная ссылка, только вместо URL нужно прописать следующее:

mailto:адрес электронной почты

Чтобы понять как это сделать практически, смотрите код Листинга 1:

Листинг 1

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

Почтовая гиперссылка имеет несколько не обязательных параметров (которые можно не указывать):

Вот полный листинг почтовой ссылки, с указанием всех параметров:

Листинг 2

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

Попробуйте кликнуть: Написать автору сайта. Очень удобно. Это кстати мой реальный адрес и если Вы сейчас отправите что-то отсюда, то я получу ваше письмо.

Удачи.

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

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Дмитрий
Дата: 2010-12-16

спасибо, очень полезная статья

Комментарии добавил(а): Лина
Дата: 2010-12-24

Спасибо! как все оказывается просто 🙂

Комментарии добавил(а): АндрейК
Дата: 2010-12-24

Комментарии добавил(а): brea
Дата: 2011-01-05

Я искала Ваш материал, наверное, сотню лет. Спасибо. Но объясните же мне глупой блондинке, как после всех описанных Вами манипуляций не попадать в Яндекс — почту?

Комментарии добавил(а): Ирина
Дата: 2011-08-25

Спасибо, очень полезно. Я думаю для таких уроков-подсказок пора сделать кнопку «спасибо» как на торрентах.

Комментарии добавил(а): Сергей
Дата: 2014-04-06

Здравствуйте! А какая может быть причина, что кликнув по ссылке на почтовый ящик, — нечего не происходит. И никакая почтовая программа не открывается. На компе outlook установлен. Спасибо.

Комментарии добавил(а): Серёня
Дата: 2014-07-23

Это текст сообщения, а если надо веб-страницу?

Комментарии добавил(а): Ольга
Дата: 2015-07-03

Спасибо за статью, но у меня так и не получилось создать самой емайл рассылку.

Комментарии добавил(а): Елена
Дата: 2015-11-13

Спасибо, все получилось))

Комментарии добавил(а): Лилия
Дата: 2015-12-05

Комментарии добавил(а): Николай
Дата: 2020-04-13

Здравствуйте, у меня ссылка переходит не на почтовой портал в браузере, а на Microsoft Outlook 2010. Скажите что мне делать. Зарание спаисбо.

Комментарии добавил(а): Андрей
Дата: 2020-04-14

Все верно Николай, скрипт запускает почтовый клиен, установленный на вашем компьютере

Комментарии добавил(а): Светлана
Дата: 2020-07-08

У меня при нажтии на такую ссылку, ничего не происходи. Подскажите, что это может быть?

Комментарии добавил(а): АндрейК
Дата: 2020-07-10

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

Комментарии добавил(а): Анастасия
Дата: 2020-07-11

Комментарии добавил(а): Виталий
Дата: 2020-10-27

Комментарии добавил(а): Дмитрий
Дата: 2020-12-26

Добрый день. Подскажите, пожалуйста. После запуска скрипта, открывается аутлук заполняется всё что нужно, но почему-то не прицепляется внизу автоматически подпись. А если простой код писать, то подпись прицепляется. Что-то можно сделать, чтобы она прицеплялась?

Комментарии добавил(а): Виктор
Дата: 2020-02-02

Спасибо за ценную статью!

Комментарии добавил(а): Сергей
Дата: 2020-06-12

Все оказывается так просто)))

Комментарии добавил(а): Надежда Выхор
Дата: 2020-07-17

Здравствуйте, Андрей! Спасибо за информацию! Хотелось бы с Вами пообщаться.

Комментарии добавил(а): Дарья
Дата: 2020-02-15

А сталкивались ли вы с тем, что при клике на ссылку mailto из письма в некоторых Аутлуках бьется кодировка? Как-то можно на это повлиять?

Комментарии добавил(а): Андрей
Дата: 2020-12-15

Спасибо Вам большое!

Комментарии добавил(а): Светлана
Дата: 2020-04-05

БлагоДарю, воспользовалась информацией, помогло)))

Комментарии добавил(а): irmaseo.ru
Дата: 2020-05-25

все очень интересно

Комментарии добавил(а): Василий
Дата: 2020-04-05

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

Комментарии добавил(а): АндрейК
Дата: 2020-04-06

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

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

Вы могли и раньше видеть ссылки с адресом электронной почты (email), по нажатии на которые открывается окно почтового клиента — по умолчанию. Удобно не правда ли?! Но как же создать такую ссылку на своём сайте вместо обычного текста вида «[email protected]»?

Варианты вставки email ссылки

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

Главное отличие заключается в содержимом между тегами, при этом сама структура ссылки остаётся неизменной. К адресу добавляются параметры обращения к почтовому клиенту.

Топ-пост этого месяца:  Как сделать ЧПУ ссылки на WordPress

Как можем видеть, адрес между кавычками получил команду для вызова окна почтового клиента « mailto: ». А значит, по щелчку откроется создание нового письма с уже введённым адресом эл-почты получателя.

С указанием темы сообщения

Письмо электронной почты помимо email получателя и отправителя имеет и тему сообщения. Мы её также можем указать в ссылке, чтобы она автоматически отобразилась в соответствующем поле почтового клиента.

Если заметили, в этом случае добавляется новый параметр сразу после адреса электронной почты — «?subject«. А после знака равенства можете указать свой текст для темы сообщения.

С указанием текста сообщения

Также можно частично добавить текст сообщения. Например, для идентификации корреспонденции. Для этого используем следующий параметр — «&body», а после равно пишем свой текст для письма.

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

Вместо послесловия

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

Добавление обратного адреса электронной почты (mailto:) ссылка в сообщении

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

В теле можно включить ссылки обратного адреса электронной почты в сообщениях электронной почты. При щелчке ссылки откроется пустое сообщение уже адресованные человека, компании или любого назначения что вы выбрали. Ссылки к примеру, такие как mailto: [email protected] уже адресованные службу технической поддержки вашей компании.

Как видите, можно форматировать текст ссылки (слова, которые просмотреть и выберите команду) служить нужного.

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

В окне сообщения выделите текст или рисунок, который вы хотите отобразить в виде ссылки.

На вкладке » Вставка » выберите ссылку или гиперссылки.

В разделе Связать с щелкните элемент электронной почтой.

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

Если нужно изменить текст ссылки, введите его в поле Текст.

Чтобы настроить всплывающую подсказку, которая появляется при наведении указателя на ссылку, нажмите кнопку подсказка и введите текст, который вы хотите. Если не указать подсказку, «mailto», за которым следует адрес электронной почты и тему подсказки используются в Outlook.

Нажмите кнопку ОК.

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

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

Как создать ссылку на электронную почту в HTML

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

Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.

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

How-to: Правила вёрстки email-писем

Электронная почта — отличный инструмент коммуникации, который позволяет компаниям доставлять аудитории контент удобным для нее способом. При этом читать письма в формате plain text не всегда удобно, поэтому в современных новостных рассылках используются различные графические элементы.

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

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

Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.

Основы HTML для электронной почты

Главной проблемой при вёрстке email-писем является тот факт, что существует огромное количество софта для чтения подобных сообщений — от десктоп-продуктов вроде Eudora Outlook, AOL, Thunderbird и Lotus Notes до веб-сервисов вроде Yahoo!, Gmail, Mail.ru и до мобильных почтовых приложений.

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

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

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

  1. Необходимо использовать таблицы HTML для большего контроля над шаблоном письма. Даже если вы привыкли полагаться на CSS в вебе — не переносите эту привычку в мир email, потому что это не сработает при том разнообразии клиентского софта.
  2. Используйте встроенный CSS (inline) для получения большего контроля над другими элементами письма (шрифты, цвет фона и т.п.) — вот отличная версия CSS Inliner от «Печкина».

Самый простой способ увидеть, как HTML-таблицы и встроенный CSS могут использоваться в шаблонах email-писем — это скачать некоторые такие шаблоны с сайтов компаний Campaign Monitor и MailChimp (прим. пер: вот здесь собраны примеры дизайна email-рассылок клиентов сервиса Pechkin-mail).

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

    Объявления стилей CSS располагаются после тега , а не между тегов ;
    Не используются сокращения CSS: вместо сокращенного правила для стиля font: 12px/16px Arial, Helvetica , следует создать отдельные сущности для каждого шрифта, с прописыванием им значений font-family , font-size и line-height ;
    span и div используются редко и для реализации конкретных эффектов, основную же работу по описыванию шаблона письма берут на себя таблицы HTML;
    Стили CSS также используются на базовом уровне, без применения каких-либо CSS-файлов.

Шаг 1: Использование таблиц HTML для верстки шаблонов

Да, таблицы вернулись. Да, веб уже далеко ушел вперед, но мы-то не в вебе! Из всего многоорбазия email-клиентов найти такой, который бы обладал широкой и качественно поддержкой CSS — та еще задача. Это значит, что мы просто вынуждены использовать таблицы, если хотим, чтобы создаваемые письма рассылок консистентно отображались у каждого читателя.

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

Первым шагом на пути к созданию HTML-версии письма является выбор шаблона — для новостных рассылок лучше всего работают одноколоночный и двухколоночный шаблоны, поскольку они помогают свести к минимуму хаос, который часто возникает при попытке запихнуть в такой маленький «контейнер», как email, большой объём информации. Письма, сверстанные в одну колонку также лучше отображаются на смартфонах и планшетах.

Одноколоночный шаблон, как правило, состоит из:

  1. Заголовка, содержащего логотип и какое-то количество навигационных ссылок на родительский сайт — с целью брендинга и ознакомления читателей письма с дизайном самого сайта.
  2. Внутренних ссылок, которые ведут на какие-то участки конкретно этого письма.
  3. Подвал (футер) в нижней части email-сообщения, который чаще всего содержат ссылки, дублирующие навигацию из заголовка плюс инструкции по тому, как отписаться от рассылки.

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

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

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

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

Вот какой подход можно использовать при создании HTML-писем:

    Для двухколоночных шаблонов создается одна таблица для заголовка, вторая — для центральных столбцов с контентом и третья — для футера. Эти таблицы «оборачиваются» в еще одну общую таблицу («контейнер»). Этот же подход можно использовать для одноколоночных шаблонов, просто таблица с контентом должна состоять из одного столбца. Этот подход особенно хорош, если письмо содержит множество изображений, разбитых по разным ячейкам. Простая таблица со строками для заголовка (с colspan=”2” в случае двухколоночного дизайна), контента и футера будет хорошо отображаться на всем почтовом софте (кроме Lotus Notes).
    Внутри таблиц и тегов можно использовать атрибуты, помогающие контролировать отображение таблицы. К примеру, установка border=»0″ , valign=»top» , align=»left» (или center, если это будет хорошо выглядеть в конкретном варианте оформления), cellpadding=»0″ , cellspacing=»0″ и т.д. Главным образом это помогает старым почтовым программам отображать письмо в более или менее приемлемом виде.
    Даже если дизайн письма не предполагает отображение границы таблицы, во время разработки бывает полезно установить величину border=”1” — это помогает при отладке и поиске проблем, которые могут возникнуть с выравниванием контента внутри тегов и . При запуске рассылки в «продакшн», границу можно установить обратно на border=”0” .

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

Топ-пост этого месяца:  Выполнение шорткодов в шаблоне письма плагина Contact Form 7

Не нужно использовать объявление CSS в HTML-теге , как часто делают при вёрстке веб-страниц. Вместо этого объявление нужно разместить сразу за тегом — однако Gmail ищет любые теги style в письме и удаляет их. Кроме того не стоит даже тратить время на использование элемента link для того, чтобы сослаться на внешний файл стилей: популярные email-клиенты проигнорируют, изменят или удалят такие обращения к внешним сущностям.

Для таблицы-контейнера, в которой хранятся таблицы заголовка, контента и футера, следует установить ширину на уровне 98%. Некоторым почтовым клиентам (например, Yahoo) нужна прокладка по 1% с каждой стороны письма, чтобы его корректно отобразить. Если боковые элементы критически важны для вашего письма, то лучше уменьшить ширину таблицы до 95% или даже 90%, чтобы точно избежать возможных проблем. При этом таблицы внутри контейнера, само собой, должны иметь ширину в 100%.

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

Не стоит злоупотреблять тегами , их можно использовать для выравнивания небольших блоков контента со свойством float и ссылок на элементы справа или слева от ячейки . Gmail игнорирует объявления CSS float (другие клиенты вроде Yahoo и Outlook online работают с ними нормально). Иногда лучше написать больше кода для более сложного табличного шаблона, чем полагаться на использование на выравнивание с помощью float в узкой колонке. Плохая поддержка этого свойства почтовыми клиентам — одна из причин некорректного отображения писем. (Кстати об этом свойстве на Хабре есть интересная статья).

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

Важный момент: некоторые сервисы email-рассылок могут распаковывать определения стилей, чтобы сделать их более явными и, соответственно, более читабельными для почтового софта. К примеру, сокращение CSS style=”margin: 10px 5px 10px 0;” может быть развернуто в более длинное объявление, которое показано выше по тексту. Перед рассылкой следует протестировать разные варианты писем и посмотреть, что происходит с кодом после отправки. В начале лучше использовать сокращения CSS, поскольку даже в самом плохом случае, так или иначе почтовые клиенты смогут их понять.

Если скачать и изучить шаблоны писем с сайтов вроде MailChimp или Campaign Monitor, то станет ясно, что в них таблица-контейнер рассматривается в качестве HTML-тега . Например, команда сервиса Campaign Monitor обращается к этой таблицы как к “BodyImposter” — отличный способ представления таблицы-обертки. С точки зрения CSS, таблица-контейнер делает ровно то, что делал бы элемент , если бы сервисы вроде Gmail его не игнорировали.

Шаг 3: Применение лучших практик

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

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

Первыми средствами тестирования писем являются браузеры Firefox и Internet Explorer. Если сообщение хорошо выглядит в них, то велик шанс на то, что и в клиентах вроде Outlook, Yahoo, Gmail и других с ним не будет больших проблем. Если это возможно, следует даже пойти дальше и протестировать письмо в IE 6 — это позволит увидеть, как письмо будет «рендериться» в Outlook 2003. Чтобы примерно понять, как письмо будет показываться на iPhone и iPad нужно протестировать его в Safari.

После того, как письмо нормально отображается в IE и FF, нужно отправить его на некоторый диапазон тестовых почтовых адресов с помощью сервиса email-рассылок. В идеале в выборке должны быть аккаунты из самых популярных почтовых сервисов — конечно, окончательный выбор зависит от того, на каких доменах адреса у людей из списка рассылки. Если среди них нет никого, с почтой на Yahoo, то не стоит и тратить время, на подгонку письма под эту систему.

Ниже представлены полезные приемы вёрстки, которые облегчают этап тестирования:

  • Иногда ситуацию улучшает переключение с ширины в процентах на фиксированное значение. Это не идеальный вариант, поскольку читатели часто «ресайзят» окно браузера во время чтения письма, но иногда другого способа заставить письмо нормально выглядеть в разных клиентах просто нет.
  • Если возникает проблема с расстоянием между столбцами, прежде всего следует поиграть с атрибутами таблицы cellpadding и cellspasing . Если это не помогает, то следует применить CSS-атрибуты margin и padding . На старых почтовых программах лучше работает вариант с чистым HTML.
  • Если ячейка закрывается сразу под тегом , может возникнуть проблема с расположением изображения. Это давняя проблема HTML. Решить ее можно разместив закрывающий тег сразу после тега на одной строке с ним.

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

  • Следует избегать использования JavaScript. Большинство email-программ его в любом случае отключат.
  • Если изображение «нарезано» и размещено в нескольких ячейках HTML-таблицы, нужно проверять письмо с помощью разных тестовых аккаунтов. Иногда бывает так, что письмо выглядит отлично в Outlook, изображение разъезжается в других почтовых программах. Кроме того стоит рассмотреть вариант, при котором изображение становится фоном для новой HTML-таблицы, которая заключает в себе все строки и столбцы той таблицы, в которой будут отображаться части картинки. Этим можно добиться такого же эффекта, как при «нарезке» изображения при меньшем количестве кода. Нужно помнить, что Outlook 2007 не показывает фоновые изображения — всегда важно тестировать письмо на наиболее важном и популярном у подписчиков почтовом сервисе.
  • Для фоновых изображений лучше использовать атрибут background вместо CSS. Это позволяет добиться большего единообразия при работе с различными почтовыми сервисами.
  • Хранить изображения из письма нужно на веб-сервере, в идеале, в папке, отличной от той, где хранятся картинки основного сайта компании (например, папка может называться /images/email ), и их никогда нельзя удалять. Некоторые люди открывают письма недели и месяцы спустя их получения, используя их аналогично закладкам в браузере — чтобы вернуться к нужному контенту.
  • В изображениях необходимо использовать атрибуты alt , height и width . Задание значений этих элементов улучшает результаты при работе с Gmail. Кроме того, это позволяет шаблону письма не разваливаться, если пользователь отключил отображение картинок. Примечание: Outlook 2007 не распознает атрибут alt .
  • В тегах ссылок нужно использовать атрибут target=”_blank” — люди, которые читают письмо в веб-клиенте вряд ли захотят, чтобы ссылка открылась в том же окне.
  • Использование изображений размером 1×1 пиксель может помочь в выравнивании контента письма, однако часто такие следящие пиксели используют спамеры, чтобы понять, было ли открыто это письмо. Поэтому применение таких маленьких изображений повышает вероятность того, что письмо будет помечено почтовой системой, как спам.
  • Также не нужно использовать огромные изображения выше собственно письма — это еще одна излюбленная тактика спамеров, и фильтры этого очень не любят.

Очень важно удостовериться, что письмо отображается корректно в почтовых клиентах, в которых отключен показ изображений. В большом количестве email-клиентов по умолчанию эта настройка стоит на “off”. Это значит, что при использовании фонового изображения с белым текстом поверх него, при невозможности загрузки этой картинки, возникнут проблемы. Чтобы этого избежать нужно прописать тёмный фоновый цвет для этой части HTML-таблицы.

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

  • Отображается ли в поле «От кого» правильная информация (в виде имени, а не просто почтового адреса)?
  • Корректно ли заполняется строка темы письма?
  • Корректна ли и визуально очевидна контактная информация?
  • Есть ли в шапке письма пояснение о том, что «вы получили это письмо, потому что…» и ссылки для того, чтобы отписаться от рассылки в его подвале?
  • Есть ли в письме просьба добавить адрес отправителя в контакт-лист пользователя?
  • Есть ли в шапке письма ссылка для его отображения в веб-версии?

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

Шаг 4: Вёрстка для Gmail, Lotus Notes и Outlook 2007

Gmail, Lotus Notes и Outlook 2007 ставят перед верстальщиками и дизайнерами новые вызовы. К примеру, в Outlook 2007 поддержка CSS значительно хуже, чем в предыдущих версиях сервиса.

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

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

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

Топ-пост этого месяца:  Яху — история поисковой системы, почта Yahoo Mail, а так же регистрация в каталоге Яхоо

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

Вот несколько трюков, которые работают в Gmail и старых почтовых клиентах:

    Определять фоновый цвет лучше в ячейке с помощью атрибута bgcolor , не используя CSS.
    Побочным эффектом такого подхода является тот факт, что фоновое изображение можно сделать сколь угодно длинным — если контент в письме разного размера, то использование супер-длинной картинки позволяет увеличивать или сокращать высоту письма в зависимости от текста сообщения. Однако в Outlook 2007 фоновые изображения полностью игнорируются.
    Если это работает лучше, то можно использовать padding для указания величины полей ячейки . Стиль margin в таких ячейках не сработает, а padding — вполне.
    В том случае, если необходимо отобразить границу вокруг ячейки , следует помнить, что Gmail по-умолчанию отображают границу ячейки, когда она определена в div , но не показывает ее, когда она определена, как стиль границы в теге .
    Если нужно разместить светлую ссылку на темном фоне, лучше поместить объявление шрифта в ячейку (то же касается тегов и ), а затем добавить к тегу стиль color: .
    Если шрифты в и оказываются разного размера, то тег надо завернуть в .
    Gmail агрессивно использует правую колонку экрана пользователя, в результате содержимое письма сжимается левее в сторону центра экрана. Необходимо устанавливать размер ячеек на 10 пикселей — это позволит избежать наложения текста на левую и правые границы.
    Во время тестирования HTML-письма в Gmail с высокой долей вероятности обнаружится, что в тегах , , , , и других не хватает одного или более стилей шрифтов. Нужно проверить каждый шрифт, чтобы убедиться в том, что почтовая система Google отображает его корректно.

    Помимо Gmail есть еще один «злой гений» среди почтовых сервисов — это Lotus Notes. Многие большие корпорации продолжают поддерживать и обновлять этот софт.

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

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

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