Как верстать email письма

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

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

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

Бесплатные сервисы для работы с шаблонами

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

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

Например, такой макет можно выбрать, чтобы сделать акционную рассылку в День Рождения пользователя:

А такую для брошенной корзины магазина товаров для туризма:

Сайт с бесплатными готовыми HTML-шаблонами для welcome-цепочек, объявлений, уведомлений и других видов писем.

Такой макет Litmus предлагает для рассылки-квитанции:

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

Виды шаблонов

• Готовый шаблон;
• Блочный редактор;
• Собственный HTML-шаблон.

В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».

Блочный редактор. Это инструмент, благодаря которому создают шаблон из готовых блоков. Знания HTML-кода не нужны.В Mailigen есть 10 блоков, их можно переставлять местами, добавлять и удалять:

• Текст;
• Видео;
• Кнопка;
• Заголовок;
• RSS-контент;
• Изображение;
• Группы в соцсетях;
• Шеринг в соцсетях;
• Динамический контент;
• Горизонтальный разделитель.

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

Собственный HTML-шаблон. Это отдельный HTML-файл рассылки. Если ты не верстальщик и не программист, уже на этом этапе определение «HTML-файл» может вызвать ступор.

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

Отправка печатных форм документов на почту в pdf. Без изменения конфигурации

Помещаем HTML и PHP код отправки формы в один файл

Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.

Давайте посмотрим как изменить PHP код в файле send.php:

Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.

Создание области конента

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

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

Теперь вставим наш контент и добавим padding для средней ячейки.

Добавим две колонки с контентом для строки 3. Нам нужен margin между двумя ячейками, но margin не поддерживается, поэтому мы создадим таблицу с тремя колонками и средняя колонка останется пустой.

Сколько бы я не придерживался процентов, но, если Вам нужен контент определённого размера, может быть непросто перевести его в проценты (например, колонки будут равны 48,1%, что может привести к путанице ). Именно поэтому, учитывая, что наши изображения равны 260px, мы создадим колонки шириной 260px, с ячейкой для margin в 20px посередине. (В общем выходит 540px: 600px ширина таблицы минус padding 30px с каждой стороны). Обязательно обнулите font-size и line-height и добавьте неразрывный пробел в ячейку с margin.

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

Теперь добавим изображение и контент в эти колонки. Т.к. нам нужно несколько строк, вставим ещё одну таблицу, потому что мы не можем использовать colspan или rowspan. Мы также добавим padding между изображениями и скопируем каждую колонку.

Здесь мы установили ширину изображений с помощью HTML на 100% ширины колонки. Это, опять же, для того, чтобы сделать письмо адаптивным. Мы можем использовать только медиа запросы, чтобы изменить ширину родительского элемента. Нам нужно переопределить высоту в пикселях, потому что используя теперь не будет работать везде (кашель, Outlook). Так что зададим в пикселях. Это значит, нам придётся установитьэтим изображениям используя медиа запросы, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Как только установим ширину в процентах, не нужно будет ничего переопределять. Чем меньше элементов для переопределения, тем лучше.

Как сделать текст в редакторе Paint

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

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

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

13 приёмов в теме письма: вдохновляемся удачными примерами

Разберём на примерах способы, которые помогут создать привлекательную тему для рассылки.

Аллюзия и метафоры. Литературные приемы — хорошие помощники для тех, кто сочиняет заголовки. Аллюзия — намёк на общеизвестные факты, исторические события, литературные произведения, фильмы и т.д.:

• Без бумажки НЕ букашка, или что делать за границей без документов (Kupibilet).
• Как меняться, когда есть лень и «завтра»? Чип и Дэн спешат на помощь (Издательство МИФ).
• Ты в ответе за то, что не доучил (Lingualeo).

Метафора — слово или выражение, которое употребляется в переносном значении. Этот приём помогает сделать тему более образной и понятной:

• Где у него кнопка? Управляем лифтом настроения (Издательство МИФ).
• Поймай летнюю распродажу курсов за хвост (Lingualeo).

Цифры. Людям нравятся цифры

Однако важно следить, чтобы они были в мире читателя и повышали ценность сообщения:

• 750 рублей за рекомендацию (Тинькофф Банк).
• 10 бюджетных рецептов обедов на 100 рублей (Лайфхакер).

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

• Как кататься по миру за чужой счет (Т—Ж).
• Как проверить, не скручен ли пробег у машины (Аuto.ru).

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

• Как я поняла, что пора разводиться: личный опыт (Лайфхакер).
• Как мошенник развел меня на 10 евро (Skyeng).

Актуальность

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

Запрет. Помните монолог Саши про вилки из фильма О чем говорят мужчины? Тебе сказали, что нельзя есть вилкой. И сразу захотелось именно вилкой! Попробуйте что-нибудь запретить  подписчикам уже в теме письма, чтобы побудить их к действию:

• Страшное безудержное хвастовство — не читайте ?(Дарья Манелова — Instмаркетолог).
• Не покупайте ничего! Дождитесь распродажи! Распродажа 05.11.17 (Intimo).

Интрига

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

Мне по душе темы, в которых есть как интрига, так и намёк на содержание рассылки:

• Если бы в России было 100 жителей (Т-Ж).
• Как флиртовать при помощи книг (LiveLib).
• Кейс: какое письмо помогло заработать 13 миллионов рублей (Carrot quest).

Чувства. Ильяхов постоянно твердит, что в текстах нужно опираться на чувственный опыт читателя (всё, что можно увидеть, услышать, понюхать, попробовать и потрогать). Такой приём делает текст сильным и повышает его убедительность. Так почему бы не обратиться к ощущениям читателя уже в теме письма:

• Ми-ми-ми отпуск: где почесать панду за бочок и полюбоваться фламинго (KupiBilet).
• Посмотрите, как выглядят магазины будущего (Greenpeace).

Срочность. Этот приём позволяет сыграть на страхе человека упустить выгодное предложение. Всем знакомо: только сегодня, только в ноябре и т.д. Поднадоело, но всё ещё работает. Кроме того, всегда можно придумать что-то более оригинальное: Зомби-руки сдавили горло Лео! Скорей! (Lingualeo).

Другой вариант использовать дефицит времени — рассказать, как что-то полезное можно сделать быстро:

• Как за полчаса поднять эффективность сайта и рекламы (Агентство интернет-маркетинга ЛидМашина).
• Чек-лист: улучшаем внешний вид сайта за 15 минут (Tilda).

Шутка. Сложный приём. Надо быть уверенным, что ваш юмор поймут подписчики:

• Носки, трусы, гантеля, лещ — что подарить тебе, родной? (Издательство МИФ).
• Для тех, кто в салате (Lingualeo).

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

• Чек-лист для дизайнера: что проверить в макете перед сдачей (EmailSoldiers).
• Возвращаем, сокращаем и оптимизируем налоги: лайфхаки и инструкции (Inc.Russia).

Аудитория. Укажите, кому предназначено письмо, уже в теме: программистам, мамочкам в декрете, фотографам, вегетарианцам. Так у вас больше шансов, что нужные люди откроют письмо:

• О чём забывают email-маркетологи в декабре? (EmailCompetitors).
• ? Тому, кто плохо себя вёл (PichShop).

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

Два главных критерия: заботимся о подписчиках

Методов и приёмов создания заголовков много. Чтобы не потеряться в деталях, я для себя выделила два главных критерия, которым должна соответствовать любая тема письма:

Релевантность настолько важна, что маркетолог Oracle Чэд Уайт предложил ввести понятие «сожаление об открытии» (opener’s remorse). Согласно исследованиям, нерелевантные рассылки — главная причина отписок пользователей.

2. Польза

Почему получателям важно прочитать ваше письмо? Ответ на этот вопрос лучше отразить уже в теме

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

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

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

Как поменять местами столбцы с помощью горячих клавиш

Внимательность вам в помощь…

Итак, подытожим. После Html атрибута MAILTO через двоеточие указывается Емайл, на который должно быть отправлено сообщение. Далее при необходимости ставится знак вопроса (без пробелов) и указываются какие-то из дополнительных параметров (subject, body, cc, bcc). Они опять вводятся в строке без пробелов, а их значения указываются после знака равно. Параметры друг от друга отделяются амперсандами & (опять же без пробелов). Вот и все. Видите, как просто.

Главное не забыть закрыть двойные кавычки после ввода значения последнего параметра, да и вообще быть внимательнее. Давайте для примера введем что-то простое, не требующее использования спецсимволов (разве что только &amp; вместо & все же придется использовать), которые сильно снижают визуализацию синтаксиса записи MAILTO: Текст Емайл-ссылки

<a href="mailto:admin@ktonanovenkogo.ru?subject=Тема&amp;body=Текст">Текст Емайл-ссылки</a>

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Names 4 Brands

Как зарабатывать на Твиче?

Играя в компьютерные игры, многие стримеры получают за это неплохие деньги. Как заработать деньги на стримах? Сегодня существует несколько способов заработка. Одной из самых популярных и качественно монетизированных платформ является Twitch tv. Давайте поговорим о ней более подробно.

Требования, предоставленные данной интернет-платформой, нельзя назвать простыми:

• Транслируемый контент не должен нарушать правила, узнать о которых можно на сайте Twitch.tv;
• Транслировать свою игру нужно постоянно, не менее 3-х раз в неделю.
• Показатель среднего количества зрителей, наблюдающих за видеотрансляцией, должен быть выше 500 тыс. человек. Если подать заявку, получив такой показатель один раз, то ее не примут.

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

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

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

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

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

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

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

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

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

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

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

Другие стили

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

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

Не поднимайте подбородок

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

Рассмотрим теперь несколько другую задачу. Чтобы вставить код HTML в электронное письмо, например, gmail используя, как в приведенном ниже примере браузер Google Chrome, следует:

• нажать на кнопку «F12» или выбрать соответствующую последовательность команд в меню;
• в открывшемся окне с кодом текущей страницы клиента gmail найти то место, куда должно быть вставлено HTML-письмо, сделать правый клик и выбрать «Edit as HTML».
• вставить скопированный HTML код;
• нажать комбинацию двух клавиш «Ctrl» и «Enter».

Для той же цели можно скачать простую в использовнии программу Mozilla thunderbird. С ее помощью можно создать письмо, а потом сначала выбрать пункт «Вставить», а затем «HTML», и вставить туда код своей рассылки.

Бизнес модель сервиса Dropbox

Синтаксис ссылок с MAILTO для отправки Емайл сообщений

Синтаксис до безобразия прост, хотя итоговая конструкция и может показаться через чур перегруженной. Знаете какой будет самый простой вид ссылки использующей MAILTO? Скорее всего догадываетесь — это когда в открывшемся почтовом клиенте введется только лишь Емайл-адрес того, кому это письмо будет отправлено, а все остальные поля (тему и текст сообщения) пользователь должен будет заполнять самостоятельно. Выглядеть это дело будет примерно так: Отправить письмо админу KtoNaNovenkogo.ru

<a href="mailto:admin@ktonanovenkogo.ru">Отправить письмо админу KtoNaNovenkogo.ru</a>

Т.е. всего лишь заменяете в теге ссылки А (она же и гиперссылка А) атрибут HREF на MAILTO, а сразу после него без пробела, но через двоеточие пишите тот Емайл адрес, который вставится в поле «Кому» при создании нового сообщения в открывшемся почтовом клиенте на компьютере пользователя.

Проще некуда. Но вот полная запись MAILTO может выглядеть намного сложнее, и схематично ее можно представить так (квадратные скобки писать не нужно — они приведены только для визуального отделения отдельных частей записи друг от друга, чтобы вам это было проще разложить в мозгу по полочкам:

Т.е. в предыдущем (простейшем) примере мы использовали только:

mailto:

Но, как видите, можно после этого дела поставить знак вопроса (?) и дописать много чего интересного, а именно такие вот параметры:

1. subject= — тот текст, что вставится в поле «Тема» при создании нового сообщения в открывшемся почтовом клиенте на компьютере пользователя.
2. body= — вы можете и текст сообщения полностью здесь ввести, или хотя бы его начать, чтобы пользователю не нужно было бы, например, набирать «Здравствуйте!»
3. cc= — на указанный тут Емайл-адрес будет отправлена копия письма
4. bcc= — а на этот Емайл будет отправлена скрытая копия письма (он не будет отображаться у других получателей этого сообщения): MAILTO-ссылка со скрытым Емайл-адресом

   <a href="mailto:admin@ktonanovenkogo.ru?subject=Тема&amp;body=Текст&amp;bcc=qwertydmitriy@gmail.com">Текст Емайл-ссылки</a>

Последние два параметра не факт, что вы будете использовать, тем более, что если требуется отправить письмо на несколько адресов, то проще их будет перечислить через запятую прямо непосредственно после MAILTO: Отправить письмо админу KtoNaNovenkogo.ru

<a href="mailto:admin@ktonanovenkogo.ru%2C%20qwertydmitriy@gmail.com">Отправить письмо админу KtoNaNovenkogo.ru</a>

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

1. Вместо запятой и пробела следующего за ней вставляйте — %2C%20
2. Вместо & — используйте &amp; (точка с запятой в конце обязательны)
3. Вместо пробела — ставьте %20
4. Перенос строки — можно задать с помощью конструкции %0D%0A

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

Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.

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

Загрузить картинки, используемые в верстке письма на Yandex диск (если отправляете почту с Yandex, либо в облако Mail.ru, если отправляете почту с mail.ru). Далее указать прямые ссылки на эти изображения в сервисах

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

Лучший вариант — это перекодировка изображения в код base 64 – меньше движений мышкой, больше надежности (изображение не удалят с Yandex диска, оно уже вложено в само письмо).

Помещаем HTML и PHP код отправки формы в один файл

Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.

Давайте посмотрим как изменить PHP код в файле send.php:

Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.

Проверьте работу формы отправки на хостинге с бесплатным 30-дневным периодом для тестирования.

Создания шаблона HTML письма

Для отправки сообщения по почте не обязательно создавать отдельный документ, достаточно написать текст и воспользоваться функцией php mail, но иногда требуется добавить графику и применить стили, чтобы текст выглядел более представительно. В данном случае необходимо начинать разработку с dom объектов или, проще говоря, html-теги. Каждый документ имеет начальную структуру.

Дальше нужно составить структуру из таблиц. Каждый tag table будет отвечать за один блок с контентом. В целом табличная верстка указана на следующем скриншоте.

В тэге center мы поместим основной код. В качестве примера будет приведен видеокурс одного популярного движка unreal engine. Результат письма можно видеть на изображение. Анонс видеокурса пришел по почте и отобразился как надо.

Понятно, что уведомление о новом курсе, состоит из картинки и текста, разбитого на две колонки, где описано сравнение преимущества движка Unreal Engine перед Unity. Кажется, все просто, но на самом деле понадобится прописать большое количество тэгов и почти к каждому привязать стили. Полная структура будет находиться между тегами center. Почтовое сообщение состоит из пяти таблиц.

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

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

Я покажу оба варианта.

Первый:

Второй, загружать изображение в “td” через атрибут style. Отлично работает на mail.ru.

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

Не стоит пугаться такого объема кода, в основном он повторяется, стоит обратить внимание на такой параметр как font-family, он отвечает за шрифт. Пример шрифтов, которые точно работают

Пример шрифтов, которые точно работают.

Отправляем тестовое письмо и смотрим результат

Протестируем наш готовый шаблон и посмотрим, что получилось. Есть много разных сервисов, чтобы это сделать, но мы воспользуемся старым способом функцией mail от php.  Для отправки обычного сообщения достаточно составить краткое описание и передать в один из параметров функции mail. Когда дело касается html-кода, здесь добавляем полностью целиком document.

Разумеется, копировать и вставить в php файл весь документ не правильно, придется вставлять кавычки, чтобы скрипт в итоге заработал.

Специальная функция file_get_contents может решить проблему и получить наш готовый шаблон. Она способна считывать страницу сайта. Просто добавьте в неё url ссылку и сделайте присвоение к переменной, например, к message.

Несколько популярных шаблонов

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

• Cerberus. Этот набор так называемых отзывчивых шаблонов позволяет создавать письма, нормально отображаемые как в мобильном приложении Gmail, так и в Outlook. Он позволяет использовать блоки HTML-кода либо по отдельности, либо объединяя их.
• Ink — это заготовка писем, рассылки которых практически универсальны и совместимы с любыми устройствами и клиентами.
• Really simple HTML email template. Шаблон позволяет создавать рассылочные письма очень просто и быстро. Правда, у них будет крайне простой дизайн в виде одного столбца, в котором заключен призыв к действию.

Структура писем

Структура писем практически не отличается от структуры обычной веб-страницы:

Прехедер

В прехедере чаще всего располагается тема письма и ссылка на веб-версию.

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

Шапка письма (хедер)

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

Вот пример шапки письма от Амедиатеки, здесь просто логотип:

А вот письмо Ламоды: здесь и логотип, и информация по накопленным баллам, и меню:

Тело письма

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

Подвал письма (футер)

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

Наши Услуги

Создание Структуры и Шапки.

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

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

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

Хорошо, в следующем шаге сфокусируемся на Строке 1. Нам необходимо задать padding в ячейке и затем вставить изображение.

Использование Padding

Когда используете padding в HTML письмах, всегда необходимо задавать каждое отдельное значение  (top, right, bottom и left), в противном случае результаты могут быть непредсказуемы. Я считаю, здесь всё ещё можно использовать сокращённую форму записи , но если у Вас возникнут проблемы, напишите полную форму

Если у Вас всё же возникли большие проблемы с padding (например почтовый клиент удаляет Ваш CSS), не используйте их совсем. Просто используйте пустые ячейки, чтобы создать пространство. Совсем не обязательно использовать gif распорку, можно просто добавить для ячейки, вставить внутрь  и задать определённую высоту или ширину. Пример ниже:

Также обратите внимание, что безопаснее использовать padding в тэгах, а не в

или

. Они ведут себя намного более непредсказуемо

Итак, мы использовали немного инлайновых стилей CSS, чтобы задать padding для ячейки. Теперь вставим изображение, добавив alt и . Это делается для того, чтобы некоторые почтовые клиенты не добавляли пробелы под изображением. Отцентрируем изображение с помощью для нашего <td> тэга. Мы также добавили alt тэг, который необходим для того, чтобы, когда наше письмо будет только загружаться, оно в большинстве случаев будет без изображений.

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

В этом примере, однако, мой заголовок скорее лишний.

Сервис для быстрой верстки писем

Чтобы начать работать с сайтом нужно перейти и нажать на эту кнопку.

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

Щелкнув “готово” появится вкладка “контент” с блоками. Используя эту панель, пользователь может добавлять картинки, кнопки, таблицы и многое другое. Интерфейс интуитивно понятный. Завершив редактирование, нажимаем на зеленую кнопочку в углу экрана “Далее”. Появится сообщение “html генерируется”, ждем отсчет времени. Потом появится сгенерированный cod рассылки и его можно скопировать и вставить в файл. Размер кода, достаточно большой несколько десятков килобайт.

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

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

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

Не забываем поставить лайк и поделиться статьей. Всех благ.

Как происходит работа над дизайном писем

Первое знакомство

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

Обсуждение структуры письма с копирайтером

Подготовку письма начинают с текста рассылки. Без него делать макет бессмысленно.

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

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

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

Набросали макет, показали менеджеру. Письмо оказалось длинным и малоинформативным. Текстовые блоки разные по объёму, иллюстраций нет:

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

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

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

Узнайте, сколько для вас будет стоить

Обратитесь к писателям. Если текст уже согласован, есть два варианта: продолжить работу, или попробовать согласовать с клиентом изменения в тексте. Если аргументировать изменения, клиент, как правило, не возражает.

Передача верстальщику и проверка вёрстки

Макет готов. Менеджер счастлив, клиент согласовал. Время передавать работу в вёрстку. Но на этом работа дизайнера не закончена.

Всегда нужно контролировать вёрстку. Не поленитесь, посмотрите вёрстку или попросите прислать вам тест. Бывает, что свёрстанное письмо незначительно отличается от макета, как в этом примере:

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

Целевое действие в письме

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

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

Во-вторых, кнопка должна быть заметной. Для этого лучше использовать контрастные к фону цвета. Также она должна быть достаточно крупной. Минимальная рекомендуемая высота — 35 px. Средняя ширина указательного пальца 16-20 мм, это приблизительно 45 px. Пальцы у всех разные, но производители телефонов дают свои рекомендации. В гайде Apple тач-область — 44 px, Microsoft рекомендует размер 34 px. Если размер кнопок будет меньше, попасть в них и выполнить целевое действие будет сложнее.