Содержание

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

17 декабря 2018

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

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

Видео

Используем программу-посредник, или вариант № 1

Вставить код html в создаваемое Outlook 2016 сообщение можно через текстовый редактор того же семейства — MS Word 2016. Для этого нужно открыть в нём файл заготовки нашего послания через контекстное меню командой «Открыть с помощью»

Рис. 1

Если, Word-а вдруг в предложенном списке будет не видно, добраться до него придётся через команду «Выбрать другое приложение» того же меню.

После того, как наш html-файл откроется, выделим всё его содержимое. Сочетание клавиш «ctrl+А» позволяет выполнить это в одно движение. Выделенное — копируем в буфер обмена.

Рис. 2

Теперь следует вернуться в Outlook 2016. В группе команд «Главная» кликаем по кнопке «Создать сообщение»

Рис. 3

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

Рис. 4

Результат — готовое к отправке html-сообщение в виде точной копии нашего файла.

Рис. 5

Используем возможности Outlook-2016 для вставки готового html-кода, вариант№ 2

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

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

Рис. 6

После этой манипуляции в заголовке окна появляется пиктограмма в виде скрепки, «Вложить файл». Её нажатие инициирует диалог для выбора нашей html-заготовки. Когда целевой файл с расширением .html отобразится, выделяем его одинарным кликом мыши и раскрываем список (под треугольником) рядом с командой «Вставить», далее выбираем действие «Вставить как текст».

Рис. 7

И видим отображение своего письма в окне создания сообщения. Для готовности остаётся, как и всегда, заполнить поля адресатов и темы отправления.

Рис. 8

Использование инструмента «шаблон» для сохранения писем в html-формате

Если возникает задача сохранения созданного html-письма для каких-либо целей, то в Outlook 2016 для этого есть подходящее средство — внутренние шаблоны. Файлы шаблонов для Outlook имеют свой собственный формат, и этот тип файлов распознаётся по расширению .oft

Для создания шаблона следует, находясь в окне создания сообщений выполнить цепочку команд: «Файл» — «Сохранить как». В открывшемся окне «Сохранение элемента» необходимо выбрать в поле «Тип файла» значение «Шаблон Outlook (.oft)»

Рис. 9

Нажатием «Сохранить» подтверждаем выполняемое действие. Вновь созданный шаблон сохраняется в папке, месторасположение которой по умолчанию задаётся путём «Диск:\Users\Пользователь\AppData\Roaming\Microsoft\Шаблоны». Если есть потребность, можно задать своё, отличное от стандартного, расположение.

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

Рис. 10

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

Рис. 11

Теперь необходимое html-послание находится под рукой, готовое и к немедленной отправке, и, вдруг понадобись, к редактированию.

Рис. 12

Редактирование html-сообщения в Outlook 2016

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

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

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

Такие манипуляции, как вставка новых блоков с изображениями, непредсказуемо может отразиться на разметке html-письма, и лучше такую правку тут не практиковать. Разве что, заранее позаботившись о создании картинки точно такое же физического размера, как и подлежащая замене, можно безболезненно заменить одно изображение другим. Манипуляции таковы: в окне создания сообщения правым кликом по изображению вызываем контекстное меню, и в нём выбираем «Изменить рисунок…»

Рис. 13

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

Что касается гиперссылок, внедрённых в наше html-письмо (это будет третий тип объектов, доступных для манипуляций редактирования), действия с ними будут различаться в зависимости от того, к тексту или к картинке привязана редактируемая ссылка. Общим будет инициирующее правку действие: правый клик по объекту с гиперссылкой для вызова контекстного меню. А далее, в зависимости от намерений и типа объекта, можно выбрать соответствующий пункт для добавления, удаления или изменения ссылки.

Рис. 14

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

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

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

разбираемся в особенностях создания интерактивных писем

В статье рассказывается:

  1. Зачем вставлять HTML в письмо
  2. Важные правила работы с HTML в письме
  3. Этапы создания HTML-письма
  4. Как вставить HTML в Outlook
  5. Способы отправки HTML-письма

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

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

Зачем вставлять HTML в письмо

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

Зачем вставлять HTML в письмо

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

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

Важные правила работы с HTML в письме

Как вставить HTML в письмо таким образом, чтобы ваше сообщение корректно работало? Тут нужно учитывать несколько важных правил:

  • Изображения, которые вы используете, обязательно должны быть в общем доступе в интернете. То есть, на веб-странице им быть не обязательно, но в сети – нужна именно общедоступность.
  • В атрибуте должен быть прописан URL-адрес целиком. И прежде чем отправлять письмо, проверьте, корректно ли открывается картинка.
  • Для ссылок – то же правило. Указывайте полный URL-адрес, не пишите в ссылках относительные пути.
  • Что касается CSS, то они либо с элементом встраиваются в HTML, либо нужно давать на них ссылку (опять же, URL-адрес писать полностью).
  • JavaScript использовать не рекомендуется. Многие пользователи из предосторожности их отключают. Но если без JavaScript не обойтись, то встраивать обязательно нужно с элементом.
  • Какие бы ресурсы вы ни отображали в своем HTML (картинки или что-то еще), всегда указывайте полный интернет-адрес. Получатель должен точно видеть, где в Интернете есть в свободном доступе присланные ему материалы.

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

Важные правила работы с HTML в письме

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

Этапы создания HTML-письма

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

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

  • HTML Email Templates.
  • Really Simple Responsive HTML Email Template.
  • Litmus Templates.
  • Envato Elements .

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

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

pdf 3,7mb

doc 1,7mb

Уже скачали 15171

Для начала следует уяснить, что любое HTML-письмо обычно включает в себя две составляющие, а именно – шапку (head) и тело (body).

Шапка письма

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

Тип документа обозначен атрибутом <!DOCTYPE>. По нему движок браузера «понимает», как именно нужно считывать HTML и CSS, чтобы страница выдавалась в корректной форме. Есть ряд почтовых сервисов (вроде Gmail, Outlook, Yahoo! Mail), которые вместо данного кода вставляют в письма некий свой, однако специалисты советуют указывать в письмах именно <!DOCTYPE>.

По <meta http-equiv=”Content-Type” /> становится понятно, как именно программа должна обрабатывать и расшифровывать содержание тела письма.

Элемент «text/html» говорит о том, что текст нужно рассматривать как HTML.

Заголовок обозначен символикой <title></title>. Это то, что видит адресат во вкладке поисковика, открыв полученное письмо.

Шапка письма

Для составления адаптивного HTML-письма используют <meta name = ”viewport” />. Здесь содержится информация о масштабировании для устройства, на котором получатель откроет письмо.

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

Это, собственно, само содержание e-mail-послания, то, что вы хотите донести до адресата. Данная часть заключена в теги <body> и </body>, и первое, что нужно с ней сделать — это отформатировать.

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

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

В качестве главной таблицы выступает именно контейнер шаблона. Ширина тут задается 100 %-ая, чтобы занять всё пространство письма. Отступы (margin, padding, cell padding, cell spacing) специалисты советуют делать равными нулю. Тогда внутри таблицы не получится лишних «белых пятен».

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

Дальше работайте по шаблону, добавляйте все, что в нем предусмотрено: изображения, тексты, кнопки (СТА), меняйте на свое усмотрение цветовое оформление (есть и такая возможность). Размещайте все это по выбранным ячейкам. Оформление текста выберите строчное стилизированнное.

Интенсив «Путь в IT» поможет:

  • За 3 часа разбираться в IT лучше, чем 90% новичков.
  • Понять, что действительно ждет IT-индустрию в ближайшие 10 лет.
  • Узнать как по шагам c нуля выйти на доход в 200 000 ₽ в IT.

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

«Колесо компетенций»

Тест, в котором вы оцениваете свои качества и узнаете, какая профессия в IT подходит именно вам

«Критические ошибки, которые могут разрушить карьеру»

Собрали 7 типичных ошибок, четвертую должен знать каждый!

Тест «Есть ли у вас синдром самозванца?»

Мини-тест из 11 вопросов поможет вам увидеть своего внутреннего критика

Хотите сделать первый шаг и погрузиться в мир информационных технологий? Регистрируйтесь и смотрите интенсив:

Только до 17 октября

Осталось 17 мест

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

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

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

Как вставить HTML в Outlook

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

  1. Войдите в Outlook и кликните там «Новый email-адрес». Либо можно открыть новое окно через Ctrl + N.
  2. Опция «Прикрепить файл» появляется после щелчка правой кнопкой мыши по верхней части этого окна. Либо через Вставить ® Прикрепить файл.
  3. Чтобы прикрепить собственный шаблон, кликните по появившейся кнопке в окне сообщения.
  4. Теперь нужно определить местоположение файла HTML, нажать на кнопку со стрелкой (рядом с «Вставить»).
  5. В завершение кликнуть «Вставить текст».

Можно вывести функцию вложения на панель быстрого доступа. Для этого зайдите в раздел «Файл», там слева выпадет список, в нем выберите «Панель быстрого доступа» и далее «Прикрепить файл». Так вы сможете быстрее вставлять HTMLв письма в Outlook.

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

  • Обязательно каждую картинку дополняйте замещающим текстом.

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

  • Проверьте правильность всех используемых шрифтов.

Имейте в виду, что MS Outlook нормально «видит» лишь определенные, заданные шрифты. Остальные автоматически заменяет на Таймс Нью Роман, и результат может быть, мягко говоря, не очень хорошим. Поэтому лучше сразу пользуйтесь стандартами вроде Ариал, Джорджия. Если же у вас есть собственный, брендовый шрифт, то лучшее, что тут можно сделать, это задать для использования подходящий стандартный шрифт, но только не Times New Roman.

  • Пользуйтесь таблицами.

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

  • По возможности выдерживайте размер 550-600 пикселей.

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

Способы отправки HTML-письма

После того как вы вставили HTML-код в письмо, необходимо определиться с почтовым сервисом для рассылок. Удобнее всего пользоваться привычной для вас почтой.

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

Google-почта

Вот как вручную вставляется HTML-письмо в Gmail:

  1. Кликните «Написать». Появится форма для нового письма. Наведите курсор на поле для текста и в меню под правой кнопкой мыши нажмите «Проверить».
  2. Система выделит синим цветом код поля для текста письма. По нему нужно щелкнуть правой кнопкой мыши, найти в появившемся списке «Редактировать как HTML», тоже кликнуть по этому пункту правой кнопкой мыши и снова выбрать «Редактировать как HTML».
  3. Далее элемент <br> нужно убрать и на его место поставить HTML-код. Теперь можно закрыть окно консоли. В поле для текста письма в Googl-почте появится ваше письмо.
  4. Останется ввести адрес получателя и заполнить строку «Тема».
  5. Для проверки отправьте это письмо. Если, к примеру, в HTML-шаблоне вы не указали ссылку на картинку, то когда она откроется в Gmail, там в углу (на самой картинке) отобразится надпись «Скачать» (в виде кнопки).

Почта Mail.ru

HTML-письмо вставляется вручную на почте Мail.ru следующим образом:

  1. Откройте форму для нового письма. Нажмите правую кнопку мыши в любой точке поля для текста, далее — пункт «Проверить».
  2. Синим цветом будет показан код поля для текста письма. Нужно щелкнуть по нему правой кнопкой мыши и нажать «Редактировать как HTML».
  3. Далее элемент <br> нужно убрать и на его место поставить HTML-код. Теперь можно закрыть окно консоли. В поле для текста письма в почте Mail.ru появится ваше письмо.
  4. Укажите адрес, на который хотите отправить письмо и заполните строку «Тема».
  5. Остается выполнить отправку текстового письма, чтобы увидеть возможные ошибки.

Яндекс-почта

Вот как вручную вставляется HTML-письмо в Yandex:

  1. В первую очередь необходимо включить панель оформления, потому что по умолчанию она отключена, а это не позволит вставить в письмо HTML-код.
  2. Откройте форму для нового письма. Наведите курсор на поле для текста, щелкните правой кнопкой мыши, далее – «Проверить».
  3. Синим высветится строка с кодом поля для текста письма. По нему нужно нажать правой кнопкой мыши и далее – «Редактировать как HTML».
  4. Далее элемент <br> нужно убрать и на его место поставить HTML-код. Теперь можно закрыть окно консоли. В поле для текста письма в Яндекс-почте появится ваше письмо.
  5. Подправьте HTML-шаблон, если в нем нарушилось форматирование, обнаружились пустые строки, например, или ненужные отступы.
  6. Введите электронный адрес получателя, заполните строку «Тема».
  7. Остается отправить письмо, чтобы выявить возможные ошибки.

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

Продвижение блога — Генератор продаж

Рейтинг: 5

( голосов 2 )

Поделиться статьей

Как создать email в HTML-редакторе

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

Как создать письмо в HTML-редакторе, рассказываем на примере Cheapsender.

Шаг 1: Проходим регистрацию в Cheapsender

Если у вас еще нет аккаунта в нашем сервисе, то давайте его зарегистрируем:

  1. Открываем официальную страницу сервиса и на первом экране нажимаем «Попробовать бесплатно». Обратите внимание, что после регистрации учетной записи будет предоставлено 100 бесплатных писем для рассылки. Таким образом, вы сможете протестировать как сам сервис, так и формат своего письма.
  2. На отобразившейся странице вводим свои данные и нажимаем «Зарегистрироваться».
  3. После этого нужно будет активировать аккаунт – на почту должно прийти письмо, в котором достаточно кликнуть по кнопке «Подтвердить».

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Шаг 2: Копируем содержимое HTML-файла

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

Этот файл содержит код, который нужно вставить в редактор шаблонов на Cheapsender. Чтобы его посмотреть и скопировать, необходимо кликнуть правой кнопкой мыши по файлу и выбрать «Открыть с помощью» → «Блокнот». Если в отобразившемся списке нет блокнота, то нажмите «Выбрать другое приложение». Затем найдите в списке блокнот либо другой текстовый редактор.

В результате перед нами отображается HTML-код письма. Все, что от нас требуется – выделить его полностью и скопировать. Для быстрого выделения можете воспользоваться комбинацией клавиш «CTRL+A».

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

Шаг 3: Создаем шаблон письма в конструкторе

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

  1. Первым шагом переходим в раздел «Шаблоны».
  2. В этом разделе будут содержаться все шаблоны писем, которые вы создадите, их может быть несколько. Это удобно, так как рассылка не всегда предполагает один вариант письма – разная целевая аудитория, другая сфера и прочие аспекты. Первоначально шаблонов нет, их нужно создать – давайте к этому и приступим: нажимаем на «Создать шаблон».
  3. Здесь предлагаются два варианта создания шаблона, нас интересует второй – «Создание шаблона в HTML-редакторе».
  4. В отобразившемся окне от нас потребуется лишь вставить код файла, который мы успешно скопировали на предыдущем шаге – просто используем комбинацию клавиш «CTRL+V». Получаем весь код в конструкторе:
  5. Чтобы убедиться в том, что код добавился корректно, мы можем воспользоваться эмулятором письма – для этого достаточно кликнуть по кнопкам в верхней центральной части. Вот, например, как выглядит добавленное письмо в мобильной версии:
  6. После проверки письма на разных устройствах нажимаем на крестик для выхода из эмулятора.
  7. Осталось дать название шаблону и нажать на кнопку «Сохранить и выйти».

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

Вот пример кода:


<img src="https://jotgkp.stripocdn.email/content/guids/CABINET_1ce849b9d6fc2f13978e163ad3c663df/images/22451592470360730.gif">

В поле src указывается ссылка на то место (файлообменник, сайт), в котором находится изображение.

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

Шаг 4: Отправляем шаблон подписчикам

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

  1. Нажимаем в личном кабинете «Создать рассылку».
  2. Выбираем созданный нами шаблон.
  3. Указываем тему письма и нажимаем «Продолжить».
  4. Теперь нужно добавить клиентскую базу – сделать вы это можете вручную либо путем загрузки файла в формате CSV, TXT или XLSX.

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

Выводы

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

Полное руководство по электронной почте в формате HTML — Smashing Magazine

  • 15 минут чтения
  • Генераторы, Инструменты, Шаблоны, сводки новостей, Лучшие практики
  • Поделиться в Twitter, LinkedIn
Об авторе

Виталий Фридман любит красивый контент и не любит легко сдаваться. Когда он не пишет, он, скорее всего, занимается интерфейсом и UX… Больше о Виталий ↬

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

Содержание

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

  • Доступность
  • Bugs
  • Dark Mode
  • Редакторы и IDES
  • Поддержка функции
  • Frameworks
  • Начало работы
  • Руководство и ресурсы
  • .0004
  • Marketing
  • Мета-языки
  • Предварительные просмосы
  • Производительность
  • Удалить неиспользованные CSS
  • Целевые почтовые клиенты
  • шаблоны
  • Blocker Blocker
  • сцены причудливого мира электронной почты в формате HTML, Кейти Г. О’Коннор опубликовала замечательное руководство о том, как начать кодирование электронной почты. В статье представлены курсы, учебные пособия, статьи и просто общие рекомендации, которые следует учитывать при создании и дизайне электронных писем — все в исчерпывающем одностраничном руководстве. На SmashingMag Ли Манро также опубликовал подробное руководство по созданию и отправке электронных писем в формате HTML.

    Если вы новичок в кодировании электронной почты в формате HTML, руководство Кейти Г. О’Коннор — хорошее место для начала.

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

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

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

    Написание чистых, отзывчивых электронных писем, обеспечивающих надежную работу во всех популярных почтовых клиентах, может отнимать много времени. HEML здесь, чтобы изменить это. Открытый исходный код 9Язык разметки 0065 дает вам всю мощь HTML без необходимости иметь дело со всеми причудами электронной почты. Нет никаких специальных правил или парадигм стилей, которые нужно освоить, поэтому, если вы знаете HTML и CSS, вы готовы начать.

    MJML делает кодирование адаптивных писем немного более удобным.

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

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

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

    Заставить электронную почту в формате HTML работать в почтовых клиентах — непростая задача. К счастью, существует множество надежных инструментов, шаблонов и фреймворков, облегчающих выполнение вашей работы. Например, Maizzle — это фреймворк, помогающий быстро создавать электронные письма в формате HTML с помощью Tailwind CSS и расширенной постобработки для конкретных сообщений электронной почты. Он также предоставляет несколько готовых проектов (Maizzle Starters), с которыми вы можете начать прямо сейчас.

    Объяснение того, как пользователи Maizzle «приносят свой собственный HTML». (Источник изображения: Maizzle

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

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

    Foundation for Emails можно использовать с простым CSS или Sass, как вам больше нравится.

    Cerberus и HTML Email предоставляют небольшие наборы надежных, надежных шаблонов для адаптивных электронных писем в формате HTML, которые хорошо протестированы в более чем 50 почтовых клиентах, включая Gmail, Outlook, Yahoo, AOL и многие другие. EmailFrame.work позволяет создавать адаптивные HTML-шаблоны электронной почты с предварительно созданными параметрами сетки и базовыми компонентами, поддерживаемыми более чем 60 почтовыми клиентами.

    Codedmails включает 60 шаблонов и тем электронной почты, написанных на MJML и проверенных на совместимость.

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

    Stripo, Chamaileon, Postcards, Topol.io, GoodEmailCode, Pixelbuddha и Bee Free содержат множество бесплатных HTML-шаблонов электронной почты, Litmus предоставляет адаптивные шаблоны электронной почты для информационных бюллетеней, обновлений продуктов и квитанций, а CampaignMonitor предлагает бесплатный конструктор HTML-шаблонов электронной почты с функция перетаскивания. Еще один редактор с перетаскиванием, который стоит рассмотреть, — это Unlayer. Он поможет вам создать готовые HTML-шаблоны электронной почты для мобильных устройств всего за несколько кликов — без необходимости кодирования.

    Удобный инструмент, который должен быть в наборе инструментов каждого, кто сталкивается с электронной почтой в формате HTML — время от времени или регулярно — это caniemail.com. Вдохновленный успешной концепцией caniuse.com, Can I email позволяет проверить поддержку 179 функций HTML и CSS в 31 почтовом клиенте.

    Могу ли я по электронной почте выделить веб-функции и их поддержку в почтовых клиентах HTML.

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

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

    Meet Email Bugs, растущий репозиторий ошибок электронной почты.

    Чтобы помочь вам понять, что происходит, когда вы сталкиваетесь с такими ошибками, Реми Пармантье поддерживает Email Bugs, репозиторий GitHub для странного поведения почтовых клиентов . Это не только облегчает жизнь дизайнерам электронной почты, предоставляя место для обсуждения ошибок, но также пытается сообщать о каждой ошибке заинтересованной компании и исправлять их навсегда. Но на всякий случай, если это невозможно, в статье «Как настроить таргетинг на почтовые клиенты» представлен обзор обходных путей для таргетинга на конкретные почтовые клиенты.

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

    Простое выполнение одной задачи: Mailto Link Generator заботится о mailto: ссылках.

    Mailto Selection Prompt

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

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

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

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

    В витринах электронной почты в формате HTML нет недостатка: Email Love выделяет тысячи из них.

    Litmus Blog, блог CampaignMonitor и электронная почта в формате HTML содержат множество статей и подкастов с рекомендациями, советами, ресурсами и даже подкастами по электронной почте в формате HTML. И если вам нужно немного вдохновения для последних электронных писем, отсортированных по отраслям, Really Good Emails и EmailLove тоже придут вам на помощь.

    • Вам не нужно рыться в собственном почтовом ящике, чтобы найти вдохновение для дизайна электронной почты в формате HTML. Email Love собрал фантастическую подборку вдохновляющих писем от ведущих компаний.
    • Really Good Emails позволяет легко находить вдохновение в электронной почте в формате HTML. У вас есть выбор: просматривать коллекцию в хронологическом порядке или сузить результаты в зависимости от типа письма (например, купон, бесплатная пробная версия), цели (например, вознаграждение клиентов, спасибо), названия компании или категории. и так далее.
    • Недостаточно? Существует также HTML-дизайн электронной почты и HTML-галерея электронной почты.
    Really Good Emails позволяет пользователям фильтровать более 7000 дизайнов.

    Что касается электронной почты, где мы находимся с точки зрения доступности ? Правильно ли мы объявляем электронные письма программам чтения с экрана? Как насчет темного режима? Репозиторий Accessible Email содержит ряд статей, инструментов, презентаций и ресурсов о специальных возможностях — не только для электронной почты, но и конкретно для нее. Доступный репозиторий электронной почты

    предоставляет сотни ресурсов и инструментов для тестирования и улучшения доступности ваших электронных писем.

    С помощью Accessible-Email.org вы можете анализировать отправленные кампании и проверять улучшения доступности. С темным режимом для симулятора электронной почты вы можете проверить, как выглядит ваша электронная почта в темном режиме.

    Если все, что вам нужно, это чистое пространство для преобразования вашего HTML и CSS, Alter.Email — надежный вариант. С помощью инструмента вы можете выбрать несколько «трансформеров» — например, встроенный CSS и очистить код , удалить неиспользуемый CSS, а также отформатировать HTML и даже предотвратить всплывающие слова. Кроме того, вы также можете использовать Postdrop, который также позволяет вам минимизировать и встроить CSS, а также отправить тестовое электронное письмо.

    Фантастический инструмент электронной почты, когда вам нужен такой уровень детализации: Alter.Email позволяет изменять HTML на лету. (Источник изображения: Alter.Email)

    Написание CSS не особенно увлекательная задача с электронной почтой HTML, разбросанной повсюду с !important и встроенными стилями. Чтобы удалить неиспользуемый CSS из шаблонов электронной почты, есть Email Comb. Инструмент позволяет вам добавлять классы и идентификаторы, которые вы хотите игнорировать, выбирать, хотите ли вы минимизировать их и удалять комментарии, и показывает, что именно он удалил.

    Очистка электронной почты в формате HTML: Email Comb удаляет то, что вам не нужно, но вы можете добавить классы, которые нужно игнорировать.

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

    На всякий случай, если вам это действительно нужно: нацеливание на почтовые клиенты с помощью хакерских селекторов CSS.

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

    Все, от шаблонов до маркетинговых ресурсов на TheBetter.email.

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

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

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

    Темный режим в Gmail и Outlook

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

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

    Руководство разработчика по темному режиму в электронной почте: подробное и всестороннее.

    Реми Парментье идет немного глубже, показывая, как исправить проблемы с темным режимом Gmail с помощью режимов наложения CSS. Gmail принудительно заменяет любой светлый цвет текста на темный. Если вам нужно это исправить, Реми придумал творческое использование mix-blend-mode (поддерживается в Gmail), чтобы при необходимости сохранить светлый цвет текста. И если вам нужно убедиться, что ваши электронные письма реагируют на темный режим Outlook.com , Remi также поможет вам.

    Исправление темного режима в электронных письмах в формате HTML: Реми Пармантье проявил творческий подход, чтобы исправить проблемы с темным режимом Gmail с помощью режимов наложения CSS.

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

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

    Кроме того, вы также можете взглянуть на Mail Studio, сложное настольное приложение (для Windows, macOS и Linux), которое сочетает в себе визуальное редактирование и редактирование кода в одной электронной среде IDE .

    Приложение поставляется с библиотекой компонентов, от заголовков до панелей навигации и аккордеонов, парой адаптивных шаблонов электронной почты, интеграцией с Google Fonts, встроенной поддержкой Sass, палитрой команд, инструментами для совместной работы, предварительным просмотром электронной почты и даже интеграция с поставщиками услуг электронной почты , такими как MailChimp, Campaign Monitor и Sendgrid. Интеграция Figma должна появиться в ближайшее время.

    Создание полностраничного предварительного просмотра электронной почты

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

    Быстро и просто: Emailpreview.io создает предварительный просмотр ваших электронных писем на всю страницу.

    Mail Tracker Blocker

    Большинство маркетинговых электронных писем содержат трекеры в электронной почте HTML, поэтому они могут отслеживать, как часто, когда и где клиенты открывают электронные письма. MailTrackerBlocker действует как блокировщик рекламы для браузеров, но работает с почтовыми клиентами. Инструмент помечает, кто отслеживает клиентов, и удаляет пиксели отслеживания, прежде чем они смогут отображаться, поэтому вы по-прежнему можете загружать весь удаленный контент и сохранять конфиденциальность своего поведения. В настоящее время доступно только для Apple Mail на macOS 10.11–11.x ( привет Джереми Киту! ).

    Вы можете использовать блокировщик рекламы, чтобы заблокировать стороннее отслеживание, а для Apple Mail также есть MailTrackerBlocker, чтобы блокировать пиксели отслеживания в электронных письмах.

    Переполненные почтовые ящики, спам с запросами обратных ссылок, люди, отправляющие вам электронные письма в пятницу днем, а затем в понедельник утром — есть много вещей, которые делают работу с электронной почтой неприятной. Однако, поскольку от электронной почты никуда не деться, есть только одно решение: давайте вместе исправим ситуацию. Имея это в виду, Крис Койер запустил сайт «Email is Good», посвященный производительность электронной почты .

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

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

    Подведение итогов

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

    Держись!

    Дополнительная литература

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

    Как отправить HTML-письмо в Gmail (3 простых варианта)

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

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

    Почему импорт HTML в Gmail «не работает»

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

    Итак, я покажу вам, как это обойти.

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

    Существует три способа вы можете загрузить окно Gmail Compose с помощью пользовательский HTML .

    1. Скопируйте/вставьте обработанный HTML-код в окно Gmail Compose.
    2. Вставьте свой HTML-код в окно Gmail Compose, используя Инструменты разработчика Chrome
    3. Используйте расширение Chrome , чтобы добавить HTML-редактор в поле создания Gmail

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

    Вариант 1. Скопируйте/вставьте отрендеренный HTML-код в окно Gmail Compose

    Само по себе окно Gmail Compose   не позволяет редактировать HTML, лежащий в основе сообщения. Это отличается от поставщика услуг электронной почты, такого как Mailchimp или Constant Contact, в котором вы можете редактировать необработанный HTML. Итак, описанная ниже техника — это способ обойти это ограничение Gmail.

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

    Давайте быстро рассмотрим это на примере.

    Создание и отправка электронной почты в формате HTML в Gmail

    Шаг 1. Напишите свой HTML.

    В этом примере я использую шаблон HTML, адаптированный для наших целей. HTML можно либо написать напрямую, либо, возможно, составить с помощью инструмента разработки HTML. Gmail немного придирчив к тому, что разрешено использовать в электронных письмах в формате HTML, поэтому вот несколько важных рекомендаций:
     – Вы не можете использовать внешние таблицы стилей , но можете использовать встроенный CSS (например, ), а также встроенный CSS в заголовке . Подробнее о том, что именно вы можете и должны использовать в Gmail, см. на этой странице. Примечание.  Gmail изменил поддержку CSS в 2016 году, поэтому в старых сообщениях в Интернете может быть указано, что они не поддерживают то, что на самом деле делают. Сообщение, на которое я ссылаюсь, обновлено с этим изменением.
    — Некоторые теги HTML могут не поддерживаться . Этот список (который может быть не совсем актуальным) показывает HTML-теги, которые поддерживаются, а некоторые нет.
    — Gmail не поддерживает веб-шрифты. Итак, либо используйте стандартные шрифты, которые они предоставляют, либо, если вам нужен другой шрифт для чего-то вроде логотипа, сделайте изображение этого текста. Затем в HTML-коде добавьте ссылку на это изображение, размещенное в Интернете, что я и сделал для логотипа «Книги Бинкмана» в своем образце электронного письма ниже.
    — Все изображения должны быть где-то размещены в Интернете — они не могут быть включены в электронное письмо. Вы можете размещать изображения на Imgur, Amazon Web Services, Google Docs (если вы можете получить прямую ссылку на изображение) или любом другом месте, предназначенном для размещения изображений.
     – рекомендуется использовать таблицы для организации отображения содержимого для электронных писем в формате HTML. Однако даже при использовании таблиц есть проблемы, на которые следует обратить внимание.
    Документы Google для составления могут быть проблематичными. Хотя существуют учебные пособия по использованию Документов Google для создания электронной почты в формате HTML без кодирования, когда я попробовал, я обнаружил, что то, что отображалось в Документах Google, не совсем то, что отображалось в электронном письме (например, что-то, что было сосредоточено в Google Docs). Документы были выровнены по левому краю в электронном письме).
    Будьте проще. Поскольку то, что будет поддерживать Gmail, довольно непредсказуемо, лучше сделать все достаточно простым с точки зрения HTML. (Вероятно, это хорошая идея и с точки зрения получателей. Никому не нужны слишком сложные электронные письма.) Упрощение также помогает почтовым клиентам ваших получателей отображать вещи так, как вы задумали, особенно когда речь идет об адаптивном дизайне электронной почты. .
    Создайте шаблон. Отформатировав файл HTML, сохраните его как шаблон вне Gmail. Затем в будущем вы сможете использовать этот шаблон для настройки новых электронных писем, просто заменив несколько слов без необходимости воссоздавать HTML-код для настройки макета, размещения логотипа и т. д.
    Помните, что Gmail находится в стадии разработки. Gmail постоянно меняется, поэтому сообщения в блогах или онлайн-ответы, сделанные несколько лет назад, уже устарели. Если вы ищете, как сделать что-либо с помощью HTML и Gmail, , постарайтесь найти контент, который был написан как можно раньше.

    Шаг 2: Отобразите обработанную HTML-страницу в браузере.

    Я использовал Chrome и только что открыл (Ctrl-O) файл .html, который был на моем компьютере.

    Шаг 3. Откройте окно Gmail Compose и вставьте его в основную текстовую область.

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

    Шаг 4: Отправьте слияние почты с помощью GMass.  Как обычно, просто нажмите красную кнопку GMass .

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

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

     

    Вариант 2. Вставьте HTML-код в Gmail с помощью инструментов разработчика Chrome.

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

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

    Затем Chrome разделится и откроет панель, показывающую HTML-код поля «Написать», и одна часть будет выделена.

     

    Найдите «div» с пометкой «contenteditable=true», затем щелкните правой кнопкой мыши и выберите Редактировать как HTML .

    Часть внутри тега «div» — это та часть, которую вы должны заменить собственным HTML-кодом.

    Здесь у меня есть собственный HTML-код в текстовом редакторе Sublime:

    Но здесь он и для вас, если вы хотите попробовать скопировать/вставить это самостоятельно:

    &lt;h2&gt;Это мой заголовок&lt;/h2&gt;
    
    &lt;p&gt;Это мой первый абзац. &lt;/p&gt;
    
    &lt;p&gt;Вот текст, выделенный жирным шрифтом.&lt;/p&gt;
    
    &lt;p&gt;Вот изображение солнца:&lt;/p&gt;
    &lt;br&gt;
    &lt;img src="https://image.shutterstock.com/image-vector/sad-sun-exhausted-heat-vector-260nw-200226281.jpg"&gt;
    
     

    Наконец, вот мой код, вставленный в:

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

    Вариант 3. Используйте расширение Chrome для отправки электронной почты в формате HTML

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

    Расширение Chrome 1: Бесплатный HTML-редактор для Gmail от cloudHQ

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

    Щелкните значок расширения в нижней части окна «Написать».

    Их инструмент для создания электронных писем выглядит так:

    Инструмент для создания занимает окно «Создать», пока вы не нажмете «Закрыть редактор».

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

    Расширение Chrome 2: GMass

    Мое собственное расширение Chrome включает функцию «HTML», так что вы можете просмотреть и установить HTML в окно создания .

    Откройте окно Настройки и щелкните «HTML».

    Вставьте в HTML-код.

    Нажмите Хорошо и наблюдайте, как происходит волшебство.

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

    Расширение Chrome 3: HTML Inserter для Gmail

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

    Вы можете использовать его в 3 простых шага:

    1. Щелкните значок HTML.
    2. Вставьте свой HTML.
    3. Нажмите кнопку Вставить HTML и посмотрите, как появится отформатированное сообщение.

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

    Удачи в создании следующего шаблона электронной почты!

    Готовы отправлять более качественные электронные письма и сэкономить массу времени?

    GMass — это единственный инструмент для маркетинговых электронных писем, холодных электронных писем и слияния — все внутри Gmail. Тонны мощности, но прост в освоении и использовании.

    ПОПРОБУЙТЕ GMASS БЕСПЛАТНО

    Скачать расширение Chrome — 30 секунд!
    Кредитная карта не требуется

    Аджай Гоэл

    Аджай является основателем GMass и занимается разработкой программного обеспечения для отправки электронной почты в течение 20 лет.

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

    Редактор дизайна и кода | Twilio