Электронное письмо в html формате. Как создать HTML-письмо: пошаговая инструкция

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

Особенности создания

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

Шаблон письма: каким он должен быть

В процессе верстки документа, предназначенного для отправки корреспондентам, необходимо придерживаться ряда требований. Во-первых, документ должен быть достаточно узким, т.е. по размерам он не должен превышать диапазон 500-600 пикселей, что обеспечит корректное отображение текста или другого контента на устройствах разного типа. Для всей текстовой информации необходимо использовать достаточно крупный шрифт. На IOS-устройствах читать HTML-письмо будет не слишком удобно, если размер шрифта будет составлять менее 13 пикселей. Элементы, по которым можно кликнуть, должны быть довольно крупными и изолированными от ближайших ссылок. В этом случае адресат сможет их легко активировать с первой попытки.

Подготовительный этап

Прежде чем браться за разработку HTML-письма, необходимо создать новую папку на одном из дисков и назвать ее, к примеру, «Рассылки». Также необходимо скачать и установить на свой компьютер программу Dream weaver CS3. Данный продукт от Adobe представляет собой один из достаточно простых инструментов конструирования веб-сайтов. Он прекрасно подходит для разработки рассылочного письма в формате HTML.

Создание и сохранение документов

Прежде чем заниматься написанием текстовой части письма, необходимо открыть такую популярную программу-конструктор HTML-писем, как Dream weaverCS3 (DW), создать в ней документ, выбрав в качестве типа «Переходный HTML 4.01», а затем сохранить документ с расширением.html. В верхнем меню необходимо найти команду редактирования. После этого необходимо убрать галочку с чек-бокса «Использовать CSS вместо тегов HTML».

Инструкция

Перейдем к рассмотрению вопроса о том, как создать HTML-письмо. Для этого необходимо последовательно открыть меню «Вкладки» и «Таблица» и выставить нужные параметры таблицы. Так, к примеру, строки – 2, столбцы – 1, ширина – 700, сверху заголовок. Можно выставить границы, а можно обойтись и без них, указав нулевое значение. Далее формируют заголовок письма. Поскольку HTML-письмо предназначено для большого числа получателей, то часто используется оператор , который подставляет нужное имя получателя. В нижнем окне под названием «Свойства» выставляются нужные параметры шрифта, цвета и размера заголовка, а также цвет фона. Параметры курсора «По центру» и «По середине» выставляются в нижней части экрана. Далее необходимо вставить готовый текст письма или вписать его прямо в программе DW, выбрав нужный размер и тип шрифта, а также расположение текста на странице.

Процесс создания гипертекстовых ссылок

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

Вставляем картинки

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

— в нижней части письма внутрь основной таблицы вставляется еще одна таблица с тремя столбцами и параметрами для границы 0 пикселей;

— курсор необходимо выставить в том месте таблицы, где хотят видеть картинку;

— в нижнем окне отмечают «Посередине» и «По верхнему краю» для каждой секции;

— в верхнем меню выбирают вкладку «Вставка»;

— по надписи «Изображение» делаем клик. В выпавшем меню необходимо вставить скопированный нами адрес и нажать два раза по кнопке «Ок».

Просмотр

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

Кодировка

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

Отправка HTML-письма

— выбирают создание нового письма, путем заполнения строк «Имя» и «Адрес отправителя» и заполняют строку «Тема письма»;

— в верхнем левом меню отмечают HTML-код;

— вставляют скопированный в программе DW-код в поле «Источник»;

— проверяют корректность отображения посредством инструмента «Предпросмотр»;

— удаляют текстовую версию;

— тестируют письмо на спам при помощи одноименной кнопки, которая расположена рядом с кнопкой «Отправить».

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

— Cerberus – это набор отзывчивых шаблонов, позволяющий создавать письма, которые отображаются нормально как в Outlook,так и в мобильном приложении Gmail. Он позволяет использовать блоки кода HTML либо по отдельности, либо объединяя их.

— Really simple HTML email template – шаблон позволяет легко и быстро создавать рассылочные письма. Стоит отметить, что данные письма обладают крайне простым дизайном в виде одного столбца, в котором заключен призыв к действию.

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

Теперь рассмотрим немного другу задачу. Чтобы вставить код HTML в электронное письмо, например, gmail, используя браузер GoogleChrome, необходимо нажать на кнопку «F12» или выбрать в меню соответствующую последовательность команд. В открывшемся окне с кодом текущей страницы клиента gmail необходимо найти то место, куда нужно вставить HTML-письмо, кликнуть правым кликом мыши и выбрать «EditasHTML». После этого необходимо вставить скопированный HTML-код и использовать комбинацию клавиш Ctrl и Enter. Для той же цели можно скачать программу Mozilla Thunderbird.С помощью него также можно создать письмо, а потом выбрать пункт «Вставить», HTML и вставить туда код рассылки.

Инструменты

С помощью вордпрессовского плагина e-Newsletter можно профессионально управлять абонентами и рассылками. Стоит отметить, что и то, и другое делается при помощи панели администратора WordPress. Благодаря этому обеспечивается полный контроль, причем совершенно бесплатно, что не может не радовать. Еще одним простым инструментом является Bulletproof back groun dimages. Он представляет собой инструмент, позволяющий получить код для фонового изображения создаваемых писем. С помощью него корреспонденцию можно сделать намного красивее. Чтобы оформить письмо, необходимо просто указать URL понравившегося фонового изображения и выбрать его резервный цвет. Также здесь можно определить, должны ли данные параметры применяться по отношению ко всему телу HTML-письма или они предназначены только для отдельных ячеек таблицы. В результате должен быть получен готовый код, который необходимо скопировать и вставить в свой шаблон. Теперь вам точно известно, как отправить HTML-рассылку. Создание HTML-писем не представляет особой сложности, особенно если вам известно, как использовать готовые шаблоны, которых в сети интернет можно найти множество. Поэтому даже пользователи, которые не обладают особыми знаниями, могут легко справиться с этой задачей.

Электронные 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 колонка

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

Разделители

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

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

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

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

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

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

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

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

Это шапка

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 письма. Конечно существует много способов сделать это по-другому, но самое главное, чтобы все работало корректно.

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

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

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

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

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

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

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

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

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

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

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

В каждой строке мы создадим новую таблицу, для которой применим подход, схожий с приведенным выше. Мы также добавим соответствующие столбцы и правильные отступы, чтобы выровнять все объекты в 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" . "rn"; $headers .= "Content-type:text/html;charset=UTF-8" . "rn"; $headers .= "From: ContactNameGoesHere <" . $from . ">rn"; $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 » , подготовленной дружной командой проекта

Согласно данным сайта Statista, в 2018, количество пользователей электронной почты достигло 3,8 миллиарда. В то время как Gmail использует 1,4 миллиарда людей. Если посчитать, то получается, что 36,8% всех пользователей предпочитают данный почтовый клиент.

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

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

Хотите сделать то же самое всего за несколько минут?

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

В этой статье я:

• создам HTML шаблон сообщения;
• экспортирую его в аккаунт Gmail;
• освещу некоторые технические характеристики почтовика Gmail;
• и наконец, мы с вами увидим, как Stripo справляется с ними. Другими словами, мы покажем, почему именно наши совместимы с Gmail.

1. Создаем шаблон сообщения в Stripo

Прежде чем экспортировать сообщение в аккаунт Gmail, его необходимо создать.

Для этого есть несколько способов:

Первый способ это создание нового сообщения на базе наших .

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

Второй способ - создание HTML шаблона с нуля.

Для этого вам нужно будет войти в ваш аккаунт, перейти в раздел «Шаблоны», после — выбрать раздел «Базовые шаблоны». Там вы найдете наш «Мастер шаблон». Создайте один шаблон на все случаи жизни. И просто комбинируйте блоки в соответствии с целями вашем маркетинговой кампании.

Третий способ — экспортировать/вставить HTML код.

В этом случае вам нужно будет в вашем личном кабинете выбрать вкладку «шаблоны» и выбрать мой HTML.

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

Так как же вам кастомизировать наши шаблоны?

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

Шаг 1. Как установить прехедер в Stripo. И как будет выглядеть ваше сообщение

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

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

(Шрифт Arial, превью сообщения)

Шаг 2. Как добавить хедер и логотип в шаблон в Stripo. И как будет выглядеть ваше сообщение

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

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

Шаг 3. Как добавить баннер в Stripo. И как будет выглядеть ваше сообщение

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

Кстати, использование больших фотографий людей, а не рисованных изображений, является трендом 2018 года. Я с гордостью говорю о том, что на данный момент мы единственный редактор, который позволяет применять особые фильтры к баннеру. После чего вы можете разместить текст поверх баннера и красиво «упаковать» его в кастомный/декоративный шрифт.

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

Шаг 4. Как добавить структуры в Stripo. И как будет выглядеть ваше сообщение

Изображение и текст, 2 фото и 2 текстовых блока в ряд? Это решать только вам. Это достаточно распространенная опция. Многие редакторы позволяют размещать 2 или 3 блока в ряд. Но только мы позволяем использовать целых 4 блока в одной структуре. Сюда вы можете вставлять изображения, текст, кнопки, видео и т.д.

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

Три блока в структуре:

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

4 блока в структуре:

Применяйте фоновые изображения или цвета для каждого блока отдельно или же единый фон для всей структуры.

Шаг 5. Как вставить иконки социальных сетей. И как будет выглядеть ваше сообщение

Располагайте их там, где душа пожелает. Что же особенного в наших иконках социальных сетей? Мы предлагаем более 45, не ограничиваемся стандартными Facebook, Youtube и Instagram. Для вашего удобства, мы собрали их все воедино. И в качестве бонуса, вы можете выбирать их цвет и задавать желаемую форму.

Сделать это очень просто: вам нужно перетащить блок «Социальные сети» в требуемую структуру, выбрать форму иконок, цвет, и вставить ссылки в соответствующее поле.

Шаг 6. Библиотека блоков, и как она поможет вам в создании писем для Gmail

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

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

2. Экспорт HTML сообщения в Gmail

Это мой любимый шаг.

Однако, перед экспортом созданного сообщения, вам нужно воспользоваться опцией «Предпросмотр». Как? Просто кликните на кнопку «Предпросмотр», она расположена прямо над вашим шаблоном и имеет форму глаза:

Здесь вы увидите и десктопную, и мобильную версии письма. После можно переходить к экспорту. Кликните на кнопку «Экспорт».

У вас появится вот такое вот поп-ап окошко:

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

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

Примечание: при экспорте ваше сообщение попадает в папку «Черновики».

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

Примечание: сообщение по-прежнему можно редактировать.

3 и 4. Технические ограничения Gmail, и как Stripo справляется с ними

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

Гипотеза 1. Изображениям требуются ссылки

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

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

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

Конечно же, она никуда не приведет покупателей, но это убережет ваших подписчиков от надоедливой кнопки «Скачать».

Гипотеза 2. Изображения без alt атрибута попадают в Спам

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

Я намеренно отправила множество сообщений с не заданным alt атрибутом, но все они были успешно доставлены в папку «Входящие». Хочу заметить, что сегодня я тестировала только один почтовый клиент — Gmail.

Посему, не могу утверждать, что ситуация сложится аналогично с почтовиками Outlook и Apple Mail. Следовательно, если вы планируете делать отправлять сообщения не только пользователям Gmail, то вам потребуется прописывать alt текст, чтоб успешно пройти спам фильтры.

Но если вы забудете добавить таковой, то наша система автоматически скопирует имя изображения, какое бы оно ни было. Однако, даже если вы случайно, или намеренно, как я, удалите имя изображения и alt атрибут, то при экспорте сообщения наша система подставит его обратно. Если же вы не указывали никакого имени и alt текста, то Stripo автоматически подставит атрибут alt=“”.

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

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

Гипотеза 3. Gmail обрезает сообщения

Да, это правда. Gmail “обрезает, все сообщения, которые весят более 102 kB. Внизу сообщения Gmail покажет кнопку “посмотреть сообщение полностью”. На данный момент нет технической возможности избежать этого. Но с нашей помощью вы можете взвесить сообщение:

• кликните на кнопку “экспорт”;
• выберите “HTML”;
• загрузите HTML;

• и потом просто правой клавишеей мыши проверьте “Свойства”.

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

Все очень просто!

Гипотеза 4. Gmail не поддерживает класс

Неверно. Gmail передает и корректно отображает данные атрибуты. Проверено.

Гипотеза 5. Кнопка “Undo” не срабатывает при отправке массовой рассылки

Абсолютно неверно, если вы используете рассылку через Gmail, а не через Mail Merge. Все, что вам для этого нужно — войти в настройки, выбрать пункт “Отмена отправки” и выбрать время 5, 10, 20 или 30 секунд. Я применила данную опцию при массовой отправке сообщений в тестируемом почтовике, и все сработало верно. Никто мое сообщение не получил.

Гипотеза 6. Текстовые блоки, содержащие более 8500 знаков, удаляются

Как копирайтер или же просто как женщина, я люблю длинные предложения, подробные описания. Поэтому я решила вставить одну из статей в текстовый блок письма. В статье более 10000 знаков, не считая пробелы. Я отправила это сообщение своему другу. Оно было доставлено полностью, включая мою “поэму”. А это значит, что гипотеза не подтверждена. Что, на самом деле, прекрасно. Хоть я и очень сомневаюсь, что кто-либо станет рассылать столь длинные сообщения своим покупателям.

Гипотеза 7. Cсылки в Gmail-сообщениях

Я слышала, что Gmail самостоятельно подставляет ссылки к электронным адресам и телефонам в сообщениях. Другими словами, он делает их кликабельными. Я протестила массу писем с мобильными номерами и email адресами. И знаете что? Ни один из номеров не стал кликабельным. Мне по-прежнему нужно было выделять и копировать их для осуществления звонков.

Но! Ситуация с мобильными адресами немного смешная. Они либо становились серого цвета при отправке, но при этом были кликабельными. Либо же они становились голубого цвета, но при этом не активными.

5. Тестирование

Всегда перед экспортом и отправкой HTML сообщения в Gmail его нужно протестировать.
Первым шагом вам нужно выбрать режим " ". Вторым - .

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

6. Вывод

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

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

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

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

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

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

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

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

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

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

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

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


В открывшемся коде, перед нами сразу предстанет строчка body id="tinymce", кликнув по котрой правой клавишей, необходимо выбрать пункт "Edit As HTML".


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


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

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

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