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

Массовые рассылки по базе

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

Небольшой список сервисов:

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

Персональные письма

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

Автоматические письма с вашего сайта

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

Как отправить html письмо через Gmail

В этой статье мы расскажем как отправить html-письмо через Gmail. Способ специфичен, но имеет право жить.

Итак, приступим.

Шаг 1. Подготовка шаблона

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

Шаг 2. Вставка письма

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

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

Для этого нужно кликнуть по полю для текста сообщения правой кнопкой и выбрать «Просмотр кода элемента». Откроется панель с нужным блоком на странице.

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

Браузер выделил нам блок div. Именно он отвечает за содержимое письма. Отредактируем его. Предварительно скопируйте код письма, открыв его через блокнот и скопировав содержимое.

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

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

Шаг 3. Отправка письма через Gmail

Внесите нужные изменения в письмо, добавьте адресатов, тему. И просто нажмите на кнопку «Отправить». Все готово.

Изменения в коде страницы и обновление

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

Проверка корректности

Множественная рассылка

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

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

Шаг 1. Подготовка письма

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

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

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

Шаг 2. Вставка письма в Mail.ru

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

Нажмите правой кнопкой мыши на поле для ввода текста письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется). Откроется панель редактирования кода страницы. (Панель может отличаться визуально в зависимости от вашего браузера. Мы показываем на примере Google Chrome).

Выделился код, который отвечает за наполнение письма. Но нам нужна главная строчка кода - html.

Именно этот блок отвечает за наполнение письма и нам нужно вместо него вставить наш шаблон. Для этого щелкните правой кнопкой мыши по блоку и нажмите “Edit as HTML”.

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

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

Шаг 3. Отправка html-письма

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

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

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

Пока разбирался с темой стилей для писем, я выяснил, что некоторые почтовые сервисы, все же нормально воспринимают С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. В любом случае тесты продолжаются и скоро будет новая статья на эту тему.

А на сегодня - все. Всем пока!

Есть много способов отправки html-писем через почтовые клиенты и, конечно, через сервисы рассылок. Но что делать, если нужно отправить пару писем, а никаких программ под рукой нет? Есть хитрый способ отправить html-письмо через Яндекс Почту.

Шаг 1. Подготовка письма

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

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

Откройте шаблон через обычный блокнот и скопируйте все содержимое письма. Потом весь этот код нам нужно будет встaвить в тело письма в Яндекс Почте.

Шаг 2. Вставка письма в Яндекс

Войдите в Яндекс Почту, и создайте новое письмо. Дальше пойдет хитрость. Нажмите кнопку “Оформить письмо”, чтобы перевести Яндекс Почту в режим, поддерживающий оформление.

У вас должна появиться вот такая панель (она выделена синим). Теперь интерфейс поддерживает различное оформление, а значит и код письма. Правда просто так его вставить не получится.

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

Для этого нажмите правой кнопкой мыши на пустую область письма и выберите “просмотреть код” (В каждом браузере этот пункт называется по-своему, но смысл сохраняется).

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

Теперь нам нужно удалить этот блок, а на его место вставить код нашего письма. Для этого кликните на этот блок правой кнопкой мыши и выберите “Edit as HTML”,

теперь нам необходимо удалить текущий код…

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

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

Шаг 3. Отправка html-письма в Яндекс Почте

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

После того, как письмо готово - впишите почту получателя, тему письма и отправляйте!