Здравствуйте дорогие читатели – сайт!

Сегодня я покажу, как сделать красивый для E-mail рассылки.

Уже давно ни для кого не секрет, что весь бизнес в Интернете построен на E-mail маркетинге.

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

Но, что бы на такое предложение обратили внимание, а не сразу отправили в папку «спам», нужно привлечь к нему внимание.

Для этого будет уместным сделать красиво оформленный HTML шаблон письма.

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

Что и как мы будем делать?

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

Создание каркаса и таблицы-контейнера

Для начала нам нужно сделать HTML каркас нашего письма. Выглядеть это будет так:

Обратите внимание, что ширину таблицы я задал 99% , оставив вокруг небольшое расстояние. Это не моё личное желание, а требование некоторых почтовых Веб-клиентов таких, как Gmail и Yahoo . Остальная часть нашей электронной почты будет находиться в этой одной ячейке таблицы, которая расположена по центру.

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

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

Создание шапки

Теперь, когда основная таблица создана, пришло время браться за её наполнением необходимым содержимым. Я начну с самого верха шаблона письма и потихоньку, буду опускаться вниз.

Верхняя строка

Начиная с этого момента, я буду исключать ранее написанный код (рамки таблицы).

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

Возникли проблемы при просмотре этого письма? Щелкните здесь для просмотра.

А за её внешний вид отвечает CSS стиль:

/* Fonts and Typography */ .footer { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #fff; padding-right: 20px; }

Логотип и иконки социальных сетей

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

За их вывод отвечает вот такой код:

Вдобавок, ко всем нашим изображения в HTML шаблоне письма добавляются следующие стили:

/* Backgrounds */ .email_background { width: 640px; background: url("email_images/email_bg.jpg") repeat-y; } /* Images */ img { display: block; border: none; }

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

Добавление содержания

Сначала мы начнём с добавления первого изображения, которое в данном дизайне имеет размер 560px на 210px . Вы также можете увидеть милую деформированную тень под изображением, которая была сделана отдельно, что позволяет быстро менять изображения, не теряя тень. Давайте перейдем к коду:

Здесь мы создали новую строку для показа больших изображений, установив ширину до 560px с добавление 20px отступов с обеих сторон. Те же действия мы проделали и с тенью.

Добавление заголовка и содержания

Перемещаясь ниже, мы видим заголовок основного материала и непосредственно само содержимое. Здесь за вывод контента отвечает вот такой код:

This is your featured story

Существует мнение, что Паттайя стала популярным курортом благодаря тому, что тут часто отдыхали американские моряки, которых впрочем, тут и сейчас большое количество и они всегда в окружении нескольких таек. Естественно среди наших соотечественников он менее популярен, чем Египет и Турция. Но родную речь тут слышно повсеместно)) и в торговых комплексах во время шоппинга и во множестве здешних баров)). Паттайя в основном знаменита своей ночной жизнью, морем и текстилем. Конечно, кроме всего прочего тут можно найти множество других интересностей. Здесь можно брать в прокат любой транспорт, в том числе и джипы и скутеры. Для любителей мототехники тут вообще райский уголок. Чтобы взять в аренду мотобайк права могут даже и не потребовать, всего за 100-500 бат (плюс залог в размере 2 000 бат) можно арендовать приличный скутер и погонять в свое удовольствие!

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

H1 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 24px; font-weight: normal; } .content { padding: 0; margin: 0; } p { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; }

Дополнительное содержимое

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

This is a secondary headline	This is a secondary headline
Несмотря на погубленную репутацию Паттаи, здесь можно узнать, что пресловутый тайский массаж - не только прикрытие для борделей. В Таиланде действительно делают неплохой массаж, а лучшими специалистами в этом искусстве считаются слепые мастера. Их секрет заключается в повышенной чувствительности пальцев.	Центральная улица и сердце Паттайи, которая никого не оставляет равнодушным. Местный Арбат, Таймс-Сквер и Содом с Гоморрой в одном стакане, «Уокинг Стрит» – настоящий источник любви и ненависти как для местных жителей, так и для приезжих. Говорим «Паттайя», подразумеваем Walking Street.

Здесь нам ещё потребуется добавить дополнительный стиль. Вот он:

H2 { color: #e95f03; font-family: Futura, Verdana, Sans-Serif; padding: 0; margin: 0; font-size: 18px; font-weight: normal; }

Закрытие HTML шаблона письма

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

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

Здесь Вам необходим такой код:

Рассылка от: Иванов Иван
Автор блога: Ivan.ru

Хотите отказаться от подписки? Нажмите здесь

Заключение

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

Тестовый HTML шаблон письма был дан, как пособие, которое Вы можете в любой момент переверстать на свой вкус и цвет.

На сегодня это всё. Надеюсь, что Вам понравилось.

До новых статей…

С уважением, Денис Черников!

Seo - практик

Создаем индивидуальный htm-шаблон письма для Yandex / Mail.ru

Все компании (особенно их директора) хотят выделиться на фоне остальных своим уникальным стилем. И e-mail письма не исключение. Но многие почтовые клиенты и сервисы предоставляют возможность изменить только подпись в письме. Что ж, это делают все, а как быть если необходимо сделать вот такое письмо:

При условии того, что корпоративная почта развернута на бесплатной платформе Яндекса или Mail.ru (Gmail для бизнеса не берем в расчет, т.к. она уже давно не бесплатная) задача становится достаточно трудоемкой, но она решаема!

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

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

• Yandex – почте;
• почте mail.ru;
• Gmail почте;
• Mozilla Thunderbird;
• The Bat;
• Microsfot Outlook.

С версткой письма у нас все в порядке, поэтому приступаем к магическим ритуалам.

Из всех почтовых сервисов и программ на данный момент только Mozilla Thunderbird и Microsfot Outlook поддерживают вставку письма в HTML-формате. Но все пользователи в Вашей компании «категорически доверяют» Yandex – почте (или mail.ru), да и сам директор отказывается переходить на непонятные программы, когда он уже ни один год отправляет письма с его любимой темой «Звездных войн». А Yandex не поддерживает вставку письма в HTML-формате. Как быть?

Идем на хитрость.

Устанавливаем и настраиваем Mozilla Thunderbird на учетную запись нужного нам сотрудника.

Обязательно указываем передачу данных через IMAP – протокол для входящей почты, для исходящей SMTP – протокол. Данная манипуляция позволит скачивать почту в Mozilla Thunderbird без ее удаления на серверах Yandex и автоматически обновлять отправленные письма с Mozilla Thunderbird на серверах Yandex.

Эта особенность поможет нам создать шаблон письма в Mozilla Thunderbird в HTML-формате и автоматически выгрузить его в одну из папок в почте Yandex.

Вставляем HTML-код в письмо и сохраняем его как шаблон в Thunderbird:

Через 1-2 минуты в Yandex появляется необходимая нам папка «template», где содержится сверстанное нами письмо. Данный шаблон можно поправить и сохранить уже в нужном нам виде в самой Yandex-почте:

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

Проблема: не отображаются картинки в шаблоне письма на принимающей стороне.

Да, есть такая проблема. Если Вы подгружаете изображения со стороннего сайта (например, с сайта своей компании), то картинки у адресата отображены не будут. Данную проблему можно решить двумя способами:

• Загрузить картинки, используемые в верстке письма на Yandex диск (если отправляете почту с Yandex, либо в облако Mail.ru, если отправляете почту с mail.ru). Далее указать прямые ссылки на эти изображения в сервисах. Обратите внимание, что по указанной Вами ссылке должна открываться картинка и ничего более.
• Возможно загрузить картинку в само тело письма, перекодировав его в base 64. Далее вставить код картинки в формате base 64 в теги

Лучший вариант - это перекодировка изображения в код base 64 – меньше движений мышкой, больше надежности (изображение не удалят с Yandex диска, оно уже вложено в само письмо).

Задача выполнена. Thunderbird можно удалять. Директор и сотрудники довольны – теперь их письма совсем не такие как у всех.

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

Если вы устали отвечать на один тот же вопрос снова и снова, тогда вам помогут «Готовые ответы» от Gmail.

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

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

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

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

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

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

Как создать шаблон ответа в Gmail

Теперь, когда вы поговорили о том, когда использовать шаблоны писем, настало время объяснить как создать ваш собственный шаблон Gmail, используя «Шаблоны ответов».

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

Или проследуйте этим детальным шагам, описанными ниже и вы получите больше информации на тему: как создать и использовать шаблоны писем в Gmail.

Шаг 1. Где находится Лаборатория Gmail и как включить «Шаблоны ответов»

«Шаблоны ответов» это функция доступна в Лаборатории Gmail, поэтому чтобы её использовать, вам надо зайти в Лабораторию Gmail

1. Доступ к Лаборатории Gmail

Для доступа к Лаборатории Gmail, начните с главного окна папки «входящие». Нажмите значок Настройки (шестирёнка) в правом верхнем углу. Из выпадающего меню, выберите вариант Настройки.

Выберите вариант Настройки .

Отобразится страница Настроек . Нажмите Лаборатория сверху в выборе доступных вариантов в Gmail. Прокрутите вниз, пока не увидите Лабораторию Gmail Шаблоны Ответов .

Прокрутите вниз до Лабораторию Gmail «Шаблоны Ответов».

2. Включите «Шаблоны ответов» от Gmail

По умолчанию Шаблоны ответов отключены. Нажмите переключатель Включить с правой стороны, чтобы включить эту функцию.

Нажмите переключатель Включить

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

Шаг 2. Как создать шаблон в Gmail

Теперь, когда шаблон ответов включены, вы можете начать создавать ваши шаблоны писем. Для начала, нажмите кнопку Написать сверху слева. Отобразится форма Новое сообщение :

Напишите ваше сообщение.

Наберите сообщение, из которого вы хотите сделать шаблон. Уделите внимание тому, что вы напишите в поле Тема , так как это будет заголовком вашего «Шаблонного ответа». Заполнять поле Получатели не обязательно.

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

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

Выберите вариант Создать готовый ответ .

Теперь нажмите Шаблоны ответов > Создать готовый ответ . Вас попросят дать название готового ответа (по умолчанию используется тема):

Этот готовый ответ будет назван Наши рабочие часы .

Если вы хотите изменить название вашего заготовленного ответа, сделайте это сейчас. Убедитесь на будущее, что название достаточно описывает то, что несет в себе шаблон.

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

Отметьте: Шаблоны ответов сохраняются с меткой Черновик . Если вы случайно удалите готовый ответ из Черновиков , он больше не будет работать, даже если он всё ещё будет отображаться в меню Готовых ответов .

Шаг 3. Как использовать Шаблоны Gmail для ответа

Теперь, когда вы создали шаблон Gmail, вы готовы его использовать. Вы можете использовать Готовые ответы для новых сообщений или для ответа на полученные сообщения. Вы также можете создать фильтр для автоматической отправки шаблона, в ответ на полученное сообщение.

В этом шаге, я объясню оба варианта.

1. Использование шаблона вручную

Для использования шаблонного ответа, либо начните новое сообщение или нажмите иконку Ответить , для ответа на входящее сообщение.

Когда откроете форму Новое сообщение или Ответить , нажмите стрелку в нижнем левом углу (рядом со значком урны), чтобы увидеть «Готовые ответы».

Выберите «Шаблоны ответов» в Gmail

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

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

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

Нажмите кнопку Отправить слева внизу формы, чтобы отправить ваше сообщение.

2. Используйте фильтр для автоматической отправки готовых ответов

Также вы можете создать фильтр Gmail, для автоматической отправки готовых ответов.

Откройте страницу Настроек . Нажмите Фильтры и заблокированные адреса .

Нажмите ссылку Создать новый фильтр .
Укажите параметры фильтра.

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

• адрес От
• строка Тема
• слова в письме
• наличие в письме прикрепленных файлов
• если это сообщение чата
• размер письма

Укажите информацию в соответствующие поля.

После указания ваших параметров, нажмите ссылку Создать фильтр в соответствии с этим запросом . Появится окошко Создать фильтр :

Выберите опцию «отправить готовый ответ».

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

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

Нажмите кнопку Создать фильтр . Увидите сообщение «Фильтр создан ».

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

Для получения большей информации о том, как можно использовать фильтры Gmail, посмотрите следующие уроки:

Шаг 4. Как изменить или удалить шаблон письма в Gmail

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

1. Изменить готовый ответ

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

Выберите готовый ответ для изменения.

Нажмите шаблоны ответов . Затем нажмите на название готового ответа под заголовком Вставить . Сообщение заполнится выбранным готовым ответом.

Шаблон готового ответа Gmail в сообщении.

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

Нажмите OK , чтобы перезаписать готовый ответ.

Примечание: при изменении шаблонного ответа , убедитесь что вы удалили оригинальный шаблонный ответ из Черновиков . Если вы случайно сохраните два готовых ответа с одним названием, они могут перестать работать .

2. Удаление шаблона ответа

Вы можете удалить шаблон ответа, который вам больше не нужен в выпадающем меню. Начните с формы Новое сообщение .

Нажмите стрелку вниз, справа внизу формы Новое сообщение . Выберите вариант Шаблоны ответов . Появится меню с готовыми ответами :

Выберите название готового ответа, чтобы удалить его.

Кликните по названию готового ответа, который вы хотите удалить. У вас попросят подтверждения:

Кликните OK для удаления готового ответа.

Для удаления готового ответа, нажмите кнопку OK .

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

Шаг 5. Как подключить шаблоны ответов

Если вы решили, что больше не хотите использовать шаблоны ответов в Gmail, вы можете отключить функцию «Шаблоны ответов».

Чтобы подключить шаблоны ответов, пройдите в Лабораторию Gmail через Настройки . Прокрутите до функции Шаблоны ответов . (Она будет в разделе Включенные экспериментальные функции в верхней части страницы .)

Нажмите переключатель Выключить.

Нажмите переключатель Выключить . Затем нажмите кнопку Сохранить изменения внизу страницы. Теперь функция Шаблоны ответов больше не доступна.

Примечание: сообщения Шаблонных ответов, которые вы создали ранее остаются в ваших Черновиках до тех пор, пока вы их не удалите.

Вывод

Перестаньте писать повторяющиеся сообщение писем. Используйте шаблоны писем в Gmail, который вы создаете один раз и используете их при необходимости когда угодно, с экспериментальной функцией «Шаблоны ответов» Gmail. Вы сэкономите время и станете более продуктивным. Функцию «шаблоны ответов» очень просто использовать, когда вы знаете как.

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

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

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

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

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

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

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

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

Подготовка

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

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

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

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

Пошаговая инструкция

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

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

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

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

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

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

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

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

Просмотр

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

Кодировка

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

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

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

Несколько популярных шаблонов

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

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

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

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

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

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

Инструменты

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

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

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

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

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