Как верстать HTML письма: пошаговое руководство с примерами + исходники шаблона письма для скачивания

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

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

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





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

Правило №1

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

Как верстать html письма правило 1

Правило №2

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

Добавление тегов html

Правило №3

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



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

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

Структура документа

Важно: обратите внимание на meta-tag с именем viewport, он нужен, чтобы подогнать экран под смартфоны. В стилях прописано media, где в условиях указано, при каких обстоятельствах уменьшится размер шрифта. В нашем случае шрифт станет 16px при разрешении экрана 600px.

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

Табличная верстка

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

Таблица html

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

  1. Заголовок – у нас видеокурс по разработке игр на движке. Поэтому название, будет соответствующее “Создание игр на Unreal Engine 4”.
  2. Картинка – как и товар в интернет-магазине, видеокурс нуждается в оформлении скриншотом, поэтому потребуется добавить одну картинку. Там есть свои нюансы, как это сделать, об этом чуть ниже.
  3. Вопрос. Чтобы сконцентрировать внимание клиента задаем вопрос. Клиент захочет узнать ответ и прочитает сравнительные характеристики.
  4. Сравнение – здесь пользователь узнает, почему unreal engine лучше unity.
  5. Ссылка – узнав о бесплатных возможностях движка, пользователь может захотеть купить видеокурс и соответственно ему понадобиться кнопка, “Заказать сейчас”.

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

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

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

Внимания: ситуации бывают, разные я не берусь утверждать, что мой вариант единственно правильный, но так получилось, что Google и Yandex смогли получить <img> картинку, а вот mail.ru пошел в отказ, после многочисленных попыток было принято решение использовать другой вариант.

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

Первый:

код письма

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

Как верстать HTML письма: пошаговое руководство с примерами + исходники шаблона письма для скачивания

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

Полный текст кода

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

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

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

Пример шрифтов

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

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

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

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

Функция письма

Внимание: все параметры в php файле замените на свои: email, название отправляемого письма, сообщение, header (последний пункт функции mail) и url-адрес, где находится html-файл.

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

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

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

Генератор html письма

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

Выбор шаблона письма

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

Редактор письма

Щелкнув “готово” появится вкладка “контент” с блоками. Используя эту панель, пользователь может добавлять картинки, кнопки, таблицы и многое другое. Интерфейс интуитивно понятный.




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

Внимание: старайтесь избегать чрезмерно больших документов, 30-40 кб, это нормально, но если больше ста, то почтовики не смогут его загрузить. Например, Google обрезает документ и его можно отобразить, только нажав на кнопку “Показать полностью”. Пользователи редко нажимают на эту кнопку.

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

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

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

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

Рейтинг
( 3 оценки, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: