Как создать 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-письмо предназначено для большого числа получателей, то часто используется оператор [first_name], который подставляет нужное имя получателя. В нижнем окне под названием «Свойства» выставляются нужные параметры шрифта, цвета и размера заголовка, а также цвет фона. Параметры курсора «По центру» и «По середине» выставляются в нижней части экрана. Далее необходимо вставить готовый текст письма или вписать его прямо в программе DW, выбрав нужный размер и тип шрифта, а также расположение текста на странице.

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

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

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

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

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

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

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

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

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

Просмотр

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

Кодировка

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

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

Чтобы сделать рассылку открывают «Смартреспондер» (SR). После этого:

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

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

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

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

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

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

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

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

— Ink – заготовка писем, рассылки которых универсальны и совместимы с любыми клиентами и устройствами.

— 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-писем не представляет особой сложности, особенно если вам известно, как использовать готовые шаблоны, которых в сети интернет можно найти множество. Поэтому даже пользователи, которые не обладают особыми знаниями, могут легко справиться с этой задачей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *