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

Введение

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

Проблема: Почтовые клиенты

Вы думаете IE - самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?

Решение: Программируйте как в 1997

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

Шаг 1: Дизайн

Простота

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

Минимизируйте использование изображений

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

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

Чем Уже, тем лУчше

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

Сохраняйте пропорции

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

Наш дизайн

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

Шаг 2: План

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

Во-первых , начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.

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

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

Отступы внутри и снаружи ячеек

Вместо использования CSS свойств margin и padding мы будем использовать атрибуты HTML cellpadding и cellspacing. Cellpadding - почти то же самое, что и padding в CSS - отступы от содержимого до рамки . Cellspacing - это отступы между ячейками таблицы .

Cellspacing таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти cellpadding и cellspacing относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни cellpadding, ни cellspacing, необходимо определить это для каждой таблицы.

Шаг 3: Написание кода

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

Создаем скелет

HTML-код письма будет очень прост: нам нужны три главных тега html, head и body. Давайте создадим базовую таблицу и три внутренние таблицы, о которых мы ранее говорили.

Есть несколько способов описания тега DOCTYPE. Однако в данном случае, мы исключим его вообще, так как его описание нам ничего не даст.

Заметьте, что у двух таблиц cellpadding="20". Это отделит их от основного содержимого. Отступы главной таблицы равны 15 пикселей. Это делается для того, чтобы установить упорядоченность по вертикали. В связи с тем, что каждый раздел находится в своей отдельной ячейке, то между ними будет отступ в 15 пикселей.

Заметьте также, что у всех таблиц задан атрибут align со значением "center", а ширина таблиц задана явно (600 пикселей). В электронных HTML письмах лучше не указывать ширину основной таблицы явно. Лучше устанавливать размеры каждой ячейки, но у нас есть отступы, так что можно об этом не беспокоиться.

Таблицы с заголовками

Эти таблицы очень просты: в них всего лишь описаны параграфы в ячейках, выровненных по центру.

Проблемы с отображением письма?Просмотрите его в браузере.

Вторая таблица выглядит абсолютно так же.

Заголовок

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

Наши услуги

Новости и События

Не забудьте указать ширину каждой ячейки, равную 570 пикселей (600 - 15 пикселей отступов с обеих сторон). Мы также выравниваем дату по правому краю. Фоновое изображение добавим позже. А пока в качестве фона будет бледно-голубой цвет.

Заметьте, мы используем атрибут bgcolor вместо style="background: ". Это все потому что html атрибуты воспринимаются в электронных письмах лучше, нежели CSS свойства.

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

Основное содержимое - 2 колонки

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

одной для изображения,

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

и одну для самих заголовков.

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

Новый дизайн сайта! На 150% Лучше и на 40% Эффективнее!

Примечание:

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

Атрибуту valign даем значение "top". Это важно, так как располагает каждую ячейку в верхней части строки. Значение по умолчанию - middle, что приводит к непредсказуемым результатам.

Используем изображения от dummyimage.com , так как все изображения, используемые в электронных письмах, должны быть выложены в сеть (подробнее бо этом позже), и намного проще использовать генерируемые изображения. Просмотрите сайт, там объясняется, как задать картинке необходимый URL.

Основное содержимое - 1 колонка

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Разделители

Для того чтобы добавить отступы по вертикали (помимо 15 пикселей, которые у нас уже есть), необходимо использовать изображения. Вспомним 90-ые! Можно подгрузить изображение gif, но на данный момент быстрее использовать одно из иображений от dummyimage.com. Я оставлю его серым, но в последствии можно сделать его белым.

В результате получаем что-то вроде этого:

Основное содержимое - 3 колонки

Для этой части используем таблицу из 5 ячеек: три на колонки и две в качестве разделителей между ними.

Достаточно просто. Для границ примените тот же метод, что в части из 2 колонок. Не забывайте про valign!

Повторите то же самое и для текста.

Новые продукты! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

Письмо каждый месяц

Новый Улучшенный Форум

Добавьте еще один разделитель в нижней части, и на этом почти всё:

Осталось совсем немного...

Это шапка

CALL TO ACTION

Работа над основной частью на этом завершается.

Пару слов об изображениях

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

Шаг 4: Оформление письма

Мы не можем подключить стили CSS и не можем описать стили в теге head в письме, потому что некоторые почтовые клиенты игнорируют его или только тег style. Мы будем использовать встроенные стили, хотя это и очень громоздко. К счастью, есть некоторые сервисы, которые встраивают стиль в html код. Я пользуюсь услугой сайта Premailer , которая делает это за меня.

Мы напишем CSS стили отдельно, а затем воспользуемся premailer-ом.

Сброс основных значений по умолчанию

Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.

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

Оформление текста

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

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #header h1 {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; } #header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } #header p {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; } h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; } p {font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;} h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

Смотрите, теперь письмо выглядит намного привлекательнее!

Фоновые изображения

Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.

Мы закончили. Приступим к тестированию!

Шаг 5: Тестирование

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

Почтовые клиенты

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:

Outlook 2003/2007

Как тестировать?

Сперва необходимо найти способ отправить HTML письмо. Ваш заказчик скорее всего использует такой сервис как Mailchimp или Campaign Monitor, осуществляющий рассылку.

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

Тестирование с помощью Mailchimp

Мне нравится использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:

Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol" campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.

На странице design выберите Import -> Paste in code , а затем отметьте пункт Automatic CSS Inliner .

Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.

Продолжайте до тех пор, пока не дойдете до страницы confirm , где отметьте send test . Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

Тестирование с помощью Litmus

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

Хорошие результаты

Некоторые тесты показали довольно-таки хорошие результаты:

Apple Mail

Thunderbird

Не очень хорошие результаты

Некоторые результаты не вызывают восхищения, но есть и неплохие:

Gmail (safari)

Outloook 2007

Outlook 2003

Yahoo! Mail

Плохие результаты

Есть и ошибки:

Hotmail (Зелёный???)

Old Gmail (explorer)

Исправление ошибок

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения!important. Иногда я почти уверен в том, что они хотят свести меня с ума.

Чтобы это исправить, нужно добавить!important ко всем стилям заголовков:

H3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

В старой версии Gmail возникает подобная проблема в заголовке: Gmail добавляет дополнительный отступ всем заголовкам. Нам всего лишь необходимо дополнительно описать стиль для верхнего отступа заголовков:

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; } #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

Вот мы и решили проблему с Hotmail:

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

Если вам удасться уговорить заказчика подписаться на Litmus, это облегчит работу. Вы также можете проводить тестирования многих почтовых клиентов с помощью платной версии Mailchimp и Campaign monitor.

Устранение неполадок

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

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

Проверяйте стандартные стили : используйте что-то вроде Firebug или Webkit Inspector, чтобы проверять, не перекрывает ли почтовый клиент ваши стили. Если это происходит, добавление обозначения!important решит проблему.

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

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

Результат

Вот конечный вариант кода:

Trouble viewing this email? View in Browser Communitech Venture Services News and Events All New Site Design It"s 150% Better and 40% More Efficient! Exciting New Products! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum A Newsletter Every Month Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. New and Improved Forum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is a heading Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. CALL TO ACTION You are receiving this email because you signed up for updates Unsubscribe instantly | Forward to a friend | View in Browser

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

Ничего особенного, но это должно дать вам представление о том, как разрабатывать электронные HTML письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.

Привет, друзья! Мы сегодня поговорим о том, как сделать красивое письмо для рассылки на justclick. Многие знают о сервисе justclick как о каталоге партнерских продуктов. На самом деле justclick – это сервис, который «ставит бизнес на автопилот». Это не мои слова – так прописано на главной странице сайта. И я с этим абсолютно согласна, потому что джастклик значительно облегчает многие технические моменты в Интернете.

Одной из главных функций justclick является рассылка. Чтобы создать рассылку на justclick, не нужно быть «семи пядей во лбу», т.к. весь интерфейс сервиса интуитивно понятен. Настроить автоматическую серию писем, отправить мгновенное письмо по своей базе – с помощью джастклик сделать это очень просто! Кроме того можно отследить всю статистику по каждому отправленному письму.

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

Не я одна оценила удобный функционал сервиса justclick, намного раньше меня это сделал Дмитрий Зверев. У него выпущена целая серия инфопродуктов, посвященная работе на justclick.

Как сэкономить на Justclick

Я знаю, что многие новички в инфобизнесе недолюбливают justclick за то, что он платный. Тариф «Начинающий» стоит 990 рублей в месяц.

Я соглашусь, что это несколько напрягает просто потому, что на первых этапах развития бизнеса в Интернете прибыли нет, а вкладывать в собственное дело приходится, и притом немалые деньги!

Но, друзья, чтобы открыть бизнес – вложения необходимы, и не важно, где это будет – offline или online!

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

Перед новым годом была организована новогодняя акция по распродаже тарифов на justclick. Эту акцию я пропустить не могла! Предложение было следующее: скидка на тариф «Начинающий» 60% на два года, если оплата будет произведена единовременным платежом. Выглядело это таким образом:

Давайте посчитаем, сколько я сэкономила. 990 рублей * 24 месяца = 23760 рублей – такую сумму я бы заплатила за 2 года пользования сервисом justclick по обычной цене.

Воспользовавшись акцией, я оплатила тариф «Начинающий» на 2 года в сумме 9700 рублей.

Если раскинуть на месяцы, то стоимость тарифа оказалась 404 рубля 16 копеек, а никак не 990!

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

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

Переходим непосредственно к теме статьи как сделать красивое письмо для рассылки на justclick .

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

Письма на justclick создаются в редакторе, похожем на ворд или на редактор сайта на wordpress.

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

Давайте посмотрим два варианта письма:

Первое письмо

Второе письмо

Какое письмо читается легче? Думаю, что вы согласитесь со мной, – это второй вариант.

Кстати, оба письма созданы на сервисе justclick.

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

Настройка страницы на сервисе justclick

В левом меню выбираем раздел Сайт – Страницы – кнопка Добавить .

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

Итак, начинаем создавать шаблон для красивого письма. На панели справа выберите кнопку Вставить графические блоки. В разделе Простые выставляем ширину блока. На мой взгляд – идеально 600 рх. Цвет блока выбираете на свое усмотрение. Я остановилась на белом фоне.

Следующий раздел Конструктор. Ширина блока 600 рх. Цвет фона удаляем. Тип границы и цвет границы оставляем по умолчанию (они нам не пригодятся). Оба ползунка, которые находятся ниже этих показателей, сдвигаем влево до упора. Кнопка Вставить .

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

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

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

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

В редакторе в верхнем левом углу нажимаем кнопочку Источник … и вставляем скопированный код!

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

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

Как сделать красивое письмо на justclick: пример

Теперь давайте сделаем красивое письмо для рассылки на justclick.

Начинаем с верхней части письма и заполняем вкладку Основные параметры .

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

Группы контактов: выбираете группы, по которым хотите сделать рассылку.

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

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

Вот, что получилось у меня:

Ниже редактора письма есть кнопочка Тестировать , и я всегда ей пользуюсь (и вам советую), потому что так легче увидеть ошибки. Если все хорошо – кнопка Сохранить . Письмо к отправке готово!

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

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

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

Основные принципы

Самая большая проблема при разработке HTML шаблона письма – это обеспечение его совместимости с разными платформами. Существует множество различных почтовых клиентов, например, Google Mail , Apple Mail , Outlook , AOL , Thunderbird , Yahoo! , Hotmail , Lotus Notes . Некоторые из них уже давно не у дел. Особенно это касается поддержки CSS , поэтому нам нужно использовать HTML таблицы , чтобы обеспечить корректное отображение писем. Фактически, использование HTML таблиц является единственным способом создать макет, который будет одинаково отображаться в разных почтовых клиентах.

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

Чтобы убедиться в этом, рассмотрите пример ниже, в котором я применил атрибут border , чтобы вывести границу каждой таблицы. Обратите внимание, что символы %s являются местом, где будет размещен динамический текст и картинки:

Весь макет построен на основе HTML таблиц . Мы воспользуемся PHP библиотеками для анализа маркера %s и его заполнения динамическим текстом перед отправкой письма.

Разработка статического шаблона

Начнем программировать! Прежде чем приступить к созданию красивого шаблона HTML письма , нужно начать HTML файл с XHTML документа :

My first email template!

Установите cellpadding и cellspacing в ноль , чтобы избежать непредусмотренного пространства в таблице. Также установите ширину в 100%, поскольку эта таблица является телом письма (стилизация тега body полностью не поддерживается ).

Теперь мы добавим вместо текста «My first email template! » («Мой первый шаблон электронного письма! ») другую таблицу:

This is the email template body

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

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

Row 1

Row 2

Row 3

Row 4

Row 5

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

%s GIVE US A CALL EMAIL US BROWSE FAQ PAGE

Несколько замечаний перед тем, как сделать шаблон HTML письма :

1. Добавьте атрибут alt там, где нужно показать текст вместо изображений на случай, если почтовый клиент не сможет правильно загрузить их;
2. Добавьте маркер %s там, где нужно, чтобы данные появлялись динамически в зависимости от варианта письма;
3. Процентные значения обозначаются дополнительным знаком %. Это сделано так, чтобы PHP библиотека, которая используется для динамической обработки, знала, как правильно анализировать текст.

Мы успешно разработали статический шаблон электронного письма. Теперь давайте сделаем его динамическим!

Разработка динамического шаблона

Сохраните приведенный выше код в виде файла template.html . Теперь создадим новый PHP файл .

На серверной стороне зададим метод отправки HTML шаблона письма , описанный ниже:

Function send_mail_template($to, $from, $subject, $message) { $headers = "MIME-Version: 1.0" . "\r\n"; $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n"; $headers .= "From: ContactNameGoesHere <" . $from . ">\r\n"; $response = mail($to, $subject, $message, $headers); }

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

Function build_email_template($email_subject_image, $message) { // Получаем шаблон письма в виде строки $email_template_string = file_get_contents("template.html", true); // Заполняем шаблон письма содержанием и соответствующим изображением баннера $email_template = sprintf($email_template_string,"URL_to_Banner_Images/banner_" . $email_subject_image. ".png", $message, $mobile_plugin_string); return $email_template; }

Теперь, когда все готово, можно использовать оба метода и отправить наше первое динамическое письмо! Давайте воспользуемся созданным шаблоном письма для рассылки HTML . Допустим, что новый пользователь только что подтвердил свой электронный адрес. Хотелось бы отправить пользователю письмо с текстом Your email has been successfully verified («Ваша электронная почта успешно подтверждена »).

Предположим, что у нас есть подтвержденная почта пользователя [email protected] и почта компании [email protected] . Теперь можно отправить автоматическое письмо:

$from = "[email protected]"; $to = "[email protected]"; $body_text = "Your email has been successfully verified..."; $banner_image_subject = "account_verified"; $final_message = build_email_template($banner_image_subject, $body_text); send_email($to, $from, "You email has been verified", $final_message);

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

Перевод статьи «How to create a dynamic HTML Email Template » был подготовлен дружной командой проекта .