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

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

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

HTML письмо

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

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

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

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

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

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

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

рассылка HTML писем

Подготовка

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

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

Перед тем как написать текстовую часть письма, нужно:

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

Теперь, рассмотрим, как создать HTML-письмо. Для этого:

Последовательно открывают в меню вкладки «Вставить» и «Таблица» и выставляют нужные параметры таблицы. Например, строки — 2, столбцы — 1, ширина — 700, заголовок — сверху. Границы можно выставлять, а можно обойтись без них, указав 0. Формируют заголовок письма. Так как HTML-письмо предназначено для большего числа получателей, поэтому используют оператор [first_name], подставляющий нужное имя получателя. В нижнем окне «Свойства» выставляют нужные параметры для шрифта, размера и цвета текста заголовка и цвет фона. «Выходят» из области заголовка. В нижней части экрана выставляют параметры для курсора «По центру» и «По середине». Вставляем готовый текст письма или «пишем» его прямо в программе DW, выбрав нужный тип и размер шрифта, а также расположение текста на странице. Создание гипертекстовых ссылок

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

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

Как вставить картинки

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

Для того чтобы оформить такой симпатичный финал:

вставляют в нижней части письма, внутрь основной таблицы еще одну с 3 столбцами и параметром для границы 0 пикселей; выставляют курсор в том месте таблицы, где хотят видеть картинку; отмечают в нижнем окне «Посередине» и «По верхнему краю» для каждой секции; выбирают в верхнем меню вкладку «Вставка»; делаем клик по надписи «Изображение» и в выпавшем меню вставляем скопированный нами адрес; нажимаем «Ok» 2 раза.

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

Просмотр

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

Кодировка

Из раздела «Проект» и переходят в кодовую часть — «Код». В открывшемся окне выделяют и копируют все, что заключено между тегами <body> и </body>. Сохраняем файл. Далее вставляем HTML-код.

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

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

Для того чтобы сделать рассылку открывают "Смартреспондер" (SR). Затем:

выбирают либо создаем новое письмо, заполнив строки «Имя» и «Адрес отправителя». заполняют строку «Тема письма»; отмечают в верхнем левом меню HTML-код; вставляют код, скопированный в программе DW-код в большое поле «Источник»; проверяют корректность отображения посредством инструмента «Предпросмотр»; удаляют текстовую версию письма; тестируют его на спам, с помощью одноименной кнопки, расположенной рядом с кнопкой «Отправить». Несколько популярных шаблонов

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

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

письмо в формате HTML

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

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

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

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

Инструменты

Вордпрессовский плагин e-Newsletter позволяет профессионально управлять рассылками и абонентами. Причем и то, и другое делается прямо через панель администратора WordPress. Это обстоятельство обеспечивает полный контроль и совершенно бесплатно, что не может не радовать.

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

конструктор HTML писем

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

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

Читать далее:




Вышивка золотая корона




Что сделать из пней своими руками фото




Как сделать отпечаток пальца на ксиоми




Как сделать коробочку для подарка любимому




Смотреть как сделать телефон для куклы