Также, советую почитать мою статью про актуальность SEO-оптимизации сайта при новых поисковых алгоритмах.

Как создать HTML-письмо: пошаговая инструкция

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

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

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

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

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

Подготовительный этап

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

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

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

Инструкция

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

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

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

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

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

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

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

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

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

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

Просмотр

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

Кодировка

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

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

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

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

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

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

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

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

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

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

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

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

— Really simple HTML email template – шаблон позволяет легко и быстро создавать рассылочные письма. Стоит отметить, что данные письма обладают крайне простым дизайном в виде одного столбца, в котором заключен призыв к действию.

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

Теперь рассмотрим немного другу задачу. Чтобы вставить код HTML в электронное письмо, например, gmail, используя браузер GoogleChrome, необходимо нажать на кнопку «F12» или выбрать в меню соответствующую последовательность команд. В открывшемся окне с кодом текущей страницы клиента gmail необходимо найти то место, куда нужно вставить HTML-письмо, кликнуть правым кликом мыши и выбрать «EditasHTML». После этого необходимо вставить скопированный HTML-код и использовать комбинацию клавиш Ctrl и Enter. Для той же цели можно скачать программу Mozilla Thunderbird.С помощью него также можно создать письмо, а потом выбрать пункт «Вставить», HTML и вставить туда код рассылки.

Инструменты

С помощью вордпрессовского плагина e-Newsletter можно профессионально управлять абонентами и рассылками. Стоит отметить, что и то, и другое делается при помощи панели администратора WordPress. Благодаря этому обеспечивается полный контроль, причем совершенно бесплатно, что не может не радовать. Еще одним простым инструментом является Bulletproof back groun dimages. Он представляет собой инструмент, позволяющий получить код для фонового изображения создаваемых писем. С помощью него корреспонденцию можно сделать намного красивее. Чтобы оформить письмо, необходимо просто указать URL понравившегося фонового изображения и выбрать его резервный цвет. Также здесь можно определить, должны ли данные параметры применяться по отношению ко всему телу HTML-письма или они предназначены только для отдельных ячеек таблицы. В результате должен быть получен готовый код, который необходимо скопировать и вставить в свой шаблон. Теперь вам точно известно, как отправить HTML-рассылку. Создание HTML-писем не представляет особой сложности, особенно если вам известно, как использовать готовые шаблоны, которых в сети интернет можно найти множество. Поэтому даже пользователи, которые не обладают особыми знаниями, могут легко справиться с этой задачей.

Написание электронных HTML писем — Блог веб-студии «Десять букв»

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

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

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

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

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

При верстке HTML писем много времени отнимает фактор существования большого количества различных программ для чтения электронной почты: из настольных программ – Eudora, Outlook, AOL, Thunderbird, и Lotus Notes; из работающих через веб-интерфейс — Yahoo!, Hotmail, Google Mail и др.
Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры.

Дизайн

Разрабатывая дизайн электронного HTML письма, не забывайте о простоте.
Не слишком фантазируйте с дизайном писем. Вы можете использовать фоновые изображения для украшения, но так как письмо должно выглядеть разборчиво, лучше обходится без него.
Старайтесь уместить HTML письмо в ширину около 500-600px, ведь окошко просмотра содержимого E-mail у почтовиков меньше ширины окна, причем иногда сильно меньше.
Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
Создавайте письма вручную. Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные редакторы полны недостатков. Практически все из них вставляют лишний html код, который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.

Таблицы

Используйте таблицы (table) при верстке для контроля представления и дизайна. Вы, наверное, использовали последние достижения XHTML/CSS верстки для веб-страниц, но эти принципы плохо работают в почтовых клиентах. Используйте Cellpadding, cellspacing, colspan — все эти сложные вещи, о которых вы уже, наверное, забыли.
Для внешней таблицы, содержащей таблицы шапки, контента и подвала документа, устанавливайте ширину равную 98%. Это нужно для почтового клиента Yahoo! Mail. Вы даже можете ставить ширину таблицы 95%-90%, чтобы удостовериться, что все будет отображаться хорошо. И конечно же для таблиц в середине выставляйте значение ширины равное 100%.

Об изображениях

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

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

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

Cтили CSS

К HTML письмам не стоит прикреплять внешний CSS файл — он просто не будет прочтен. Весь CSS код должен быть включен в сам E-mail. Хотя в идеале лучше вообще обойтись без каскадных таблиц стилей, так как, опять же, разные почтовики имеют разный уровень их поддержки.
Если используете CSS: Не используется CSS-сокращения: вместо того, что бы использовать правило font: 12px/16px Arial, Helvetica, вы должны использовать сочетание правил: font-family, font-size, и line-height. CSS-стили  — базовые.
Такой же прием нужно использовать и в тегах таблиц, ячеек, параграфов, ссылок и др.
Прописывайте основную информацию о стилях шрифта в теге ячейки <td> ближе к контенту. Это может привести к повторению стилей в других тегах <td>. Прописывайте стили в тегах заголовков (h2, h3), p или a, когда это необходимо.
В то время как тэги div почти не пригодны для использования, span может использоваться почти всегда, так как является inline (строчным) элементом. В некоторых случаях span может использоваться не только для настройки цвета и размера шрифта, но и для позиционирования текста выше или ниже содержания.

Еще несколько советов:

1. Избегайте использования JavaScript. В большинстве случаев они будут отключены почтовыми клиентами.
2. Если большая картинка разрезана и закодирована в разных ячейках, тестируйте такой шаблон, используя как можно больше тестовых аккаунтов. Иногда, такой шаблон может красиво смотреться в Outlook, но будут появляться ошибки в Hotmail и других сервисах. Также подумайте об использовании этой картинки в качестве фонового изображения в таблице. Этим вы достигните такого же результата. Не забывайте о том, что Outlook 2007 не отображает фоновые изображения.
3. Для фоновых изображений используйте атрибут background, вместо кода CSS. Это работает безотказно.
4. Храните изображения для электронного письма на своем сервере используя специальную папку для таких целей, например, /images/email, и не удаляйте их. Некоторые ваши читатели могут просматривать письма через неделю или через месяц.
5. Используйте атрибуты alt, height, и width для картинок. Установив значения для этих атрибутов, получите отличный результат отображения в Google Mail, и, если даже картинки будут отключены, весь шаблон будет показан хорошо. Однако помните, что Outlook 2007 не поддерживает атрибут alt.
6. Используйте атрибут target=»_blank» для ссылок, чтобы читатели, которые используют веб-интерфейс, не загружали страницу в том же окне, в которм открыта почта.
7. Попробуйте не использовать одно-пиксельные изображения, даже если это улучшит вид письма, так как фильтры могут подумать, что ваше письмо — спам.

Тестирование

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:
Outlook 2003/2007
Hotmail
Yahoo! Mail
Gmail
Apple Mail
Thunderbird

Тестирование с помощью 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. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

В заключении

Если все проверенно, и все ошибки исправлены, следующим шагом будет проверить следующие пункты:
1. Правильно ли отображается отправитель письма – имя или почтовый адрес?
2. Корректна ли тема письма?
3. Корректна ли контактная информация, и можно ли ее увидеть сразу?
4. Есть ли текст, вверху письма, «Вы получили это письмо, так как подписаны… Инструкции о том, как отписаться от рассылки находятся ниже.»?
5. Есть ли у вас ссылка для добавления вашего адреса в контакты?
6. Присутствуют ли в вашем письме ссылки на веб-версию письма?
7. Добавьте возможность управления подпиской в письмо.

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

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

Адаптивные email-письма без боли и страданий / Онлайн школа EnglishDom corporate blog / Habr

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

Верстка адаптивных писем с Foundation for Emails

Foundation for Emails из коробки умеет многое из того, что вам может понадобиться в процессе верстки писем:

• Gulp: автоматизации процесса разработки
• Inky шаблонизатор: конвертирует собственную разметку в HTML код
• Sass: CSS препроцессор
• Handlebars: генерирует HTML из JSON данных (шаблонизатор JavaScript)
• Paninin: компилятор файлов, поддерживающий шаблон прототипирования Inky.
• Inliner: переводит из таблиц стилей в инлайн стили
• BrowserSync: перезагрузка страницы после изменения исходных файлов
• Image Compression: сжатие изображений в процессе компиляции

1. Устанавливаем foundation-cli, возможно понадобится использовать sudo

npm install --global foundation-cli

foundation new --framework emails

Foundation for Emails берет на себя большинство сложностей, с которыми вам приходится сталкиваться. Как и в Foundation for sites, там используется 12-ти колоночная сетка, на основе которой вы сможете строить адаптивные письма, в которых уже заранее предусмотрен медиа-запрос для мобильных устройств. Вы можете управлять количеством колонок с помощью классов .large-n и .small-n. По умолчанию, если не указывать ширину колонки в мобильном клиенте, она будет занимать 100% контейнера.

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

Пример кода с использованием Inky:

<container>
  <row>
    <columns>Put content in me!</columns>
  </row>
</container>

<table align="center">
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <th>
                <table>
                  <tr>
                    <th>Put content in me!</th>
                    <th></th>
                  </tr>
                </table>
              </th>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

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

Более подробно с документацией Foundation for Email можно ознакомиться тут.

Тонкости и трудности

1. Реализация адаптивности в письмах — довольно сложное и утомительное занятие, поэтому мы рекомендуем вам переложить этот процесс на плечи вышеупомянутого Foundation for Emails. Он сделает основную работу, а вам останется только сказать ему, сколько колонок вы хотите видеть на мобильных устройствах и немного «поиграть» с размерами шрифтов. Конечно это небольшое преуменьшение, но он действительно здорово упростит вам работу.

Так выглядит наше письмо в десктопном и мобильном клиенте.

Foundation for Emails  в своем арсенале имеет только один брейкпоинт в 596 пикселей small=«x», но никто вам не мешает добавлять свои или переопределить глобальные, если у вас в этом есть действительно необходимость. В файле _settings.scss вы найдете все необходимое.

@media only screen and (max-width: #{$global-breakpoint})

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

<html>
  <head>
    <title>Definitely STILL an Email!</title>
  </head>
  <body>
    {{> header}}
    {{> body}}
    {{> footer}}
  </body>
</html>

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

4. Также для шаблонных рассылок рекомендуем вам использовать Custom Data. Это пользовательские данные, которые могут быть добавлены на страницу, а после сгенерированы в ваш HTML через Handlebars. Что позволит вам избавиться от необходимости править HTML.

---
title: Page Title
description: Lorem ipsum.
---

<h2>{{ title }}</h2>

<p>Stuff on top</p>
<spacer size="100"></spacer>
<p>Stuff on bottom</p>

<p>Stuff on top</p>
<table>
  <tbody>
    <tr>
      <tdstyle="font-size:100px;line-height:100px;"> </td>
    </tr>
  </tbody>
</table>
<p>Stuff on bottom</p>

7. Если делаете кнопку, делайте ее так же с помощью таблицы, иначе рискуете получить текст залитый цветом. В Inky есть готовый компонент button, главное не забудьте указать атрибут href, иначе придется гадать, почему у вас вместо кнопки простой текст.

<button href="#">Button</button>

<table>
  <tr>
    <td>
     <table>
        <tr>
          <td><a href="#">Button</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

9. Если вам нужно сделать элемент, основная цель которого «украшательство», используйте также подход graceful degradation.

В нашем примере уголок сделан с помощью псевдоэлемента :before. Он не поддерживается в Gmail и Outlook и не будет отображаться, но это не сильно ухудшит общий вид письма, а если делать его картинкой и располагать в таблице, то велика вероятность того, что он будет «жить» отдельно от своего блока, или вовсе сломает вам email.

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

→ Демо письма
→ Исходники письма

Бонусы для читателей

Онлайн-курсы

Индивидуально по Skype

Создаем индивидуальный html шаблон письма в Яндекс почте или 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 в теги <img src=»data:image/png;base64, код картинки, полученный из сервиса»/>

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

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

Как создать HTML версию письма для вашей рассылки.

Приветствую Вас уважаемые читатели и гости блога Антона Егорова.

В данной статье я хочу рассказать о том, как я сверстал (создал) новое HTML письмо для своей рассылки. Для начала хочу показать, что у меня получилось:

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

Как вы видите, я свои знания которые получил в процессе изучения курса Евгения Попова по CSS и HTML применяю на практике, я думаю что довольно успешно. Так что кому интересно, можете изучить на практике всё это и будите внедрять.

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

Правила вёрстке HTML версии письма:

• Каркас письма делаем с помощью таблиц, потому что некоторые e-mail клиенты не поддерживают CSS и всё что с ним связано.
• В теги <table> прописываем ширину для главной таблицы 95%-98% <table width=»98%»>, для других таблиц внутри главной (если таковые есть), прописываем 100% <table width=»100%»>.
• Для удобства пользователей сделайте html версию стилизованную или копирующую стиль вашего сайта, чтобы читатель сразу по внешнему виду понимал, что это письмо от Вас.
• Если вы всё же хотите использовать некоторые стили, то не используйте объявления стилей в теге <head> как для веб-страниц. Вместо этого прописывайте стили ниже тега <body> — GMail, в частности, сканирует документ и, если находит объявление стилей выше этого тэга, удаляет.
• Для фоновых изображений используйте атрибут background, вместо кода CSS.
• Для ссылок используйте атрибут target=»_blank», чтобы у тех, кто использует браузерные версии e-mail ссылки открывались в новом окне, а не в окне их почты.

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

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

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

Кстати, для некоторой вёрстке и некоторых шаблонов HTML лучше подойдёт задания фиксированной ширины, допустим внутренней части, чтобы дизайн при масштабировании странице «не поплыл».

Минус всего этого в том, что без включённых картинок e-mail письмо выглядит коряво, хотя для того чтобы немного скрасить это всё используйте там атрибут alt=»Это логотип блога» в котором прописывайте что за элемент должен отображаться. Когда пользователь включит картинки он увидит всё что прочитал на ваших надписях

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

Успехов!

З.Ы. Кстати я тут подумал для тех кому нужно сделать что-то подобное и для моей тренировки сделаю 5 подобных писем для вас БЕСПЛАТНО. Дальше за подобную услугу буду брать деньги Если есть желающие, то пишите мне в службу поддержке с темой «Вёрстка HTML письма!» и описываете задание что нужно, как видите и с чего берём элементы.

С уважением, Антон Егоров!