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

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

Как избежать ошибок и не наделать глупостей

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

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

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

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

Создайте HTML-шаблон с помощью обычного блокнота (нужно сменить формат файла на html) или через специальное ПО, например, Dreamweaver от Adobe;

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

Не забываем про общие правила: ширина письма не должна превышать 600 px, изображения должны быть сжаты (например, используй TinyPNG), чтобы письмо быстро загрузилось, а шрифт сделай больше 13, так как на «яблочной технике» могут быть проблемы с отображением.
Заполняем ячейки текстом, одновременно форматируя каждый блок.
Не забываем про верстку адаптивных писем.

Тестирование верстки писем

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

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

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

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

Но желание — есть, поэтому стал копаться дальше. Может быть и на блоге, скоро заменю подписку по email от feedburner (под статьями) на какую-нибудь другую, где можно сделать ее более симпатичной. Главное учесть все нюансы верстки под почтовые клиенты, а их поверьте не мало.

Актуальность создания html писем для почтовой рассылки

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

Можно разослать материал о дополнительных услугах, которые, возможно, стали интересны вашим клиентам после первой покупки.

Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!

Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка. Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.

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

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

Проблемы при верстке html писем

Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи , а именно inline, для каждого элемента отдельно.

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

Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.

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

Как написали на одном из сайтов:

Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan

В моем случае — их придется выучить, так как я никогда не пользовался таблицами. Может быть и не пришлось бы никогда, если бы не решил разобраться с оформлением писем:)

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

Еще, для меня стало проблемой то, что приходится постоянно обнулять многие значения, например, border у картинок, если она задана как ссылка.

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

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

Как создать html письмо

Для начала, я создал каркас-таблицу для всего содержимого письма, шириной в 100% и голубым фоном. В нем разместил две дочерние таблицы. Одну для шапки (id=»header»), вторую для контента (id=»content»):

Рассылка новостей от сайт

Как вы уже заметили, я задал cellpadding=»40" для таблицы-обертки. Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше…

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

Png" alt="логотип" width="84" height="84"/>

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

Этим кодом я добавляю строку с одним столбцом, в таблицу «content» и помещаю в него картинку, с надписью «Smartlanding»:

Сейчас письмо выглядит так:

Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:

Как закрыть внешние ссылки от индексации

Теперь необходимо реализовать анонс статьи, делается это достаточно просто. 1 строка, 1 столбец и текст в нем:

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

Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 — для того, чтобы задать отступ между ними (60px).

Png" />

Точно такую же разметку делаю для текста, заголовков:

Как сделать UTM метки и для чего они нужны

Обновления на блоге и мини-отчет об оптимизации

Скрипт для АБ тестирования

И теперь остается последний шаг, сделать footer. Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:

Smartlanding | 2014

Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:

gmail
yandex
rambler
mozilla thunderbird
outlook 2007
outlook 2013
the bat

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

Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки. Буду вам очень признателен. А на сегодня — все. Пока!

(Ознакомиться с предварительными тестами html письма в разных поисковых системах )

Обновлено: 12 месяцев назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.
2.
3.
4.
5. Инструкция Создания 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» /> указывает, как обрабатывать текст и <a href="/samouchitel-dlya-sostavleniya-upravlyayushchih-programm-pervyi-zapusk/">специальные символы</a> в вашем письме. «text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html. <meta name=»viewport»/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана. Заголовок email сообщения записывается внутри тега <title> . В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера. <h2>Верстка тела email сообщения. Создание таблицы</h2> Общая структура письма создается с использованием тега <body> . Прежде всего, устанавливаем нулевое значение для отступов (теги <margin> и <padding>), чтобы избежать лишнего пустого пространства в шаблоне. Ширина главной таблицы должна быть 100% (table width=»100%»). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега <body>, работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы. Значения тегов <cellpadding> и <cellspacing> тоже должны равняться нулю, опять же, во избежание ненужного пустого пространства. Данные теги отвечают за отступы от границ ячейки таблицы. 1. <body style="margin: 0; padding: 0;"> 2. <table border="1" cellpadding="0" cellspacing="0" width="100%"> 3. <tr> 4. <td> 5. Привет! 6. </td> 7. </tr> 8. </table> 9. </body> Пока что наше письмо выглядит следующим образом: <img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_1.png' align="center" width="100%" loading=lazy> (наличие рамки – результат работы тега border=»1″) Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на <a href="/kak-vklyuchit-mobilnyi-internet-na-androide-5-0-sposoby/">персональном компьютере</a> – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=»600″. <blockquote>Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS. </blockquote> Этот код вложенной таблицы следует вставить вместо слова «Привет!» 1. <table style="border-collapse: collapse;" border="1" width="600" cellspacing="0" cellpadding="0" align="center"> 2. <tbody> 3. <tr> 4. <td>Привет!</td> 5. </tr> 6. </tbody> 7. </table> Теперь письмо выглядит вот так: <img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_2.png' width="100%" loading=lazy> Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением «collapse»? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц. Мы уже говорили о том, что любой состоит из трёх логических частей: хедер, тело письма с основным контентом, футер. Теперь нужно отобразить это структурно в уже созданном нами шаблоне. Добавим еще две строки. Скопируем во вложенной таблице часть кода, отвечающего за строку 1. <tr> 2. <td> 3. Привет! 4. </td> 5. </tr> и продублируем его несколько раз, заменив приветствие на порядковый номер строки. Должно получиться следующее: 1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 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> Визуально: <img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_3.png' align="center" width="100%" loading=lazy> Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor> , следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать. 1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"> 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> <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_4.png' width="100%" loading=lazy> Сосредоточимся на первой строке – это будет хедер письма. <h3>Строка 1. Верстка хедера письма.</h3> В планах – разместить в первой строке изображение с логотипом и названием компании. Но для начала нужно настроить отступ ы, которые будут со всех сторон изображения до внутренних границ ячейки. За это отвечает тег — <padding> . Работая с <padding>Важно помнить о необходимости указывать каждое значение отступа (сверху, снизу, слева, справа), иначе результаты могут оказаться непредсказуемыми. Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px; . Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px ;. В случае, когда почтовый клиент удаляет ваш инлайновый CSS или вносит свои правки в ваше письмо, можно пойти на хитрость . Вместо того, чтобы использовать тег <padding>Добавляйте пустые ячейки в таблице, тем самым создавая нужное пространство. Такие дополнительные ячейки будут пустыми (с кодом внутри), но с четко установленной высотой или шириной. Например: <tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr> Обращаем ваше внимание, что стили правильнее будет прописывать внутри тега <td>, но не внутри Или <div>, последние ведут себя более непредсказуемо. В случае с нашим примером письма, мы применяем внутренний CSS для настройки отступов для изображения. После вставки изображения, необходимо прописать alt текст , который будет видеть получатель на месте картинки, если картинки отключены почтовиком. И важно добавить параметр style=»display:block;», наличие которого гарантирует, что почтовый клиент не добавит лишних пробелов под картинкой. При необходимости, можно отцентровать изображение, добавив align=»center» в тег <td>. <blockquote>Примечание. Помните, что большинство почтовых клиентов по умолчанию блокируют изображения. Поэтому напишите в alt тексте подсказку клиенту, картинка на какую тематику должна быть вместо пустого места. К тому же, не стоит на картинках писать важную уникальную информацию, которая не дублируется в письме. Ведь тогда в случае блокировки изображений, ваше письмо будет абсолютно бесполезным. </blockquote> Пример кода Строки 1 с вставленным изображением: 1. <td align="center" style="padding: 20px 0px 30px 0px;" bgcolor="#ffa500"> 2. <img src='https://i0.wp.com/E:\epochta\БЛОГ\mailer_html_img.png' width="600" loading=lazy> 3. </td> Визуально: <img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_5.png' width="100%" loading=lazy> <h3>Строка 2. Работа с контентом в HTML шаблоне письма</h3> Для начала следует указать отступы внутри средней ячейки (второй строки), чтобы новая вложенная в неё таблица с контентом красиво смотрелась, не сливаясь с ней основными границами. Вы уже знаете, что такие отступы от сторон элемента, что будет внутри ячейки, задаются с помощью тега <padding>Приступайте! 😉 Визуально должно получиться: <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_6.png' align="center" width="100%" loading=lazy> Теперь нужно подготовить место для контента . Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками: <ul><li>одна – для заголовка,</li> <li>вторая – для краткого описания статьи,</li> <li>третья – для строки с двумя столбцами.</li> </ul>Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным. Код Строки 2 с вложенной таблицей: 1. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"> 2. <table border="1" cellpadding="0" cellspacing="0" width="100%"> 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> Визуально: <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_7.png' align="center" width="100%" loading=lazy> Пишем заголовок статьи и её <a href="/kratkoe-opisanie-funkcii-i-tehnologii-realizovannyh-v-riderah-kakie/">краткое описание</a>. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода. Вложенная таблица с текстом: 1. <table width="100%" border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td> 5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах 6. </td> 7. </tr> 8. <tr> 9. <td style="padding: 20px 0px 30px 0px;"> 10. Cейчас Viber - это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг. 11. Только ленивые не говорят о том, что вайбер для бизнеса - это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности. 12. </td> 13. </tr> 14. <tr> 15. <td> 16. Строка 3 17. </td> 18. </tr> 19. </tbody> 20. </table> Визуально: <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_8.png' align="center" width="100%" loading=lazy> Для последней строки таблицы мы подготовили две колонки с картинкой и текстом. Давайте по порядку. Во-первых, так как нам нужно расстояние между столбцами таблицы, а атрибут <margin> мы использовать не можем, то немножко схитрим и создадим таблицу с тремя столбцами. Просто средний столбец будет пустым и узким. Основной параметр столбца – ширина. В <a href="/skachat-biznes-plan-yuvelirnoi-masterskoi-oborudovanie-tehnika-komplektuyushchie-v-dannom-sluchae-ne-p/">данном случае</a> мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину. *Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны. Итого, два столбца по 260 пикселей + средний пустой столбец на 20px. Укажем также для обоих столбцов значение valign=»top», что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить. 1. <table border="1" cellpadding="0" cellspacing="0" width="100%"> 2. <tr> 3. <td width="260" valign="top"> 4. Колонка 1 5. </td> 6. <td style="font-size: 0; line-height: 0;" width="20"> 7. 8. </td> 9. <td width="260" valign="top"> 10. Колонка 3 11. </td> 12. </tr> 13. </table> Визуально: <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_9.png' width="100%" loading=lazy> Добавляем изображения и контент. Поскольку, нам снова нужны две строки, вставляем еще одну таблицу в каждую из колонок, не забывая об отступах. 1. <table width="100%" border="1" cellspacing="0" cellpadding="0"> 2. <tbody> 3. <tr> 4. <td width="260" valign="top"> 5. <table width="100%" border="1" cellspacing="0" cellpadding="0"> 6. <tbody> 7. <tr><td> 8. <img src='https://i0.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg' height="160" width="260" loading=lazy> </td> 9. </tr> 10. <tr> 11. <td style="padding: 25px 0px 0px 0px;"> 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 width="20" style="line-height: 0; font-size: 0px;"> 18. 19. </td> 20. <td width="260" valign="top"> 21. <table width="100%" border="1" cellspacing="0" cellpadding="0"> 22. <tbody> <tr> 23. <td> 24. 25. <img src='https://i2.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg' height="160" width="260" loading=lazy> </td> 26. </tr> 27. <tr> 28. <td style="padding: 25px 0px 0px 0px;"> 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> Визуально: <img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_10.png' align="center" width="100%" loading=lazy> <h3>Строка 3. Создание HMTL кода футера email рассылки</h3> Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц. Чтобы не забыть, сначала добавим отступы, а после – таблицы. <td bgcolor="#1e90ff " style="padding: 30px 30px 30px 30px;"> Строка 3 </td> Визуально: <img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_11.png' width="100%" loading=lazy> Разделяем строку на две колонки с помощью дополнительной таблицы. 1. <table border="1" cellpadding="0" cellspacing="0" width="100%"> 2. <tr> 3. <td> 4. Колонка 1 5. </td> 6. <td> 7. Колонка 2 8. </td> 9. </tr> 10.</table> <img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_12.png' width="100%" loading=lazy> В данном шаблоне первая колонка будет для контактных данных компании, вторая – для ссылки отписки. Вы можете добавлять иконки соцсетей, изменять количество колонок и расположение информации абсолютно в любом формате. Дополнительная таблица с информацией футера: 1. <table width="100%" border="1" cellspacing="0" cellpadding="0"> 2. <tbody><tr> 3. <td width="280"> 4. Компания ePochta 5. support@сайт 6. </td> 7. <td align="right"> 8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже. 9. </td> 10. </tr> 11. </tbody></table> Визуально: <img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_13.png' width="100%" loading=lazy> Вы заметили, что текст во второй колонке футера выровнен по правому краю ? Это возможно благодаря атрибуту align=»right» для тега <td>. Шаблон готов! <h2>Верстка дизайна шаблона email рассылки</h2> Первая часть статьи касалась структуры макета электронного сообщения. Сейчас же мы немного поговорим об оформлении и дизайне. Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег или для жирного шрифта, прописывать размер и название непосредственно семейства шрифта. Возьмем для примера заголовок статьи «Продвижение бренда в Вайбер: массовые рассылки в мессенджерах» в уже созданном шаблоне и зададим ему следующие параметры: 1. <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;">2. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах 3. </td> Посмотрите, как изменился текст: <img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_14.png' width="100%" loading=lazy> Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=»1″ заменить на border=»0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения. <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_15.png' align="center" width="100%" loading=lazy> При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например: <table width="600" align="center" style="border-collapse: collapse; border: 1px solid #cccccc;" cellspacing="0" cellpadding="0"> Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table width="100%" border="0" cellspacing="0" cellpadding="0"> 2. <tbody>><tr> 3. <td style="padding: 20px 0px 30px;"> А теперь – проба пера: отправляем письмо на тестовый email адрес. Вы можете как создать список из десятка адресов на различных почтовых клиентах и запустить тестовую рассылку, так и отправить одно письмо с помощью меню Проба, указав один адрес получателя сообщения. Вот так созданный шаблон выглядит в Gmail <img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_16.png' align="center" height="511" width="324" loading=lazy> Создавайте собственные брендовые email шаблоны, тестируйте и радуйте клиентов красочными рассылками. ePochta Mailer обладает мощнейшим функционалом для создания сообщений. В статье основной задачей было самостоятельно написать код шаблона, поэтому мы не затрагивали возможности программы. Детальнее о ePochta Mailer вы можете прочитать на . И пусть ваши клиенты с удовольствием читают ваши рассылки! Электронные HTML письма - это <a href="/kak-ochistit-um-ot-myslei-kak-ochistit-razum-ot-nenuzhnyh-myslei-i/">хороший способ</a> держать пользователей в курсе последних событий, касающихся вашего бизнеса или продукции. Однако во время создания html писем возникают трудности. В почтовых клиентах нет поддержки сторонних CSS. В результате приходится прибегать к "древним" техникам, таким как использование таблиц и встроенным таблицам стилей. Сегодня я ознакомлю вас с процессом создания простых электронных HTML писем. <h1>Введение</h1> Написание HTML писем - одна из самых трудоемких задач для фрилансера. К счастью, один из моих первых клиентов, для которого я создавал такое электронное письмо, был достаточно терпеливым, и я смог сполна погрузиться в этот длительный и противоречивый процесс. Вам может повезти меньше, так что подготовьтесь с помощью данного урока. <h1>Проблема: Почтовые клиенты</h1> Вы думаете IE - самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов? <h1>Решение: Программируйте как в 1997</h1> Да-да. Таблицы. Cellpadding, cellspacing, colspan - все эти сложные вещи, о которых вы уже, наверное, забыли. Таблицы - единственный способ получить согласованный интерфейс письма. Так что пора забыть (временно) о ваших любимых CSS стилях и вспомнить о массивных таблицах. <h1>Шаг 1: Дизайн</h1> <h2>Простота</h2> Разрабатывая дизайн электронного HTML письма, не забывайте о простоте. В таблице, используемой нами сегодня, много колонок. Это в основном, для демонстрации. Вам же следует придерживаться варианта из двух колонок, чтобы не усложнять себе работу. <h2>Минимизируйте использование изображений</h2> Не слишком фантазируйте с дизайном писем, так как Outlook не поддерживает фоновые изображения. По существу, вам хотелось бы избежать волокиты с Фотошопом и сделать дизайн практичным. Несмотря на это, использование Фотошопа остаётся в наших планах. Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него. К примеру, мы добавим легкий градиент в заголовке письма, но ничего страшного, если он не отобразится у получателя. <h2>Чем Уже, тем лУчше</h2> Из-за того что окно просмотра письма в почтовых клиентах часто занимает лишь малую часть общего окна, ваше письмо должно быть шириной не более 600 пикселей. Ведь никому не нравятся горизонтальные полосы прокрутки. <h2>Сохраняйте пропорции</h2> Помните, что нам понадобится использовать такие неудобные атрибуты как cellpadding и cellspacing для установки отступов между элементами. Благоразумно пытаться сохранять пропорции отступов между элементами. <h2>Наш дизайн</h2> Данный дизайн похож на тот, который я когда-то использовал, но упрощенный. Он не привлекателен, но это здесь не важно. Он прост и пропорционален, включает много элементов, так что вы сможете пронаблюдать, как они отличаются в различных клиентах. <h1>Шаг 2: План</h1> По моему опыту, программировать электронные HTML письма очень сложно, но быстро. Важно иметь заранее подготовленный план. И вот этот план (мы к этому вернемся, так что не переживайте, если не следите за ходом работы). Во-первых , начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица. Затем , заметьте, у нас еще три таблицы в основной: одна вверху для ссылки просмотра в браузере, одна по центру для основного содержимого письма и внизу для ссылки отмены подписки. <img src='https://i0.wp.com/ruseller.com/lessons/les861/2a.jpg' height="882" width="600" loading=lazy> Наконец , в главной таблице каждая горизонтальная часть текста будет расположена в ячейке таблицы. Такие ячейки, в свою очередь, будут содержать другие таблицы для каждого раздела текста. <img src='https://i0.wp.com/ruseller.com/lessons/les861/2b.jpg' height="882" width="600" loading=lazy> <h2>Отступы внутри и снаружи ячеек</h2> Вместо использования CSS свойств margin и padding мы будем использовать атрибуты HTML cellpadding и cellspacing. Cellpadding - почти то же самое, что и padding в CSS - отступы от содержимого до рамки . Cellspacing - это отступы между ячейками таблицы . Cellspacing таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти cellpadding и cellspacing относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни cellpadding, ни cellspacing, необходимо определить это для каждой таблицы. <h1>Шаг 3: Написание кода</h1> Теперь можно начинать написание кода письма, раздел за разделом. Мы немного стилизируем письмо, несмотря на то, что это не рекомендуется делать. Мы начнем с общего расположения элементов, отступов, фоновых цветов, а затем займемся оформлением. <h2>Создаем скелет</h2> HTML-код письма будет очень прост: нам нужны три главных тега html, head и body. Давайте создадим базовую таблицу и три внутренние таблицы, о которых мы ранее говорили. Есть несколько способов описания тега DOCTYPE. Однако в данном случае, мы исключим его вообще, так как его описание нам ничего не даст. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Ruseller Email Newsletter

Заметьте, что у двух таблиц cellpadding="20". Это отделит их от основного содержимого. Отступы главной таблицы равны 15 пикселей. Это делается для того, чтобы установить упорядоченность по вертикали. В связи с тем, что каждый раздел находится в своей отдельной ячейке, то между ними будет отступ в 15 пикселей.

Заметьте также, что у всех таблиц задан атрибут align со значением "center", а ширина таблиц задана явно (600 пикселей). В электронных HTML письмах лучше не указывать ширину основной таблицы явно. Лучше устанавливать размеры каждой ячейки, но у нас есть отступы, так что можно об этом не беспокоиться.

Таблицы с заголовками

Эти таблицы очень просты: в них всего лишь описаны параграфы в ячейках, выровненных по центру.

Проблемы с отображением письма?Просмотрите его в браузере.

Вторая таблица выглядит абсолютно так же.

Заголовок

Таблица для заголовка достаточно проста. В ней одна колонка и три строки. У нас приятный голубой цвет фона, поэтому нам понадобятся отступы внутри каждой ячейки, чтобы текст не прилипал к краям.

Не забудьте указать ширину каждой ячейки, равную 570 пикселей (600 - 15 пикселей отступов с обеих сторон). Мы также выравниваем дату по правому краю. Фоновое изображение добавим позже. А пока в качестве фона будет бледно-голубой цвет.

Заметьте, мы используем атрибут bgcolor вместо style="background: ". Это все потому что html атрибуты воспринимаются в электронных письмах лучше, нежели CSS свойства.

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

Основное содержимое - 2 колонки

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

одной для изображения,

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

и одну для самих заголовков.

Для изображения с рамкой, мы создадим еще одну таблицу в ячейке с отступом 5 пикселей и серым фоновым цветом. Отступ увеличивает ширину элемента, поэтому необходимо уменьшить ширину ячейки на 10 пикселей.

Новый дизайн сайта!

На 150% Лучше и на 40% Эффективнее!

Примечание:

Мы добавили пустую строку и ячейку в таблице. Так как у ячеек есть отступы, мы можем добавлять пустые ячейки, чтобы делать отступы в 15 пикселей между элементами. По моему опыту, это работает, но для полной уверенности можете добавить сущность.

Атрибуту valign даем значение "top". Это важно, так как располагает каждую ячейку в верхней части строки. Значение по умолчанию - middle, что приводит к непредсказуемым результатам.

Используем изображения от dummyimage.com , так как все изображения, используемые в электронных письмах, должны быть выложены в сеть (подробнее бо этом позже), и намного проще использовать генерируемые изображения. Просмотрите сайт, там объясняется, как задать картинке необходимый URL.

Основное содержимое - 1 колонка

Это очень простая часть: таблица из одной колонки с одним абзацем. Не забудьте задать ширину ячейки и выровнять таблицу по центру.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Разделители

Для того чтобы добавить отступы по вертикали (помимо 15 пикселей, которые у нас уже есть), необходимо использовать изображения. Вспомним 90-ые! Можно подгрузить изображение gif, но на данный момент быстрее использовать одно из иображений от dummyimage.com. Я оставлю его серым, но в последствии можно сделать его белым.

В результате получаем что-то вроде этого:

Основное содержимое - 3 колонки

Для этой части используем таблицу из 5 ячеек: три на колонки и две в качестве разделителей между ними.

Достаточно просто. Для границ примените тот же метод, что в части из 2 колонок. Не забывайте про valign!

Повторите то же самое и для текста.

Новые продукты!

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

Письмо каждый месяц

Новый Улучшенный Форум

Добавьте еще один разделитель в нижней части, и на этом почти всё:

Осталось совсем немного...

Это шапка

CALL TO ACTION

Работа над основной частью на этом завершается.

Пару слов об изображениях

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

Шаг 4: Оформление письма

Мы не можем подключить стили CSS и не можем описать стили в теге head в письме, потому что некоторые почтовые клиенты игнорируют его или только тег style. Мы будем использовать встроенные стили, хотя это и очень громоздко. К счастью, есть некоторые сервисы, которые встраивают стиль в html код. Я пользуюсь услугой сайта Premailer , которая делает это за меня.

Мы напишем CSS стили отдельно, а затем воспользуемся premailer-ом.

Сброс основных значений по умолчанию

Мы не будем сбрасывать значения с помощью селектора *, как вы бы сделали для сайта. Использование значений по умолчанию в действительности приведет к более согласованному результату. Единственными элементами, для которых необходимо будет сбросить значения внутренних и внешних отступов (padding и margin), являются те, которым мы добавили отступы с помощью cellpadding и cellspacing, например, заголовки и абзацы.

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

Оформление текста

Текст электронного письма не требует сложного оформления. Оформление текста письма подобно оформлению текста любой веб-страницы. Не используйте сокращений (типа "font: "), так как результаты будут неоднозначными.

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #header h1 {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; } #header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; } #header p {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; } h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; } p {font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;} h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

Смотрите, теперь письмо выглядит намного привлекательнее!

Фоновые изображения

Работа с фоновыми изображениями осуществляется практически так же, как и в случае с веб-страницами, кроме того, что иногда они не отображаются! Убедитесь в том, что у вас есть запасной цвет, который является фоном ячеек (через bgcolor). Для почтовых клиентов, не поддерживающих CSS, сработает отображение именно этого фона.

Мы закончили. Приступим к тестированию!

Шаг 5: Тестирование

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

Почтовые клиенты

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:

Outlook 2003/2007

Как тестировать?

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

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

Тестирование с помощью Mailchimp

Мне нравится использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования:

Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol" campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.

На странице design выберите Import -> Paste in code , а затем отметьте пункт Automatic CSS Inliner .

Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.

Продолжайте до тех пор, пока не дойдете до страницы confirm , где отметьте send test . Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

Тестирование с помощью Litmus

Litmus - это веб-приложение, тестирующее HTML письма во всех почтовых клиентах любой версии. Полная версия сервиса платная, и если ваш заказчик отказывается оплачивать эту услугу, вы можете протестировать бесплатно старую версию Gmail и Outlook 2003, которые все еще используются.

Хорошие результаты

Некоторые тесты показали довольно-таки хорошие результаты:

Apple Mail

Thunderbird

Не очень хорошие результаты

Некоторые результаты не вызывают восхищения, но есть и неплохие:

Gmail (safari)

Outloook 2007

Outlook 2003

Yahoo! Mail

Плохие результаты

Есть и ошибки:

Hotmail (Зелёный???)

Old Gmail (explorer)

Исправление ошибок

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения!important. Иногда я почти уверен в том, что они хотят свести меня с ума.

Чтобы это исправить, нужно добавить!important ко всем стилям заголовков:

H3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; } h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; } h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

В старой версии Gmail возникает подобная проблема в заголовке: Gmail добавляет дополнительный отступ всем заголовкам. Нам всего лишь необходимо дополнительно описать стиль для верхнего отступа заголовков:

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; } #header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

Вот мы и решили проблему с Hotmail:

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

Если вам удасться уговорить заказчика подписаться на Litmus, это облегчит работу. Вы также можете проводить тестирования многих почтовых клиентов с помощью платной версии Mailchimp и Campaign monitor.

Устранение неполадок

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

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

Проверяйте стандартные стили : используйте что-то вроде Firebug или Webkit Inspector, чтобы проверять, не перекрывает ли почтовый клиент ваши стили. Если это происходит, добавление обозначения!important решит проблему.

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

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

Результат

Вот конечный вариант кода:

Ruseller Email Newsletter

Trouble viewing this email? View in Browser

All New Site Design

It"s 150% Better and 40% More Efficient!

Exciting New Products!

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum

A Newsletter Every Month

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

New and Improved Forum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

CALL TO ACTION

You are receiving this email because you signed up for updates

Unsubscribe instantly | Forward to a friend | View in Browser

Вот как выглядит наше письмо с реальными изображениями:

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

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

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

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

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

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

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

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

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

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

Просмотр

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

Кодировка

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

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

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

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

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

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

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

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

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

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

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

Как добавить html в письмо. Как создавать и отправлять HTML-письма в Gmail с помощью Stripo? Экспорт HTML сообщения в Gmail