Редактирование исходного файла html-письма | Хорошие письма

Нас очень часто спрашивают о возможностях редактирования html-писем. Как правило, проблем с этим не возникает, так как сервисы рассылок оснащены различными редакторами писем.

Но что делать, если вам нужно отправлять письма всего нескольким адресатам и каждое из них должно быть индивидуальным? Платить деньги только за возможность воспользоваться редактором сервиса?

Необязательно. Сегодня мы расскажем вам как заменить контент письма в исходном коде на примере текстового редактора Sublime Text.

Знакомство с редактором

Sublime Text — текстовый редактор, распознающий html-код и его форматирование. Это значит, что для наших целей, по функционалу он не отличается от Блокнота, если бы не одно но — Sublime удобно подсвечивает текст кода. Скачать Sublime Text можно здесь — https://www.sublimetext.com/3

При этом, для того что бы увидеть само письмо и отслеживать изменения в нем, необходимо просто открыть html-файл письма в окне браузера. После сохранения изменений (Ctrl+S) в тексте кода, достаточно просто обновить страницу, и вы увидите внесенные изменения.

Как вы видите, Sublime цветами выделяет различные форматы данных, в нашей версии: розовый — теги html, зеленый — параметры, желтый, фиолетовый и синий — значение различных параметров и белый — текст.

Замена текста письма

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

Стоит отметить что Sublime, равно как и Блокнот, автоматически обнуляет форматирования текста. Так что, вы смело можете копировать любой текст и вставлять в нужное место, отображаться в письме он будет по заданным в коде параметрам.

И еще один маленький совет, для того что бы найти нужный текст во всем массиве кода, нажмите Ctrl+F — после этого, внизу редактора появится поле поиска текста.

При необходимости можно поменять стиль шрифта.

Советуем пользоваться одним из следующих шрифтов — Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman.Это стандартные шрифты, которые распознают любые системы. В противном случае ваш текст на другом компьютере может превратится в абракадабру.

Размер — подставить нужное значение в параметре “font-size: 14px;”. Давайте увеличим размер шрифта с 14 пикселей до 16.

Цвет — значение цвета задается в HEX параметром “color: #323232;”.

Подобрать значение цвета вы можете водном из онлайн-сервисов, например здесь — get-color.ru.

Мы сделаем текст серым — #4F4F4F.

Межстрочный интервал — по аналогии с размером шрифта, задается параметром

“line-height: 18px;”

Формат шрифта — задается тегами <b>текст</b> — жирный, <i>текст</i> — курсив и <u>текст</u> — подчеркивание.

Стоит отметить, Sublime при открытии тега, автоматически добавляет команду закрытия тега. Будьте внимательны.

Выделим наш текст курсивом.

Перенос строки — задается тегом <br>. Просто вставьте этот тег перед нужным участком текста.

Заменяем текст, сохраняем, обновляем и все готово.

Вставка ссылки в текст

Тег для вставки ссылки — <a href=”www.goodmails.ru” target=”_blank” style=”text-decoration: underline; color:#234322;”>текст, который вы делаете ссылку</a>

href — сюда вписываем ссылку.

target=”_blank” — эта команда для открытия ссылки в новой вкладке. Если вы хотите, что бы ссылка открывалась в текущей вкладке, просто не пишите ее.

text-decoration: underline; — команда браузеру подчеркнуть ссылку. Если подчеркивание не требуется — нужно прописать text-decoration: none;

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

color:#234322; — цвет ссылки. Цвета, как и в случае с текстом, задаются в HEX.

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

Внимание! Некоторые почтовые клиенты умнее, чем кажутся и если они видят в тексте ссылку, например, “Вы можете перейти на сайт goodmails.ru для дальнейшего изучения…”, то они могут выделить ее самостоятельно и по-своему.

Вставка/замена ссылки в картинку

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

<a href=”www.example.com” target=”_blank” style=”text-decoration: underline; ”><img src=”ссылка на картинку” alt=”описание картинки на случай, если она не отобразится” border=”0” /></a>

Есть разница в паре команд для обычной ссылки и картинки:

color:#234322; — команда установки цвета не актуальна для картинки.

border=”0” — команда обрамление картинки. Значение 0 убирает белую рамку вокруг картинки, значения больше задуют ее соответствующей толщины в пикселях.

Обязательно прописывайте эту команду. Например Outlook автоматически присваивает рамку картинке, если не прописать данную команду.

Найти участок кода с картинкой будет проще в браузере. Для этого кликните правой кнопкой мыши на необходимой картинке и выберете “Посмотреть код” (это названия данной опции в Google Chrome, название и путь к ней в других браузерах может отличаться). Браузер автоматически выделит для вас нужную часть, скопируйте код и вставьте в поиск Sublime.

При замене картинки будьте внимательны — если ее размер новой картинки отличается от размеров прежней, нужно поменять все параметры width и height на актуальные.

Послесловие

Мы рассказали вам о наиболее “безболезненных” возможностях редактирования кода письма. Если вам необходимо внести более значительные изменения, настоятельно рекомендуем доверить такую задачу специалисту по верстке, или как минимум создать копию кода до редактирования.

Как загрузить собственный HTML шаблон письма

Заходим в личный кабинет в раздел «Рабочий стол». Слева находим кнопку «Создать рассылку», нажимаем на нее. В выпадающем списке выбираем «обычная рассылка» и попадаем на первый этап – выбор типа рассылки (более подробно эти шаги описаны в начале статьи).

Здесь выбираем «загрузить свой html-макет»:

Мы перешли на второй шаг создания рассылки и видим такое содержание страницы:

Загрузить zip-архив.

Итак, у Вас должен быть сверстанный html-макет письма и папка с картинками, все это бережно упаковано в zip-архив!

Внимание! Для корректной загрузки следует помнить следующие правила:

искомый HTML-файл макета должен лежать в корне архива, т.е. НЕ внутри какой-то папки, а вот так:

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

Итак, в начале, убедитесь, что выбран раздел «загрузить zip-архив», затем нажмите на кнопку «browse» — появится окно, в котором надо найти нужный файл, на компьютере. Два раза щелкните по ЛКМ (левая кнопка мыши) либо, нажмите на кнопку «Открыть». Затем, нажмите на кнопку «загрузить html-макет» и подождите несколько секунд, пока сервис получит макет.

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

WYSIWYG- и HTML-редакторы.

Не теряйтесь, если первым что увидите, будет:

Если код для Вас – это «темный лес», то срочно переходите в визуальный редактор, для этого достаточно нажать на рыжую кнопку «WYSIWYG-редактор».

И вот, перед вами макет и широкие возможности редактора.

Ниже, под макетом, есть область подсказок, с которыми Вам непременно стоит ознакомиться.

Внимание! Различные браузеры и почтовые клиенты по-разному отображают html-шаблон. Это связано с ограниченной поддержкой html-стандартов. Информацию по поддержке различных тэгов и стилей вы можете прочитать здесь: email-standards.org

Добавление обязательных ссылок в текст.

Если Вам таки надо добавить какую-то из ссылок, которые описаны в подсказках, то перейдите в html-редактор, нажав соответствующую рыжую кнопку в правом верхнем углу. Затем, выберите нужную ссылку, скопируйте ее текст

и вставьте, в нужное место. Например, у нас в макете есть фраза: «Чтобы гарантировать получение писем от нас — добавьте наш адрес в адресную книгу». Мы можем разместить нужную нам ссылку прямо после нее.

Итак, в тексте кода находим интересующую нас фразу (помните, что сейчас у Вас должен быть открыт HTML-редактор) и вставляем скопированный код ссылки:

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

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

Для этого перед фразой разместите затем Ваша фраза и :

Теперь, перейдем в визуальный редактор, чтобы увидеть результат:

Предпросмотр.

Теперь, если желаете увидеть, что у получилось,нажмите на кнопку «предпросмотр письма»:

Сохранение шаблона.

 Если вы довольны результатом и желаете последующие письма отправлять также оформленными, только с другим текстом, например, то нажмите на голубую кнопку «Сохранить как шаблон»:

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

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

Вы попадете на страницу с выбором базы для рассылки и затем, к настройкам.

---

Так же читайте статьи:

Письмо HTML и программа Dreamweaver

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

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

В HTML редакторе сервиса SmartResponder все достаточно очевидно, и после небольшой практики Вы быстро разберетесь, как делать в нем HTML письма. Если Вы наводите мышкой на одну из кнопок HTML редактора, появится всплывающая подсказка о том, каково назначение данной кнопки. Например, можно сделать таблицу из двух строчек и одного столбца, в первой строчке будет заголовок, а во второй строчке текст и картинки. Картинки тоже легко добавить, только они уже должны быть в Интернете, и при добавлении Вы просто указываете их URL-адрес.

URL-адрес почти любой картинки, которую Вы видите в Интернете, можно определить, нажав на картинку правой клавишей мыши, и выбрав Копировать URL-адрес. Нажав на кнопку Источник, можно увидеть код HTML письма.

Но гораздо больше возможностей создания и редактирования HTM писем не в редакторе сервиса Смартреспондер, а в программе Dreamweaver.

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

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

Еще один нюанс — в коде Вам нужно только то, что в одностраничнике находится между тэгами <body> и </body>, открывающим и закрывающим. Все остальное, включая сами тэги <body>, </body>, можно удалить.

Кроме того, в настройках программы Dreamweaver нужно произвести следующие изменения. Зайдите в Редактировать — Установки — Общие, и уберите птичку напротив строки Использовать CSS вместо тегов HTML.

Дело в том, что  Смартреспондер, в котором мы делаем наши письма HTML, код со стилями CSS не воспринимает.

После того, как Вы настроите программу Dreamweaver, можно будет приступить непосредственно к самому письму HTML. Для письма удобно создать таблицу, к примеру, с одним столбцом и двумя строчками. Только нужно сделать ее уже, чем Вы обычно делаете для одностраничных сайтов. Дело в том, что письмо подписчику будет показано в почтовом ящике, где места справа и слева будут заняты. Делайте ширину таблицы не больше 550 пикселей. Ширину границы можете сделать равной 0, тогда она не будет видна. А можно оставить ее видимой, или даже покрасить.

Верхнюю строчку оформляете, как заголовок, а нижнюю оставляете для основного текста и картинок.

Чтобы поставить картинки, нужно, чтобы они уже были в Интернете. Если они уже там есть, узнайте их URL-адрес, нажав правой клавишей на картинке. Если картинки в Интернете нет, нужно ее положить на хостинг. В таком случае URL-адрес картинок будет следующий:

http://домен или поддомен/вложенная папка/еще вложенная папка/название картинки
К примеру, если я в папку своего домена pro444.ru в папку UserFiles положу картинку с названием its_me.jpg, то URL адрес картинки будет такой:

http://pro444.ru/UserFiles/its_me.jpg

Видео о том, как создавать письма HTML в программе Dreamweaver

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

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

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сверстать HTML шаблон письма: Создание документа.

HTML код любого email сообщения состоит из двух частей:

1. Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
2. Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.

Написание HTML кода электронного сообщения начинается с создания документа типа XHTML:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5. <title>Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6. </head>
7. </html>

<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.

<meta http-equiv=»Content-Type» /> указывает, как обрабатывать текст и специальные символы в вашем письме.
«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.

<meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.

Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.

Верстка тела email сообщения. Создание таблицы

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

Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне.

Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.

Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы.

Примечание. Здесь и далее мы оставим значение для границы всех таблиц как 1: border=»1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».

1. <body>
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>


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

(наличие рамки – результат работы тега border=»1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!»

1. <table border="1" cellspacing="0" cellpadding="0" align="center">
2. <tbody>
3. <tr>
4. <td>Привет!</td>
5. </tr>
6. </tbody>
7. </table>


Теперь письмо выглядит вот так:

Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.

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

Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку

1. <tr>
2. <td>
3. Привет!
4. </td>
5. </tr>


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

Должно получиться следующее:

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td>
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td>
14.Строка 3
15. </td>
16. </tr>
17. </table>


Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td bgcolor="#ffa500">
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td bgcolor="#ffffff">
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td bgcolor="#1e90ff">
14. Строка 3
15. </td>
16. </tr>
17. </table>


Сосредоточимся на первой строке – это будет хедер письма.

Строка 1. Верстка хедера письма.

В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding>.

Работая с <padding>, важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми.

Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.

Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.

В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость. Вместо того, чтобы использовать тег <padding>, добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом &nbsp; внутри), но с четко установленной высотой или шириной.

Например:

<tr><td>&nbsp;</td></tr>

Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри <p> или <div>, последние ведут себя более непредсказуемо.

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

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

Пример кода Строки 1 с вставленным изображением:

1. <td align="center" bgcolor="#ffa500">
2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img.png">
3. </td>


Визуально:

Строка 2. Работа с контентом в HTML шаблоне письма

Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>. Приступайте! 😉

Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

• одна – для заголовка,
• вторая – для краткого описания статьи,
• третья – для строки с двумя столбцами.

Поехали!

Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.

Код Строки 2 с вложенной таблицей:

1. <td bgcolor="#ffffff">
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Строка 1
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Строка 2
11. </td>
12. </tr>
13. <tr>
14. <td>
15. Строка 3
16. </td>
17. </tr>
18. </table>
19. </td>

Визуально:

Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.

Вложенная таблица с текстом:

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.
11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.
12. </td>
13. </tr>
14. <tr>
15. <td>
16. Строка 3
17. </td>
18. </tr>
19. </tbody>
20. </table>

Визуально:

Для последней строки таблицы мы подготовили две колонки с картинкой и текстом.

Давайте по порядку.

Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким.

Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.

*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.

Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.

Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.

1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td valign="top">
4. Колонка 1
5. </td>
6. <td>
7. &nbsp;
8. </td>
9. <td valign="top">
10. Колонка 3
11. </td>
12. </tr>
13. </table>

Визуально:

Добавляем изображения и контент.

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

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td valign="top">
5. <table border="1" cellspacing="0" cellpadding="0">
6. <tbody>
7. <tr><td>&nbsp;
8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td>
9. </tr>
10. <tr>
11. <td>
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
13. </td>
14. </tr>
15. </tbody> </table>
16. </td>
17. <td>
18. &nbsp;
19. </td>
20. <td valign="top">
21. <table border="1" cellspacing="0" cellpadding="0">
22. <tbody> <tr>
23. <td>
24. &nbsp;
25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg"> </td>
26. </tr>
27. <tr>
28. <td>
29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
30. </td>
31. </tr>
32. </tbody> </table>
33. </td>
34. </tr>
35. </tbody> </table>

Визуально:

Строка 3. Создание HMTL кода футера email рассылки

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.

Чтобы не забыть, сначала добавим отступы, а после – таблицы.

Отступы:

<td bgcolor="#1e90ff ">
Строка 3
</td>

Визуально:

Разделяем строку на две колонки с помощью дополнительной таблицы.

1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Колонка 1
5. </td>
6. <td>
7. Колонка 2
8. </td>
9. </tr>
10.</table>

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

Дополнительная таблица с информацией футера:

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody><tr>
3. <td>
4. <p>Компания ePochta<br>
5. [email protected]</p>
6. </td>
7. <td align="right">
8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже.
9. </td>
10. </tr>
11. </tbody></table>

Визуально:

Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=»right» для тега <td>.

Шаблон готов!

Верстка дизайна шаблона email рассылки

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

Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег <b> или <strong> для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.

Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры:

1. <td><p align="center">
2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах
3. </p></td>

Посмотрите, как изменился текст:

Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.

При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:

<table align="center" cellspacing="0" cellpadding="0">

Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0">
2. <tbody>><tr>
3. <td>

А теперь – проба пера: отправляем письмо на тестовый email адрес.

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

Вот так созданный шаблон выглядит в Gmail

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

И пусть ваши клиенты с удовольствием читают ваши рассылки!

Загрузка…

Отправка html-письма при помощи web-интерфейса Gmail — Блог веб-студии «Десять букв»

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

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

Видео

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

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

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

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

Рис. 1

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

Рис. 2

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

Рис. 3

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

Открыв код страницы, браузер Chrome подсветит нам блок кода между тегами <div id…> и <div>. Именно это содержимое определяет отображение html-страницы в теле письма.

Рис. 4

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

Правый клик по выделенному блоку <div id…>…<div> вызовет контекстное меню, в нём выбираем команду «Edit as HTML» — редактировать, как HTML.

Рис. 5

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

Рис. 6

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

Рис. 7

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

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

Рис. 8

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

Рис. 9

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

Рис. 10

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

Рис. 11

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

Рис. 12

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

Рис. 13

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

Рис. 14

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

Напишите свое мнение или совет

Простой HTML шаблон электронного письма, HTML e-mail + простое редактирование. | Step For Top

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

 

 

<html xmlns=»http://www.w3.org/1999/xhtml>

    <head>

        <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

        

<title>HTML LETTER</title>

        

<style type=»text/css»>

        @media only screen and (min-device-width: 601px) {.content {width: 600px !important;}}

body[yahoo] .class {}

.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}

.button a {color: #ffffff!important; text-decoration: none;}

.button a:hover {text-decoration: underline;}

 

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {}

body[yahoo] .buttonwrapper {background-color: transparent!important;}

body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}

        </style>

    </head>

    <body yahoo bgcolor=»#f6f8f1″>

     <!—[if (gte mso 9)|(IE)]>

<table align=»center» cellpadding=»0″ cellspacing=»0″ border=»0″>

    <tr> <td><![endif]—>

<table align=»center» cellpadding=»0″ cellspacing=»0″ border=»0″>

<!—Header—>

                        <tr>                        

                             <td bgcolor=»#c7d8a7″>

  

   <!—LOGO—>

   <table align=»left» border=»0″ cellpadding=»0″ cellspacing=»0″>

<tr>

<td>

<!—ТУТ ССЫЛКА НА ЛОГО—>

<img src=»http:/site.com/image/logo.png»  border=»0″ alt=»» / >

</td>

</tr>

</table><!—END-LOGO—>

<!—Заглавие—>

<!—[if (gte mso 9)|(IE)]>

<table align=»left» cellpadding=»0″ cellspacing=»0″ border=»0″>

<tr>

<td>

<![endif]—>

          

<table align=»left» border=»0″ cellpadding=»0″>

<tr>

<td>

<table border=»0″ cellspacing=»0″>

<tr>

<td>

SubHEADER

</td>

</tr>

<tr>

<td>

HEADER

</td>

</tr>

</table>

</td>

</tr>

</table>

<!—[if (gte mso 9)|(IE)]>

</td>

</tr>

</table>

<![endif]—><!—END-ЗАГЛАВИЕ—>

 

</td>

</tr>

 

 

<!—ТЕЛО ПИСЬМА—>

<tr>

<td bgcolor=»#ffffff»>

  

  <table border=»0″ cellspacing=»0″ cellpadding=»0″>

<!—ВСТУПЛЕНИЕ—>

<tr>

<td>

Dear Mr.  !

</td>

</tr><!—/ВСТУПЛЕНИЕ—>

<!—НАЧАЛО—>

<tr>

<td>

   <p>Lorem ipsum dolor sit amet, est dico eleifend ei, mea ne velit referrentur necessitatibus. Novum sonet eum no, mel eu fastidii abhorreant. Qui ex periculis appellantur, ne amet invenire voluptatum has, et repudiare definitionem mel. At alterum postulant dissentias eam. Est ubique legere tamquam ei, rebum semper qualisque vel ad.</p>

  

   <!—КНОПКА Button—>

<table bgcolor=»#e05443″ border=»0″ cellspacing=»0″ cellpadding=»0″>

  <tr>

<td>

<!—ТЕКСТ И ССЫЛКА КНОПКИ—>

  <a href=»http:/site.com»>Register now!</a>

</td>

  </tr>

</table><!—/Button—>

  

</td>

</tr><!—/НАЧАЛО—>

  <!—КАРТИНКА—>

<tr>

<td>

<img src=»http:/site.com/image/image.png» border=»0″ alt=»» />

</td>

</tr><!—/КАРТИНКА—>

<!—ОКОНЧАНИЕ ПИСЬМА—>

<tr>

<td>

   <p>Best regards, <br />

   <strong>Boss</strong></p>

</td>

</tr><!—/ОКОНЧАНИЕ ПИСЬМА—>

</table>

                            </td>

</tr>

<!—Footer—>

         <tr>

<td bgcolor=»#44525f»>

<table border=»0″ cellspacing=»0″ cellpadding=»0″>

<tr>

<td align=»center»>

&reg;All rights reserved<br/>

<a href=»www.site.com.ua»>www.site.com.ua</a>

</td>

</tr>

<tr>

<td align=»center»>

<table border=»0″ cellspacing=»0″ cellpadding=»0″>

<tr>

<td>

<a href=»LINK_TO_FB»>

<img src=»http://stepfor.top/images/fb1.png» alt=»Facebook» border=»0″ />

</a>

</td>

<td>

<a href=»LINK_TO_VK»>

<img src=»http://stepfor.top/images/vk1.png» alt=»VK» border=»0″ />

</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

                <!—[if (gte mso 9)|(IE)]>

        </td>

    </tr>

</table>

<![endif]—>

    </body>

</html>