Письма в html формате

Создание с нуля HTML-шаблона электронного письма

Дата публикации: 2019-09-11

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

Что мы создаем

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

Начинаем с HTML-документа

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Прекрасные 2D иконки от Пьера Бородина на Dribbble

Иконки социальных сетей от Metrize Icons

Теперь, как мы уже писали в предыдущем руководстве, вам нужно начать HTML-документ электронного письма с XHTML-документа:

После этого мы можем приступить к созданию остальной части конструкции.

Создайте раздел body и основную таблицу

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

Мы также добавим таблицу шириной 100%. Он выполняет роль тега body для нашего электронного письма, поскольку стилизация тега body не поддерживается полностью. Если вы хотите добавить цвет фона к «телу» электронного письма, вам нужно вместо этого применить его к этой большой таблице.

Установите для cellpadding и cellspacing ноль, чтобы избежать неожиданных пустых пространств в таблице.

Примечание: мы собираемся оставить border=»1″ для всей таблицы, чтобы мы могли видеть скелет макета. Мы удалим его в конце с помощью простого поиска и замены.

«Если в HTML существует атрибут, используйте его вместо CSS»

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

Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML электронных писем: если в HTML существует атрибут, используйте его вместо CSS. Мы заменим наше маленькое приветствие «Hello!» этой таблицей:

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

Создайте структуру и заголовок

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

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

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

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

При использовании отступов в электронном письме вы всегда должны указывать каждое отдельное значение (верхнее, правое, нижнее и левое), в противном случае вы можете получить непредсказуемые результаты. Я считаю, что вы можете использовать сокращенную запись, то есть padding: 10px 10px 8px 5px;, но если у вас возникли проблемы вы можете использовать полную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Если у вас возникают еще большие проблемы с отступами (например, если платформа отправки удаляет ваш CSS), не используйте их вообще. Просто создайте пустые ячейки, чтобы задать пространство. Нет необходимости использовать пустые GIF, просто убедитесь, что вы добавляете style=»line-height: 0; font-size: 0;» для ячейки, размещаете внутри нее и задаете ей явную высоту или ширину. Вот пример:

Также обратите внимание, что использование тегов TD безопасно, а тегов P или DIV — нет. Они ведут себя намного более непредсказуемо.

Итак, мы будем использовать некоторые встроенные CSS для добавления отступов ячейки. Затем мы вставим изображение, добавив альтернативный текст и указав style=»display:block;», что является обычным исправлением, которое не дает некоторым почтовым клиентам, добавлять пробелы под изображениями. Мы разместим изображение по центру, добавив align=»center» к тегу td. Мы также добавим тег alt, который важен для начальной загрузки электронного письма, которая в большинстве случаев будет отключена.

Читать еще: Ссылка на почту в html

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

Лучший сервис для массовых рассылок

Удобный инструмент для быстрых первых и повторных продаж

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

7 лучших сервисов для видеозвонков

О чём писать в рассылке во время коронавируса

Антивирусный пакет для бизнеса

Школа email-маркетинга со скидкой 30%

Бесплатная консультация по email-маркетингу

UniSender помогает малому и среднему бизнесу

Почему email-маркетинг

Email-маркетинг в 4 раза прибыльнее других маркетинговых каналов
По ссылке в письме перейдёт в 5 раз больше людей, чем в посте на Facebook
Читатели рассылки проведут на вашем сайте на 80% больше времени, чем те, кто её не получали

Увеличивайте продажи с помощью рассылок:

Соберите базу контактов

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

Отправьте первое письмо

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

Улучшайте результаты

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

Забудьте про скучную работу

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

Каждый клиент UniSender получает

Готовую стратегию
email-маркетинга
для вашего бизнеса

Круглосуточную
консультацию от
наших специалистов

Доступ ко всему
функционалу сервиса

700 000 компаний уже выбрали нас

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

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

Мы активно используем сервис «Юнисендер» для проведения массовых рассылок писем с 2016 года. При работе с сервисом не возникало проблем: интерфейс удобный, понятный даже начинающему пользователю. Нам удалось автоматизировать ряд процессов и улучшить качество писем в части дизайна и статистических показателей (открываемость, прочтение). В сервисе доступная аналитика и гибкая система тарифов. Стоит отметить блог Юнисендера и службу поддержки клиентов. Я всегда оперативно находила ответы на любые вопросы с помощью данных ресурсов, а также узнала много полезной информации по трендам email-маркетинга.

Email маркетингом занимаюсь занимаюсь 7 лет и за это время был опыт работы в 5 сервисах рассылок. После положительного опыта работы с Unisender, внедрила этот сервис в 3 компаниях.

Основными причинами моего выбора в пользу Unisender было удобство сервиса, грамотный UX сайта и редактора писем, прозрачная статистика, связь с тех поддержкой 24/7.

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

За год пользования сервисом мы успели хорошо разобраться в его технических возможностях и на сегодняшний день их более чем хватает. Но радует другое, Unisender не только внедряет разные улучшения, но и рассказывает своим клиентам как ими пользоваться, и даже предлагает протестировать бета-версии! Например, когда мы использовали «письма по событию», нам рассказали о более продвинутой «Автоматизации» и открыли доступ к бете. А совсем недавно появилась функция «отправка в лучшее время» и мы сразу узнали об этом из чата поддержки. Это очень современный подход, так держать!

Мы сотрудничаем с сервисом Unisender более трех лет. За это время мы неоднократно убедились в профессионализме команды, ответственном подходе к решению любых задач. Отдельно хотим отметить готовность идти навстречу! Нерешаемых вопросов просто нет. Всем желаем таких партнеров!

Читать еще: Html в xml

Для одного из клиентов нашего агентства мы заработали 15000$ за 1,5 месяца объединив социальные сети и email-рассылки. А по другому получили рекордный ROMI 9700% и сделали продажи на сумму 12000000 рублей. На уровне пользователя нравится простота в использовании и хорошая тех.поддержка. На уровне партнёра мы очень ценим дружеские взаимоотношения, открытость к новым идеям и возможность участия во всевозможных мероприятиях

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

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

Отправка html-письма при помощи web-интерфейса Gmail

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

Эту серию обзоров начнём с Гугловского Gmail-а. Как и для двух других самых распространённых, но уже отечественных сервисов, Mail.ru и Yandex-почта, он не отличается дружелюбностью интерфейсов для создания html-писем, ни в лучшую, ни в худшую стороны. Неудобно, но возможно — самое подходящее определение.

Видео

1 этап — ревизируем шаблон нашего html-письма

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

2 этап — создаём письмо из своего html-шаблона в среде браузера

Итак, логинимся на Gmail, заходим в свою почту и жмём на «Написать» слева вверху

Рис. 1

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

Рис. 2

Теперь решаем задачу вставки html-кода. Просто скопировать/вставить плодов не принесёт, ибо браузер воспримет эту вставку, как просто текст. Поэтому применим военную хитрость и внедрим код нашего письма в код станицы браузера. Итак, правый клик по полю для ввода текста письма. В выпавшем контекстном меню выбираем «Просмотреть код».

Рис. 3

Все примеры действий, которые здесь озвучены, базируются на использовании «родного» для Gmail браузера, Google Chrome. Соответственно, используются и названия окон и команд из него. Но в целом, алгоритм универсален, и по аналогии можно действовать и в других браузерах.

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами

Рис. 4

Отметим, что горизонтальная компоновка окон на этом этапе работы более удобна, и привести окна к такому порядку поможет раскрывающийся список под тремя точками справа вверху вспомогательного окна, как показано на рисунке выше, и в нём надо выбрать средний вариант, «Dock to bottom».

Правый клик по выделенному блоку

Рис. 5

Блок с выделением трансформируется в текстовый блок, пригодный для правки. Выделим всё его содержимое, правый клик по выделенному и выберем «Копировать».

Рис. 6

Теперь нам придётся призвать на помощь текстовый редактор, самый простой — «Блокнот». Делаем с ним два действия. Первое, открываем в нём пустой, чистый без текста файл. И в него копируем содержимое буфера обмена, то, что скопировано нами на предыдущем шаге.

Рис. 7

Им же, «Блокнотом», через контекстное меню и его команду «Открыть с помощью» откроем файл с нашим html-письмом (шаги 2 и 3 на предыдущем рисунке).

Выделяем в «Блокноте» всё содержимое нашего письма и копируем теперь его в буфер обмена.

Рис. 8

Теперь возвращаемся окно «Блокнота» с фрагментом кода из Gmail. Находим и выделяем в конце кода оператор
, и вставляем вместо него содержимое буфера, т.е. код нашего html-сообщения.

Рис. 9

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

Читать еще: Выровнять текст в ячейке html

Рис. 10

Возвратимся в Chrome. Там блок кода должен у нас находиться в состоянии редактирования для HTML, как после выполнения команды на рисунке 5. Если видим иное, повторяем то действие, приводим блок кода в состояние для редактирования и выделяем его, полностью и весь. По выделенному — правый клик и «Вставить».

Рис. 11

Завершаем операцию кликом по полю для ввода текста письма — и изменения сохранятся.

Рис. 12

Для выхода из режима правки html-кода закроем окна, отражающие этот код.

Рис. 13

Как полагается, заполняем поля адреса получателя, тему письма. Наше html-письмо, созданное в недрах Gmail и Chrome-а готово, можно смело отправлять.

Рис. 14

И под занавес обзора несколько обыденных, но от этого не менее жизненных советов. Первое, не бойтесь экспериментов, всё, что мы тут наредактировали, произошло только на нашей локальной машине, и простое обновление страницы восстановит исходный код. Второй совет банален, но так же важен и вписывается в парадигму хорошего тона, как и указание темы электронного письма: отправьте созданное сначала самому себе, а вдруг незаметная ошибка исказила ваш шаблон? Лучше, если эту неприятность первым увидите вы, а не ваш адресат. Ну и наконец, помните, что созданное вами можно сохранить в виде черновика. Тогда к результату редактирования можно возвращаться вновь и вновь, по мере надобности.

Инструкция по HTML верстке писем email рассылки

Обновлено: 2 года назад

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

Как правило, чем «древнее» код, тем выше вероятность, что он будет корректно работать. И хотя сегодня существуют блочные редакторы, которые упрощают верстку писем, в основе их работы заложены всё те же старые принципы разработки HTML шаблонов.

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

Используйте таблицы при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте
Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах и , включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

Давайте разбираться детальнее.

Где писать код шаблона? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью. Вы можете скачать бесплатную демо-версию программы и читая статью, сразу тренироваться в сотворении своего email шаблона.

Формат шаблона html-писем

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

Чаще всего одноколоночный макет включает в себя:

Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

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