Есть много способов отправки html-писем через почтовые клиенты и, конечно, через сервисы рассылок. Но что делать, если нужно отправить пару писем, а никаких программ под рукой нет? Есть хитрый способ отправить html-письмо через Яндекс Почту.
Шаг 1. Подготовка письма
Важным правилом при отправке письма таким способом является то, что ссылки на изображения в коде должны быть прописаны полностью, а сами изображения должны находиться на сервере.
Если ссылки ведут на изображения с вашего компьютера, то программа их не увидит.
Если вы заказывали шаблон у нас, то мы уже сами обо всем позаботились и в ваших исходниках уже есть заранее подготовленный шаблон с правильно прописанными ссылками.
Откройте шаблон через обычный блокнот и скопируйте все содержимое письма. Потом весь этот код нам нужно будет встaвить в тело письма в Яндекс Почте.
Шаг 2. Вставка письма в Яндекс
Войдите в Яндекс Почту, и создайте новое письмо. Дальше пойдет хитрость. Нажмите кнопку “Оформить письмо”, чтобы перевести Яндекс Почту в режим, поддерживающий оформление.
У вас должна появиться вот такая панель (она выделена синим). Теперь интерфейс поддерживает различное оформление, а значит и код письма. Правда просто так его вставить не получится.
Мы пойдем на хитрость и вставим код нашего шаблона прямо в код страницы. Для этого нужно найти кусок в коде, который отвечает за содержание письма, и подменить его нашим содержанием.
Для этого нажмите правой кнопкой мыши на пустую область письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется).
Все эти хитрые манипуляции мы проводили для того, чтобы появился вот этот блок, отвечающий за содержимое письма. (Панель может визуально отличаться в зависимости от вашего браузера. Мы показываем на примере Google Chrome).
Теперь нам нужно удалить этот блок, а на его место вставить код нашего письма. Для этого кликните на этот блок правой кнопкой мыши и выберите “Edit as HTML”,
теперь нам необходимо удалить текущий код…
… и на его место вставить код нашего письма. После этого закройте панель, нажав на крестик в правом верхнем углу панели.
Если вы сделали все правильно, то шаблон отобразится в теле письма.В данный момент в нем нет картинок, но не беспокойтесь по этому поводу. В отправленном письме картинки будут, при условии, что ссылки на картинки правильные (см. Шаг 1). Если переживаете за результат, то просто отправьте это письмо себе, и вы увидите, что все получилось как надо.
Шаг 3. Отправка html-письма в Яндекс Почте
Внесите нужные изменения в содержание письма, просто перепечатывая тексты и применяя различные стили. Можно пользоваться всеми инструментами из верхней панели.
После того, как письмо готово - впишите почту получателя, тему письма и отправляйте!
После того, как вы получаете на руки шаблон письма, нужно его как-то отправить. Тут все зависит от ваших целей и средств. Рассмотрим такие варианты, как массовая рассылка по базе, персональные письма и автоматические письма, присылаемые с сайта в ответ на действие пользователя, например регистрация.
Массовые рассылки по базе
Пожалуй, единственным качественным способом таких рассылок являются онлайн-сервисы, коих сейчас очень много. Они платные, но зато гарантируют вам качественную рассылку без попадания в спам.
Небольшой список сервисов:
Все они работают одинаково. Вам нужно зарегистрироваться, загрузить вашу базу, загрузить шаблон и нажать “Отправить”. Так же есть много дополнительных полезных функций: удобный редактор писем, отправка по расписанию, отчетность по эффективности.
Персональные письма
Если вы хотите отправлять единичные персональные письма людям, то воспользуйтесь одним из предложенных в наших статьях способом. Это удобно, например, если вы хотите отправить коммерческое предложение целевому человеку и затем позвонить ему. Для массовой рассылки эти способы не подойдут.
Автоматические письма с вашего сайта
Ваша система управления сайтом скорее всего поддерживает отправку писем по событиям, вы можете найти эту функцию самостоятельно и вставить туда код письма. Но лучше обратиться в вашему программисту, он все сделает.
На сайте сайт есть , но возникает вопрос — как такие письма отправлять? Давайте разбираться. Если вы хотите отправить html письмо, то просто вставить код в тело сообщения в вашем почтовом ящике у вас не получиться — отобразиться сам код без его выполнения. Для полноценной отправки, с возможностью отображения таблиц, ссылок, графики и рисунков, нужно использовать специальную программу.
Специальной программой для отправки писем в коде html являются почтовые клиенты. Рассмотрим один из них — Mozilla Thunderbird
. Рассмотрим процесс отправки писем с картинками и прочим более подробно.
Почтовый клиент Mozilla Thunderbird
Сначала нужно скачать эту программу. Для этого переходим на официальный сайт почтового клиента от Мозиллы: http://mozilla-russia.org/products/thunderbird/ . В открывшемся окне, слева, выбираем программу на русском языке для вашей операционной системы компьютера:
Скачиваем, устанавливаем. После первого запуска нужно настроить клиент для работы с электронной почтой. Первоначально нам предлагается выполнить интеграцию, однако её можно пропустить:
Теперь нужно указать адрес электронной почты, с которой мы будем в дальнейшем отправлять письма. Для этого щёлкаем по специальной ссылке «Электронная почта» :
Затем появляется окно, где можно открыть почтовый ящик у предложенного сервиса, но можно просто пропустить этот пункт, нажав «Пропустить это и использовать мою существующую почту» . Затем, нужно указать Имя , адрес и пароль на существующем почтовом ящике:
После этого, нажимаем «Продолжить» — происходит автоматическое определение почтового сервера, и после нажатия на кнопку «Готово» , мы переходим снова к начальному окну. Тем самым мы установили и настроили почтовый клиент для работы с электронной почтой (использовалась ) посредством которого мы будем отправлять шаблоны html писем.
Отправляем html письмо
Снова открываем клиент Mozilla Thunderbird , если вы уже успели его закрыть, и нажимаем на пункт верхнего меню «Создать» :
Открывается форма по созданию электронного письма. Заполняем данные: «Кому» и «Тема» :
Имейте ввиду, если вы хотите указать несколько получателей, нужно щёлкнуть мышкой чуть ниже пункта «Кому» — для этого там предусмотрены несколько полей получателей. Данные заполнили, переходим к шаблонам.
Пусть мы будем отправлять шаблон письма, предложенный в предыдущей статье (первый в списке). Открываем его в редакторе (файл shablon1.html) и выполняем небольшое не сложное действие, а именно — указываем корректные полные адреса изображений:
Как правильно указать ссылку на картинку в html-шаблоне электронного письма
Итак, полный адрес изображений на компьютере мы получили, теперь его нужно вставить в шаблон. Для этого, открываем шаблон на редактирование и вместо пишем .
Обратите внимание, что слэши в компьютере и для браузера разные. Кроме того, перед букой диска с расположение нужного файла, добавляется «file:///» .
Вставка шаблона в тело письма в почтовом клиенте Mozilla Thunderbird
Итак, мы заполнили адреса получателей нашего письма, указали тему, подправили ссылки. Теперь, нажимаем на пункт верхнего меню в окне создания электронного письма нашего почтового клиента «Вставить» — «HTML» :
Открывает ещё одно окно вставки кода, именно сюда и вставляем скопированный код html-шаблона электронного письма, который мы получили после редактирования в нём ссылок на изображения:
Нажимаем кнопку «Вставить» и, если адреса картинок были указаны верно, то вы должны увидеть полноценный шаблон электронного письма:
Итоги:
Давайте подведём итоги проделанной работы. Для этого нужно нажать на кнопку всё в том же почтовом клиенте «Отправить» . Для эксперимента был указан личный почтовый ящик, поэтому есть возможность проверить доставку сообщения. Открываем почту и видим полноценное html письмо:
Добрый день, друзья. Я продолжаю пытаться сделать . В прошлой статье я сверстал простенькое письмо без основных стилей и сегодня, я хочу протестировать его в разных почтовых сервисах и программах, для того, чтобы понять, что нужно подправить под конкретный сервис. По мере тестирования я буду править стили и отписывать где, как и почему письмо отображается не корректно.
Пока разбирался с темой стилей для писем, я выяснил, что некоторые почтовые сервисы, все же нормально воспринимают СSS, заданный через , но они все равно должны прописываться для каждого элемента и поддерживаются далеко не все свойства - это существенно облегчает работу, но полностью положиться на способ задания стилей таким образом - нельзя. Поэтому следует предусмотреть вариант того, что они не срабатывают.
Решил пойти таким путем, попробовать написать простенькие стили для оформления текстов, ссылок и картинок, потом проверить в разных почтовых сервисах верстку. Для тех сервисов, которые вырежут стили - буду прописывать их непосредственно в html коде или стараться как-то иначе решить проблему.
Html структура письма значительно изменила свой вид, по сравнению с той, которая была в первой статье. Я окончательно запутался и решил воспользоваться Dreamweaver (ом), для того, чтобы было нагляднее работать с таблицами.
Второй вариант письма, также выложу ниже. Но пока можете не качать. Я все равно буду его переделывать. Приступим...
Письмо приобрело следующий вид:
Я скачал программу Mozilla Thunderbird для того, чтобы иметь возможность вручную разослать письмо на разные почтовые ящики. Конечно, при рассылке вам лучше иметь базу подписчиков, связанную с сервисом почтовой рассылки. Как-нибудь я обязательно рассмотрю подробнее несколько подобных сервисов, ведь не будете вы 10000 подписчикам вручную отправлять письма.
Итак, я отправил свое письмо на gmail, yandex и mail почту, и, как и ожидал, получил кривую верстку. Начну исправлять по порядку.
Открыв письмо в Mail.ru и Gmail - я обнаружил, что текст ссылок изменил цвет и размер. Выставились стили, предлагаемые почтовыми сервисами по умолчанию. Так заголовок выглядел в Mail.ru:
Исправить проблему удалось задав стили непосредственно в теге "a" для каждой из ссылок и добавив "!important"
Как закрыть внешние ссылки от индексации
Аналогичная ситуация произошла с текстом, заключенным в теги "p" и "span". Проблема решилась тем же способом. После этого письмо стало отлично смотреться в Mail.ru и Gmail.
Также отлично письмо смотрится в Mozilla Thunderbird:
В Outlook 2013 и the bat структура письма осталась качественной, но повлиять на стили шрифтов и ссылок - не получилось, в общем стили - не применились.
Пока не знаю, как повлиять на эти вещи, но эксперимент продолжается. Возможно есть какие-то настройки в самих программах, но я специально, пока, не трогал их и тестировал верстку на программах с настройками по умолчанию. В the bat я заметил еще одну особенность, вместо прозрачности он заливает область картинки черным цветом. Необходимо это учитывать при верстке.
А теперь хочу поговорить о Яндекс почте. Смотрите, как отображается в интерфейсе Яндекс, тоже самое письмо, что и в примерах выше:
Видите? Все прилипло к правому краю и нет отступов между строками. Это то, о чем я говорил в начале статьи. Не работает "cellspacing", но зато работает "callpadding" - это немного иное свойство, которое дает чуточку другой результат. Но если изменить верстку с учетом "cellpading", то можно добиться хорошего результата в популярных почтовых сервисах. Я проверял "cellpadding" - оно отлично работает в gmail, yandex и mail. В любом случае тесты продолжаются и скоро будет новая статья на эту тему.
А на сегодня - все. Всем пока!