Как в mail html код в письмо: Как отправить html-письмо через Mail.ru

Как отправить html-письмо через Mail.ru

Дата публикации: 5 сентября 2016

Чтобы отправить html-письмо через Mail.ru нужно проявить немного смекалки. Мы самостоятельно разобрались в том, как это сделать и подготовили подробную пошаговую инструкцию.

Шаг 1. Подготовка письма

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

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

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

Шаг 2. Вставка письма в Mail.

ru

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

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

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

Именно этот блок отвечает за наполнение письма и нам нужно вместо него вставить наш шаблон. Для этого щелкните правой кнопкой мыши по блоку и нажмите “Edit as HTML”.

Далее нам нужно удалить весь находящийся там код…

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

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

Шаг 3. Отправка html-письма

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

После того, как содержание письма полностью вас устроит — отправляйте. А чтобы не делать это каждый раз, можно сохранить его как шаблон в mail.ru.

Отправка html-письма через веб-интерфейс Mail.ru

5 февраля 2019

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

Видео

Пару слов о шаблоне

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

<figure>
<img src="http://servername.ru/images/image1.jpg" title="imagetitle" alt="imagealt"/>
</figure>
 

Готовим почву для отправки

Здесь наша работа будет состоять из двух частей. Первая — это подготовка к корректировке html-кода в браузере, а вторая — подготовка кода нашего письма к внедрению в браузер при помощи самого простого редактора — «Блокнота».

Итак, авторизуемся на сервисе Mail.ru и инициируем создание нового письма.

Рис. 1

Браузер, а мы используем Google Chrome, переключится в том же окне в форму создания нового письма. Доступность т.н. панели оформления покажет нам, что мы используем нужный нам режим создания письма. Убедимся, что она активна, и более её не трогаем.

Рис. 2

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

Рис. 3

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

Рис. 4

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

.. ….</body>.

Наша задача — вставить вместо этого блока кода код нашего письма. Для чего правым кликом по выделенной области кода вызываем контекстное меню, и в нём выбираем «Edit as HTML».

Рис. 5

Выделенный блок переключится в режим правки. Здесь нам понадобится выделить всё его содержимое, весь код, и удалить его. Но до того, отвлечёмся на вторую составляющую наших действий, откроем содержимое нашего файла с html-письмом в текстовом редакторе «Блокнот».

Рис. 6

И весь текст с кодом письма из «Блокнота» скопировать в буфер обмена.

Рис. 7

После чего вернёмся обратно в Chrome. Выделяем переведённый ранее в режим правки блок html-кода (если нужно, повторяем переход в режим правки, как на рисунке 5), вызвав правым кликом контекстное в меню и в нем выполнив команду «Выделить все»

Рис. 8

Теперь ещё раз правый клик по выделенному блоку и выберем команду «Вставить»

Рис. 9

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

Рис. 10

И тренируемся отправлять

И вот, мы видим перед собой наше html-сообщение. Если, конечно, мы ничего не перепутали, и нигде не ошиблись. Картинок в нём видно в этот момент не будет, но до получателя оно дойдёт уже с изображениями. Чтобы в этом убедиться, и заодно, чтобы проверить корректность отображения в целом, отправим это письмо сначала самому себе.

Рис. 11

Проверяем результат.

Рис. 12

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

Рис. 13

Урок, мы надеемся, понятен и усвоен. Как никакая иная фраза, к нашим упражнениям подходит присказка про то, что «…не мытьём — так катаньем…». А что? Знай наших, теперь мы знаем, что html-письма можно отправлять и так.

Прямо из браузера, и прямо из недр очередного почтового сервиса.

Как создавать и отправлять HTML-письма в Gmail с помощью Stripo? — Stripo.email

По данным Statista, в 2019 году количество пользователей электронной почты во всем мире достигло отметки в 3,9 миллиарда. Как утверждает Википедия, 1,4 миллиарда из них пользуются Gmail. Получается, что 35,8% всех пользователей предпочитают этот почтовик.

Бывают случаи, когда простых текстовых писем недостаточно. И тогда на помощь приходят письма в формате HTML.

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

Интернет предлагает широкий выбор редакторов HTML-шаблонов. Подавляющее большинство редакторов позволяют создавать адаптивные шаблоны, но только в некоторых доступен экспорт их непосредственно в Gmail.

Регистрируйся

Хотите делать все это за несколько минут?

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

В этой статье я собираюсь сделать следующее:

• создать HTML-шаблон;

• экспортировать его в мой аккаунт Gmail;

• уделить внимание ряду технических возможностей Gmail;

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

1. Создание письма

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

Это можно сделать тремя способами:

1. Первый способ – использовать созданные нами HTML-шаблоны писем

Stripo предлагает более 300 готовых шаблонов. Они отсортированы по типам: подтверждения, брошенные корзины, промо, приветствия и т.д, и по функциям: традиционные HTML, интерактивные (написанные в HTML5) и на основе AMP (написанные в AMP HTML) – как известно, Gmail поддерживает технологию AMP 4 Email. Выберите шаблон, который вам понравится больше других и, конечно же, адаптируйте его под «себя», чтобы ваш HTML-шаблон для Gmail соответствовал стилю вашего бренда. Это не отнимет много времени.

2. Второй способ – создание HTML-шаблона с нуля

Для этого вам понадобится войти в ваш аккаунт Stripo, перейти в раздел  «Шаблоны» и выбрать вкладку «Базовые шаблоны». Там вы найдете наш «Мастер шаблон». Создайте один шаблон на все случаи жизни — после чего просто комбинируйте блоки в соответствии с целями вашей текущей кампании.

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

3. Третий способ – вставить либо импортировать свой HTML-код

Вам опять же нужно войти в свой аккаунт на вкладку «Шаблоны», после чего перейти к “Базовым шаблонам” — и выбрать «Мой HTML».

Откройте этот «шаблон» и вставьте кастомный HTML-код.

Если у вас нет собственного HTML-шаблона, то первый вариант самый простой. Давайте рассмотрим его.

Как же настраивать наши готовые шаблоны?

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

Итак, вы выбрали понравившийся шаблон…

Теперь вам нужно открыть его в редакторе:

Шаг 1. Как добавить тему письма и прехедер с помощью Stripo и как после этого будет выглядеть ваше письмо

Как известно, прехедер – первое, что получатели видят еще до открытия письма. И скажем прямо: люди принимают решение, открывать ли письмо или нет, исходя из следующим факторов: ваше имя, тема письма и прехедер, его еще называют предзаголовок.

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

Важно отметить:

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

(Шрифт Arial, превью прехедера)

(Я использовала Courier New для текста прехедера в шаблоне)

Важно отметить:

Всегда добавляйте ссылку «Просмотр в браузере». Ее также можно назвать «веб-версией».

Чтобы получить ссылку на веб-версию вашего письма, вам нужно:

• войти в режим предварительного просмотра;

• нажмите “Копировать” в новом окне, чтобы сохранить ссылку в буфер обмена;

Шаг 2.

Как добавить хедер и логотип с помощью Stripo и как после этого будет выглядеть ваше письмо

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

Вы также можете добавить в хедер иконки соцсетей и контактную информацию.

Важно отметить:

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

Шаг 3. Как добавить баннер с помощью Stripo и как после этого будет выглядеть ваше письмо

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

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

Подробности о том, как создавать баннеры, вы найдете в статье “Виды баннеров: как создать баннер в Stripo Email Builder за считанные минуты” на нашем блоге.

Шаг 4. Как добавить структуры с помощью Stripo и как после этого будет выглядеть ваше письмо

Изображение и текст, 2 фото и 2 текстовых блока в ряд? Решать вам. Но это достаточно распространенный вариант, и многие редакторы предлагают на выбор структуры с одним или двумя блоками в ряд. Хотя у нас вы можете выбрать до 8 блоков.

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

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

А здесь — три колонки в структуре:

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

Структура с четырьмя колонками:

Важно отметить:

Если вам вдруг маловато и 4 колонок в структуре, вы можете добавить еще четыре штуки. То есть всего получится 8 колонок.

Для этого вам нужно:

Регистрируйся

Добавляйте фоновые изображения или цвета для каждого блока отдельно или же один фон для всей структуры.

Шаг 5. Как добавить иконки соц. сетей с помощью Stripo и как после этого будет выглядеть ваше письмо

Вы можете помещать их где хотите.

Мы предлагаем 45 иконок соцсетей, а не только стандартные иконки Facebook, Twitter и Instagram. Мы сделали все возможное, чтобы собрать полную коллекцию иконок для вашего удобства.

Вы также можете выбирать цветовые схемы и настраивать размеры иконок.

Все очень просто: перетащите блок соцсетей в нужную структуру, настройте дизайн иконок и вставьте URL-адреса в поля ссылок.

Чем примечательны наши иконки соцсетей? 

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

При создании следующей кампании просто перетащите базовый блок соцсетей в HTML-шаблон Gmail, и Stripo добавит уже выбранные вами иконки с соответствующими ссылками и настроенным вами дизайном.

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

Шаг 6. Как использовать нашу библиотеку модулей и чем она полезна при создании HTML-писем для Gmail

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

Сохраняйте элементы писем, контейнеры и целые структуры.

Во вкладке «Мои модули» вы увидите те модули, которые вы сохранили ранее. В «Модулях шаблона» — те блоки, которые система извлекла из самого шаблона, созданного нами. А раздел «Специальные» содержит модули, созданные нашими разработчиками и дизайнерами.

Шаг 7. Как создавать промо-аннотации Gmail с помощью Stripo и как после этого будет выглядеть ваше письмо

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

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

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

Регистрируйся

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

Подробности о создании аннотаций вы найдете в специальной статье нашего блога.

Шаг 8. Как добавлять элементы AMP в письма и как они будут выглядеть в Gmail

В марте 2019 года Google выпустили новую технологию AMP 4 Email. И Stripo стал первым конструктором шаблонов, который позволяет создавать AMP-письма без каких-либо навыков кодирования.

Stripo предлагает два drag-n-drop блока на основе AMP:

• меню-гармошка для подачи контента в виде секций. Так, контент выглядит более структурированным;

• карусель изображений — используется для размещения от 3 до 16 баннеров на одном скролле экрана. Получателям нужно просто нажать на стрелку, чтобы увидеть все изображения карусели.

Вы также можете создавать AMP-элементы в Google Playground и затем встраивать их в HTML-шаблоны Gmail с помощью нашего редактора открытого кода.

Подробности о создании AMP-писем с помощью Stripo вы найдете в специальной статье нашего блога.

Шаг 9. Как настроить отображение HTML-писем для Gmail на мобильных устройствах

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

Stripo позволяет адаптировать письма для Gmail App всего одним кликом.

Для активации этой опции вам нужно:

Обратите внимание, что вы также можете добавлять следующие элементы в свои HTML-письма для Gmail:

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

2. Экспорт HTML-писем в Gmail

Это мой любимый этап.

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

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

Десктопная версия также может иметь два варианта: HTML и AMP HTML. Вы должны проверить обе. Если вам нравится то, что вы видите, и наш валидатор AMP-кода не находит ошибок в вашем письме — можно приступать к экспорту.

Примечание: убедитесь, что в вашем браузере активна опция pop-up окон.

• в новом выпадающем окне вам будет предложено войти в систему с помощью Google;

• дайте Stripo доступ к своим черновикам, нажав «Разрешить»;

• найдите свой HTML-шаблон в папке “Черновики”. Он готов к отправке.

Важно отметить:

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

Регистрируйся

Как использовать HTML-шаблоны в Gmail? Просто введите тему письма, если вы еще не сделали этого в Stripo, добавьте получателя (если хотите отправить HTML-письмо одному пользователю Gmail) или группу получателей, если собираетесь сделать массовую HTML-рассылку, и порадуйте получателей привлекательными письмами!

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

3 и 4.

Технические ограничения Gmail: как Stripo справляется с ними

Я встречала множество фактов и гипотез о Gmail и решила их проверить. Итак:

Гипотеза 1. Gmail предлагает получателям скачивать изображения без ссылок

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

Я проверила – да, это правда. Возможно, вам не хочется, чтобы в письме была эта кнопка «Скачать», потому что она ломает весь дизайн и письмо смотрится непрофессионально.

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

Конечно же, она никуда не приведет покупателей, но это убережет ваших подписчиков от надоедливой кнопки «Скачать».

Вывод: это правда.

Гипотеза 2. Изображения без Alt-текста попадают в папку «Спам» 

Уверена, вы тоже слышали такое, что сообщения попадают в папку «Спам», если для каждой картинки в письме не был задан атрибут альтернативного текста (alt-тег).

Я специально отправила множество сообщений с удаленным alt-текстом, но все они были без проблем доставлены во входящие. Хочу отметить, что при этом я тестировала только Gmail.

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

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

Постарайтесь сделать их максимально понятными.

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

Гипотеза 3. Gmail обрезает письма

Это суровая истина. Gmail обрезает письма, вес которых превышает 102 КБ.

В конце видимой части письма предлагается «Просмотреть все сообщение».

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

В свойствах файла указан вес 65 кБ. Я проверила его с помощью нескольких приложений, включая mail-tester.com. Все они подтвердили корректность взвешивания.

Вывод: это правда. Но вы знаете, как взвешивать письма с помощью mail-tester или любого другого инструмента.

Гипотеза 4. Gmail не поддерживает класс <div>

Проверено: Gmail передает и отображает эти атрибуты. 

Вывод: это неверно.

Гипотеза 5. Кнопка отмены не работает для массовых рассылок

Совершенно неверно, если вы используете Gmail без каких-либо расширений, например Gmail Mail Merge. Все, что вам нужно сделать – зайти в настройки, найти «Отменить отправку» и выбрать время: 5, 10, 20 или 30 секунд.

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

Вывод: это неверно.

Гипотеза 6. Текстовые блоки объемом свыше 8500 символов удаляются

И как копирайтер, и просто как женщина я люблю длинные предложения и подробные пояснения. И я решила вставить одну из своих статей в текстовый блок. Эта статья содержала около 10.000 символов без пробелов. Я отправила это письмо другу. Письмо было доставлено, и ни один из блоков не был вырезан или удален.

Так что мы можем сказать, что гипотеза не подтвердилась. Кстати, это отлично. Хотя я искренне сомневаюсь, что кто-то из нас будет отправлять такие длинные письма.

Вывод: это неверно.

Гипотеза 7. Номера телефонов и адреса электронной почты в HTML-письмах Gmail становятся кликабельными

Я слышала, что Gmail вставляет в письма ссылки на наши адреса и номера телефонов, то есть делает их кликабельными. Я проверила тонны мобильных номеров. И знаете? Ничто не было кликабельным. Я по-прежнему должна выделять и копировать их для использования.

И да!! С адресами электронной почты все было вообще забавно. Они были либо серые, но кликабельные — либо синие, подчеркнутые, но не кликабельные.

Вывод: неверно. Все нужно делать вручную 🙂

Гипотеза 8. Фон не отображается в десктопной версии Gmail, если ширина письма превышает 640 пикселей

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

Естественно, мы это проверили.

Фоновое изображение и цвет (мы тестировали оба варианта) отображались в Gmail на всех устройствах и во всех браузерах.

(Ширина контентной части – 670 пикселей, ОС – macOS)

Вывод: неверно.

Гипотеза 9. Gmail заменяет кастомные шрифты стандартными

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

Я протестировала 4 разных шрифта.

Вот как они сработали:

1. Great Vibes – хорошо работал на мобильных и десктопных устройствах;

2. Dokdo – был заменен на Arial;

3. Alexa Std – был заменен на Arial;

4. Montserrat – был заменен на Arial.

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

Хотим напомнить, что вы можете загружать пользовательские шрифты с помощью Stripo.

5. Предварительный просмотр и тестирование

Всегда предварительно просматривайте и тестируйте свои HTML-письма и перед отправкой, и перед экспортом в Gmail.

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

В завершение

Теперь, когда вы знаете, как создать HTML-письмо для Gmail (и в курсе, что работа со Stripo экономит время) — мы надеемся, что вы будете отправлять только привлекательные HTML-письма своим друзьям и коллегам.

Если у вас по-прежнему есть вопросы — оставьте комментарий ниже или напишите нам по адресу support@stripo. email.

Создаем индивидуальный 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:

Вставляем HTML-код письма через пункт меню «Вставить» — «HTML…»

Через 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 для Email: Что можно и чего нельзя делать

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

Как верстать письмо. Базовые приемы

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

Делать: Табличную верстку

Использование таблиц для макета шаблона позволяет письму не «ломаться» и корректно отображаться во всех почтовых клиентах. Несмотря на то, что как метод веб-разработки табличная верстка устарела, но для создания email-писем она является основной:

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

Делать: Одноколоночный шаблон

Самый простой макет для реализации с помощью CSS – это Single column layout (макет в один столбец). Блоки письма будут располагаться последовательно друг под другом.

В настоящее время многие используют этот вид макета, так как он отлично смотрится на любых устройствах и экранах, особенно на мобильных. Кроме того, он облегчает чтение даже очень длинного письма и позволяет делать верстку более гибкой. Например, добавив стиль mso-hide:all; можно скрыть отдельный элемент для ПК:

Делать: Стили прямо в коде, а не в отдельных блоках

Поддержка стилей в разметке head существует, но есть почтовые клиенты, которые их не обрабатывают, так что лучше придерживаться inline CSS. Разница в том, что inline CSS – это стили, которые записываются в атрибут style для тегов, а встроенные – это отдельный тег в head письма.

Например, вот так inline CSS применяются к таблице:

А вот так выглядят встроенные CSS:

Делать: Медиазапросы

С помощью медиазапросов (media queries) можно создавать адаптивный макет. Они позволяют видеть с мобильных устройств дизайн email с измененными шрифтами, изображениями и фоном. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину письма, размеры изображений и текста, и т.д.

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

Лучше использовать такой подход когда возможен конфликт стилей.

Получить бесплатный шаблон

Зарегистрироваться

Делать: Оптимизацию под Retina-экраны

Сейчас все больше и больше людей используют устройства с дисплеями с высокой плотностью пикселей: iPhone, MacBook, iPad и т.д. Чтобы все изображения выглядели четкими на таких экранах, оптимизируйте картинки под них. Используйте изображения в два раза большего размера, чем нужно по макету.

Один из самых простых способов – подготовить исходное изображение в 2Х-размере и разделить их пополам уже в редакторе. Например, чтобы показать фотографию 200×300 px на экране с увеличенной плотностью пикселей, необходимо загрузить фото размером 400×600 px уменьшить его, используя CSS-атрибуты или HTML.

Last post

Делать: Абсолютные адреса

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

Если адрес не содержит имени сервера или протокола, то это относительный адрес:

Делать: Предзаголовок в дополнение к теме

Текст предварительного заголовка важен, потому что люди видят его перед тем, как открыть емейл. Но не нужно прописывать в коде текст прехедера. Лучше запишите его как комментарий HTML. Это предотвратит случайную отправку емейла с текстом-рыбой для предварительного заголовка. Например: “Написать текст предварительного заголовка здесь”.

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

В открытом письме его видно не будет.

Делать: Правильную кодировку символов

Кодировщик символов помогает убедиться, что специальные символы не будут отображаться в виде квадратов, символов ромба с вопросительными знаками внутри или просто вопросами:

Например, внеся в редакторе eSputnik в код такие символы

вы получите пустой скрытый предзаголовок:

 

Делать: Адаптивность

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

В редакторе eSputnik можно играть с адаптивностью, чтобы письма одинаково хорошо смотрелись и на телефоне, и на ПК:

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

Делать: Комментарии в коде

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

Делать: Тесты

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

Работая в редакторе eSputnik, вы всегда можете отправить тестовое сообщение, чтобы посмотреть, хорошо ли оно выглядит как на телефоне, так и на компьютере:

Если же вы только создали свой первый шаблон и хотите, чтобы его отображение было идеальным, воспользуйтесь специальными сервисами для тестирования отображения писем (Litmus, Email on Acid)

Не делать: Изображения с разными областями для клика

Одно изображение, которое ведет к разным URL-адресам (Image maps), не распознается многими почтовыми клиентами. Чтобы все было в порядке, нарежьте свои изображения на несколько отдельных картинок, и каждую свяжите с нужной веб-страницей.

Не делать: Дизайнерские шрифты

Причудливые шрифты не будут правильно отображаться во многих почтовых клиентах. Как правило, вы можете использовать стандартные шрифты. Но лучше определить резервный шрифт на случай, если выбранный вами не распознается почтовым клиентом (с этим могут помочь такие ресурсы, как: What The Font?, FontShop и т.д.).

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

Не делать: Heavy&Complex CSS/HTML

Советуем отложить JavaScript, Flash, HTML5 и CSS3 – расширенный код еще не сочетается с версткой емейл. Но если вы хотите работать со скриптами в коде, воспользуйтесь AMP-контентом в редакторе eSputnik.

Не забывайте и про вес письма. Размер вашего почтового шаблона не должен превышать 102 КБ. Это та точка, в которой Gmail может обрезать емейлы.

Заключение

Верстка электронного письма связана с определенными правилами и постоянным тестированием. Мы обрисовали в общих чертах самые распространенные запреты и требования к коду email в формате HTML.

В eSputnik есть все необходимое, чтобы создавать корректные емейл-рассылки:

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

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

Как адаптировать шаблон email для рассылок через eSputnik

Допустим, до этого момента вы делали рассылки в другой ESP, или ваш верстальщик сделал кастомный шаблон. Если просто скопировать и вставить в редактор свой HTML, многие функции будут заблокированы. Нельзя будет редактировать любой элемент (контейнер/структуру/полосу) и базовые блоки в drag’n’drop-режиме.

Чтобы по-полной использовать возможности редактора eSputnik, шаблон нужно адаптировать. Для этого нужно:

1. HTML-код письма.

2. Редактор eSputnik.

3. Фишки по адаптации, которые вы узнаете из статьи.

Приступим к адаптации своего HTML письма.

Простой вариант адаптации шаблона в eSputnik

Этот способ подойдет, если вы не хотите добавлять блоки или менять их расположение, а просто надо редактировать содержимое: текст, ссылки, картинки.

Для примера мы взяли код шаблона Wemo на популярном ресурсе reallygoodemails.com. Загрузим выбранный нами образец HTML и поэтапно рассмотрим, как адаптировать его.

Если вы уже столкнулись с задачей подогнать свой код письма для редактора eSputnik, то наверняка знаете, как загрузить свой HTML. Нужно зайти в Сообщения — Сообщения — Создать Email. 

И в разделе шаблонов “Базовые” выбрать вариант “Мой HTML”.

После этого вы увидите редактор с визуальной областью письма ① и активное окно редактора кода ②. В последнем можно открыть секцию CSS для задания стилей ③.

Для удобства верстки или редактирования письма рекомендуем распределять HTML и CSS письма по соответствующим секциям редактора кода. Часто в  HTML-коде писем CSS-стили содержатся внутри тега 

например:

Необходимо вырезать все, что обернуто в тег

внутри

и вставить в секцию CSS редактора кода.  

В нашем шаблоне сделано так же. Разделим HTML и CSS по секциям.

Секция HTML

Секция CSS

Редактор eSputnik отобразил наше письмо в визуальном поле, но не видно картинок.

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

Как вы видите, сразу после вставки HTML-кода шаблона в eSputnik можно редактировать ссылки, картинки и их названия (альтернативный текст). Сделать это можно как через панель редактирования, так и через редактор кода.

Попробуем загрузить картинки в письмо. 

Кликните на логотип в визуальной части письма и в меню слева нажмите на значок “Заменить”.

После этого откроется галерея картинок, которая будет пуста. 

Вам нужно загрузить в нее изображения. Для этого есть два пути:

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

2. Нажмите на иконку загрузки изображения по текущей ссылке:

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

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

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

Итак, сразу после вставки HTML-кода письма в eSputnik, есть возможность редактировать ссылки и картинки. А чтобы редактировать обычный текст, необходимо применить CSS-класс esd-text к тегу, в котором находится весь блок текста. Обычно это теги p, div, td, h2, h3, h4, span. К последнему применять спец. класс можно только в том случае, если внутри span находится весь текст, а не его часть. Применим класс esd-text к обертке текста.

После того, как класс esd-text задан, кликните по тексту в визуальной области письма, и eSputnik позволит редактировать текст, а также стилизовать его через панель редактирования.

Это все, что нужно для простого способа адаптации шаблона.

Last post

Усложненный вариант адаптации

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

Для начала разберемся, как устроены письма в eSputnik.

Об иерархии вложенности писем eSputnik

Письма в редакторе eSputnik состоят из: 

• полос;

• структур;

• контейнеров;

• блоков.

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

Рассмотрим пример вложенности полосы, в которой находится структура с двумя контейнерами и блоками «Картинка» + «Текст»:

1. Полоса с классом esd-stripe.

2. Структура с классом esd-structure.

3. Контейнер с классом esd-container-frame.

4. Блок с классом esd-block.

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

Почти всегда есть куда вставить класс для полосы, структуры и/или контейнеров. Но из-за специфичной верстки блоков не всегда удается добавить для них класс так, чтоб они корректно адаптировались. Поэтому мы рекомендуем добавлять класс esd-block-html в обертку такого блока, тогда eSputnik сможет активировать кнопки управления (сохранение, перемещение, копирование, удаление) и дальше редактировать такой блок можно будет через HTML.

Список доступных классов Блоков

esd-block-image — класс для определения блока «Картинка»;
esd-block-text — класс для определения блока «Текст»;
esd-block-button — класс для определения блока «Кнопка»;
esd-block-spacer — класс для определения блока «Разделитель»;
esd-block-social — класс для определения блока «Соцсеть»;
esd-block-html — класс для определения блока «HTML»;
esd-block-menu — класс для определения блока «Меню».  

Адаптируем полосу

Найдем ячейку таблицы, которой можно назначить класс для полосы. Такая таблица нашлась — это контент письма целиком. Устанавливаем ему класс esd-stripe.

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

Адаптируем структуру

Назначим соответствующий класс esd-structure для структуры.

Как и у полосы, у структуры появилась рамка и элементы управления.

Адаптируем базовые блоки

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

Логотипу — esd-block-image.

Блоку с текстом — esd-block-text.

Аналогичным образом мы назначили класс esd-block-image.
Вот как выглядит общий результат по адаптации блоков: 

Попробуем адаптировать карточку товара с кнопкой

Здесь нам не хватает Контейнеров, чтобы была возможность перетаскивать блоки из панели drag’n’drop.

Находим ячейку таблицы, в которой расположено фото товара с альт-текстом «Wemo Dimmer», и указываем ей класс esd-container-frame — это будет наш первый Контейнер.

В этом контейнере превращаем блок в картинку при помощи добавления класса esd-block-image.

Поработаем со вторым контейнером. Находим ячейку таблицы, в которой расположен текст «Wemo Mini», и указываем ей класс esd-container-frame.

Все, что находится в ① и ② областях ячейки esd-container-frame — наши блоки. 

Весь контент этого контейнера — текст и кнопка. Указываем ячейке первой обасти класс esd-block-text, а ячейке второй области — блок esd-block-button.

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

Итоги

Мы показали:

1. Как адаптировать кастомный HTML для редактирования текста, картинок и ссылок в редакторе eSputnik. 

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

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

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

HTML в email. Как создать и отправить HTML письмо?

Польза HTML-писем и рассылок

Email-маркетинг — это один из самых эффективных видов интернет-продвижения. Благодаря нему повышается лояльность, возрастает объем как новых, так и повторных продаж, а также поддерживается постоянная связь с аудиторией. Очень часто, просматривая почту в своём личном ящике, мы встречаем красивые интерактивные письма, прямо из которых можно совершить какой-либо заказ или иной целевой переход.

С таким письмом действительно хочется ознакомиться, оно яркое, стильное и визуально приятное, в отличие от сухого текста на белом фоне. Давайте разбрёмся, как создать HTML-письмо самому.

Реализация интерактивного письма

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

С чего начать и как создать?

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

Создание HTML-письма по шаблону

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

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

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

Отправка интерактивного письма, пожалуй, — самый неординарный этап процесса. Давайте разберёмся как вставить html в письмо. Итак, будем действовать на примере mail.ru. Заходим в свой ящик, нажимаем «написать письмо», пишем в форму какое-то слово, затем выделяем его и нажимаем «просмотреть код элемента».

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

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

Осталось только указать адресата и нажать на «Отправить»

Хочется большего?

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

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

Как вставить HTML-код в сообщение электронной почты и не дать Outlook испортить его

Более 1,1 миллиарда человек используют Office. Это каждый седьмой человек на планете. Microsoft Outlook — это универсальный почтовый клиент для бизнеса, и огромное количество пользователей используют его в повседневной работе. Это очень мощный почтовый клиент, но иногда эта мощь оказывается недостатком.

Одним из таких случаев является использование Microsoft Outlook для отправки информационных бюллетеней или форм в формате HTML. «Но Outlook позволяет мне создавать сообщения в формате HTML с использованием множества элементов управления и стилей», — можете сказать вы и будете на 100% правы.Но как только вы попытаетесь создать сообщение HTML с помощью специального программного обеспечения и использовать полученный HTML в качестве источника для своего сообщения, вы будете удивлены: Outlook не позволяет вам использовать собственный источник HTML для создания сообщения! «Хорошо, но это не большая проблема», — говорите вы, и снова можете быть правы, потому что вы можете открыть получившееся HTML-сообщение с помощью Internet Explorer и скопировать и вставить данные через буфер обмена в сообщение Outlook. Да, это можно сделать, но вас ждет сюрприз.

Начиная с Office 2007, Outlook поддерживает только Microsoft Word в качестве движка для создания и отображения сообщений в формате HTML. В предыдущих версиях Microsoft Outlook в качестве механизма HTML использовался Internet Explorer. Эти технические изменения вызывают значительные различия как во внешнем виде получаемого сообщения, так и в самом HTML-коде, который претерпевает изменения и исправления. На первый взгляд это не кажется большой проблемой… но только на первый взгляд.

Почему так важно сохранять исходный HTML-код электронных писем?

Ответ на этот вопрос очень прост — убедиться, что ваше электронное письмо в формате HTML будет выглядеть одинаково в Microsoft Outlook, в Google Mail, Apple Mail и в почтовых клиентах на столах и мобильных устройствах. Создавая электронное письмо в формате HTML с помощью редактора HTML, отличного от Microsoft Word или Outlook, у вас есть возможность проверить, как код будет отображаться в различных браузерах и почтовых клиентах. Например, вы можете воспользоваться бесплатным онлайн-сервисом от Litmus Software, который позволит вам проверить внешний вид вашего HTML-кода в более чем тринадцати почтовых клиентах:

https: // лакмусовая бумажка.com / email-testing

Используя HTML-редактор вместе с подобным инструментом тестирования и оптимизации, вы можете создавать довольно сложные HTML-сообщения и быть уверены, что они будут правильно отображаться для всех получателей. Но это остается так только до тех пор, пока исходный код HTML остается в исходной форме. Как только вы поместите свой код в Microsoft Outlook через буфер обмена, весь код будет преобразован и исправлен.

Каков текст сообщения в формате HTML?

Создадим простой HTML-файл:

Привет, мир !

Размер файла 36 байт.Мы открываем этот файл в Microsoft Word как HTML и сохраняем его как HTML под другим именем. Видим, что размер получившегося файла 35,8Кб! Просто так размер файла увеличился в 1000 раз! Но выглядит так же, как и раньше. Чтобы прояснить, в чем разница, давайте посмотрим на источник этого нового файла HTML:

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

Почему Word изменяет исходный HTML-код в теле письма?

Эти изменения происходят из-за того, что Microsoft Word не является редактором HTML; он позволяет импортировать только файлы этого формата. Это означает, что исходный текст был импортирован в Microsoft Word, а затем экспортирован обратно как HTML, созданный во время сохранения документа, а минимальный размер файла для этого HTML составляет 35 КБ.Но это когда при сохранении выбирается формат HTML. На самом деле в Microsoft Word есть способ сохранить в другом формате, называемом HTML-фильтром, который отфильтрует большую часть добавленного мусора. В результате получается файл размером 5 КБ, что все равно в 10 раз больше, чем исходный исходный файл.

Обратите внимание, что хотя мы обсуждаем Microsoft Word, все это также касается Microsoft Outlook, поскольку в обоих продуктах используется один и тот же механизм HTML. Формат с фильтром HTML — это то, что используется при создании писем в HTML для Outlook.Это означает, что Microsoft Outlook simple не позволяет нам создавать сообщение в HTML размером менее 5 КБ (и это пустое сообщение).

Это преобразование сообщения редактором Outlook — еще один недостаток продукта. Представьте себе ситуацию, когда шаблон еженедельного информационного бюллетеня создается с помощью HTML-редактора, чтобы избежать разрушения HTML-форматирования документа при его импорте и экспорте с помощью Word. Когда этот документ помещается в тело сообщения в редакторе Outlook (с использованием опции copy-n-paste), наш HTML-код будет преобразован и станет намного более сложным, что может разрушить исходное форматирование и отображать документ неправильно, когда его получают другие почтовые клиенты и браузеры.

Microsoft Outlook не предоставляет никаких возможностей для отправки сообщений без преобразования тела HTML. На рынке программного обеспечения есть несколько плагинов, которые позволяют редактировать тело сообщения в HTML, избегая таким образом трансформации. Но это, к сожалению, не решает проблему, потому что Microsoft Outlook по-прежнему выполняет преобразование, как только вы нажимаете «Отправить». Это означает, что нет никакой разницы между созданием красивого HTML-письма в специальном HTML-редакторе и его вставкой в ​​сообщение через буфер обмена, а затем отправкой электронного письма и использованием специальной программы, позволяющей вставить HTML-код в его. исходный формат при создании электронного письма.В обоих случаях получатель получает более крупное и отформатированное сообщение.

Как сохранить исходный HTML-код?

Несмотря на ограничения Microsoft Outlook, по-прежнему существует возможность отправить электронное письмо с исходным форматированием без выполнения преобразования HTML. Это можно сделать с помощью Send Personally , надстройки Microsoft Outlook, предназначенной для отправки списков рассылки с персонализированными приветствиями, что очень удобно в информационных бюллетенях, объявлениях и рекламных акциях.Но сейчас нас больше всего интересует эта программа из-за ее способности работать с HTML-источником тела сообщения.

Эта программа добавляет Insert HTML на ленту в разделе редактора сообщений; эта опция появляется, когда мы создаем новое письмо или отвечаем на существующее письмо. Когда мы нажимаем кнопку Insert HTML , открывается окно, показывающее HTML-источник текущего сообщения. В этом окне мы можем создать HTML-код для сообщения и отредактировать его.Даже если мы только что создали новое электронное письмо и еще ничего не написали в теле сообщения, мы можем нажать кнопку Insert HTML , и мы увидим, что Outlook уже вставил все «необходимые» HTML-коды в:

Используя это окно, мы можем просто выделить весь текст, который был добавлен редактором Outlook, и заменить его нашим собственным, используя либо буфер обмена, либо опцию «Загрузить из файла…» .

Затем вы можете использовать опцию Preview , чтобы просмотреть полученный HTML, или нажмите OK , чтобы сохранить новый текст в теле сообщения.Обратите внимание, что мы не можем редактировать текст сообщения с помощью редактора Outlook, потому что Outlook немедленно преобразует исходный HTML-код. Если нам нужно выполнить дальнейшие изменения в сообщении, нам нужно будет снова нажать кнопку Insert HTML и внести изменения в окне.

На этом этапе мы создали электронное письмо и не разрешили Outlook преобразовывать исходный HTML, но это только первый шаг. Затем нам нужно предотвратить изменение сообщения при нажатии кнопки Отправить .Эта задача выполняется с помощью кнопки Отправить лично . Проблема в том, что эта программа отправляет сообщения через систему MAPI и не вызывает обработчик, который запускается при нажатии кнопки Отправить . Если кнопка «Отправить » ни разу не нажата, преобразование не происходит. Поэтому все, что нужно сделать, это нажать кнопку Отправить лично вместо Отправить .

В настоящее время это единственный способ отправить электронное письмо в формате HTML из Microsoft Outlooks и сохранить исходное форматирование HTML.Чтобы убедиться в этом, перейдите в папку «Отправленные» в Microsoft Outlook и дважды щелкните сообщение, чтобы просмотреть его, а затем щелкните правой кнопкой мыши тело сообщения и выберите Просмотр источника вариант . Сделав это, мы видим:

Здесь следует помнить 2 ключевых момента:

1. Электронное письмо можно редактировать только в окне редактирования HTML. Это актуально для любой модификации. Outlook заменит «наш» HTML на собственный HTML, даже если мы просто изменим учетную запись пользователя, с которой отправляется электронное письмо.
2. Сообщение должно быть отправлено с помощью кнопки Отправить лично , а не с помощью кнопки Отправить .

Видеоурок о том, как отправлять электронные письма в формате HTML без изменений в Outlook

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

Пошаговое руководство по созданию собственного электронного письма в формате HTML

96

0 “>

Образец тестового письма | Просмотреть в Интернете jpg »width =« 700 »border =« 0 »height =« 345 »> Это образец электронного письма, который должен быть помещен в один абзац & nbsp; Это абзац 2 с размером шрифта 18 пикселей и цветом шрифта # fbeb59 с межстрочным интервалом 15 пикселей & nbsp; Это абзац 3 с размером шрифта 18 пикселей и цветом шрифта # fbeb59 с межстрочным интервалом 25 пикселей и прописными буквами png »alt =« fb »style =« display: block; семейство шрифтов: Arial, sans-serif; размер шрифта: 14 пикселей; высота строки: 14 пикселей; цвет: #ffffff; max-width: 26px; ” width = «26» border = «0» height = «26»> & nbsp; & nbsp; ЗАЯВЛЕНИЕ О КОНФИДЕНЦИАЛЬНОСТИ | УСЛОВИЯ ОБСЛУЖИВАНИЯ | ВОЗВРАТ © 2017 Название компании. Все права защищены. Если вы не хотите больше получать от нас электронные письма, отказаться от подписки

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

Как просмотреть HTML-код электронного письма?

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

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

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

Что такое HTML-код в электронном письме?

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

Аналогичным образом, если вы разрабатываете свои шаблоны в Campaign Monitor, вы также можете проверить базовый HTML. Вы даже можете скачать, изменить и снова загрузить его.

И если у вас нет желания изучать программирование, это тоже хорошо. Редактор с перетаскиванием в Campaign Monitor позволяет легко создавать красивые электронные письма без необходимости прикасаться или редактировать код.

Как просмотреть HTML в Outlook?

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

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

Как просмотреть HTML-код в Gmail?

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

Использование Outlook, подключенного к вашей учетной записи Gmail, позволит вам напрямую просматривать только HTML-код электронного письма.

Как просмотреть HTML-код в мониторе кампании?

В Campaign Monitor вы можете увидеть HTML-код из окна предварительного просмотра. Создав шаблон, вы можете открыть окно предварительного просмотра на странице «Снимок кампании» и выбрать «Просмотреть источник страницы».

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

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

Как измерить успех HTML-кода электронной почты

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

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

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

Это действительно важно?

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

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

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

Что теперь?

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

Электронная почта HTML-код

Создайте HTML-код электронной почты , используя гиперссылку mailto — HTML-код ссылки электронной почты, который открывает чью-либо почтовую программу (например, Microsoft Outlook). Я покажу вам, как написать для этого код, а внизу страницы есть инструмент для создания ссылки электронной почты в формате HTML.

Это довольно изящный генератор, который позволяет вам создать HTML-код электронной почты для ссылки mailto с расширенными параметрами, такими как кодирование темы и основного текста в ссылке электронной почты, если хотите.

HTML Ссылка на электронную почту

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

Напишите мне по адресу вверх.

Отправить HTML-код с темой

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

Напишите мне по адресу

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

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

Новейшие инструменты по категориям

Инструменты для фиксации текста

Инструменты кодирования HTML

Инструменты для слова и языка

Инструменты для случайной жизни

Как работает электронная почта в формате HTML | Справочник по дизайну электронной почты

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

Составной / альтернативный формат MIME

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

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

Доставка электронной почты в формате HTML

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

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

Рекомендации по доставке электронной почты

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

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

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

Форматирование электронной почты — справка mail.com

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

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

Текстовое электронное письмо имеет смысл в следующих ситуациях:

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

Ссылки в электронном письме в формате HTML

Если вы хотите отправить ссылку по электронной почте, введите веб-сайт (например, https: // www.mail.com ). Когда ты отправьте электронное письмо, написанный сайт автоматически превращается в ссылку. Однако вы не может щелкнуть ссылку во время написания электронного письма.

Как отправлять электронные письма в формате HTML с помощью почтовых клиентов

Большинство современных почтовых клиентов отправляют электронную почту в формате HTML по умолчанию, когда сообщение создается в самом клиенте. Например, Gmail и Yahoo! В обоих Mail есть встроенные редакторы WYSIWYG, которые вы можете использовать для написания HTML-сообщений.Однако, если вы хотите написать свой HTML-код во внешнем редакторе, а затем использовать его в своем почтовом клиенте, это может быть немного сложнее.

Шаги по написанию HTML

TimeStopper / Getty Images

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

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