Как отправить html письмо с outlook
Перейти к содержимому

Как отправить html письмо с outlook

  • автор:

Отправка письма в html-формате при помощи Outlook-2016

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

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

Видео

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

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

Вставить код html в создаваемое Outlook 2016Рис. 1

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

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

После того, как наш html-файл откроется, выделим всё его содержимоеРис. 2

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

Теперь следует вернуться в Outlook 2016.Рис. 3

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

В открывшемся новом окне для создания сообщений указываем адресата для нашего посланияРис. 4

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

Результат – готовое к отправке 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-послание находится под рукой, готовое и к немедленной отправке, и, вдруг понадобись, к редактированию.

Готовое html-посланиеРис. 12

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

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

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

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

Вставка рисункаРис. 13

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

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

Изменени гиперссылокРис. 14

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

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

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

Как отправить html письмо с outlook

Изменение формата сообщения на HTML, RTF или обычный текст

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

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

Доступные типы формата сообщений

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

У каждого формата есть свои преимущества.

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

Обычный текст

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

RTF — это формат Майкрософт, который поддерживается только следующими почтовыми приложениями:

клиент Microsoft Exchange версий 4.0 и 5.0;

все версии Outlook.

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

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

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

Как отправить html-письмо в Outlook 2016

Способ загрузки html-письма №1 (с помощью Microsoft Word)

Скриншот 1

Скриншот 2

Скриншот 3

Способ загрузки html-письма в Outlook 2016 №2 (напрямую)

Скриншот 4

Скриншот 5

Скриншот 6

Скриншот 7

Скриншот 8

Скриншот 9

Скриншот 10

Скриншот 11

  • Добавить ссылку — «Ссылка/Вставить ссылку»
  • Удалить ссылку — «Удалить ссылку» для картинки, «Удалить гиперссылку» для текста
  • Заменить ссылку — «Ссылка для редактирования» для картинки, «Изменить гиперссылку» для текста

Как вставить HTML (включая изображения) в электронное письмо в Outlook 2016+

Отправка письма в html-формате при помощи Outlook-2016

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

Вставить код html в создаваемое Outlook 2016Рис. 1

После того, как наш html-файл откроется, выделим всё его содержимоеРис. 2

Теперь следует вернуться в Outlook 2016.Рис. 3

В открывшемся новом окне для создания сообщений указываем адресата для нашего посланияРис. 4

Результат – готовое к отправке html-сообщениеРис. 5

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

Новое письмоРис. 6

Вложить файлРис. 7

Отображение письма в окне создания сообщенияРис. 8

Создание шаблонаРис. 9

Создать папкуРис. 10

ШаблоныРис. 11

Готовое html-посланиеРис. 12

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

Вставка рисункаРис. 13

Изменени гиперссылокРис. 14

Как добавить изображения и ссылки в письмо Outlook

Многие люди используют почтовые клиенты для ведения деловой переписки, обмена изображениями и т.д. Хотя, я привык к программе Mozilla Thunderbird, сегодня расскажу о том, Как вставить картинку в письмо Outlook и HTML, гиперссылку в Аутлук

Как добавить HTML код?

Это приложение Microsoft является одним из самых простых и функциональных для работы с почтой. Его интерфейс полностью соответствует единому стилю офисного пакета Майкрософт. И это значительно упрощает знакомство с клиентом, если Вы знакомы с Word или PowerPoint.

Отправлять письма через Аутлук несложно, но не все сразу разбираются с добавлением html разметки в содержимое. Сейчас я расскажу, как это делается.

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

Кнопка создать сообщение в Аутлук

  • Когда запуститься новое окно, следует переключится на вкладку «Вставка». В нижнем ряду появится значок скрепки с надписью: «Вложить…»:

Кнопка вставки файла HTML в письмо Аутлук

  • Откроется окно проводника, где Вам следует указать путь (просто найти) нужный файл html. Как только Вы это сделаете и выделите элемент, не спешите нажимать кнопку «Вставить». Следует кликнуть по маленькому треугольнику справа от надписи, чтобы из выпадающего меню выбрать вариант «Вставить как текст»:

Окно проводника для выбора фаqkf HTML в Аутлук

Как редактировать текст письма в Аутлуке?

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

Так выглядит HTML содержимое письма

Но как изменить те или иные элементы? Сейчас расскажу подробно!

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

Если нужно внести изменения в ссылку, следует:

  • кликнуть по ней кнопкой мыши (правой). В меню контекстном выбрать пункт «Изменить…»:

Контекстное меню - изменить гиперссылку Аутлук

  • Откроется диалоговое окно, где следует прописать нужное значение в «Адрес»:

Поле ввода адрес ссылки в Аутлук

  • Если же необходимо убрать ссылку, то следует щелкнуть по ней правой кнопкой мыши. В меню контекстном выбрать пункт «Удалить…».
  • Для создания новой ссылки поступаем так: выделяем текст, картинку или любой другой объект. Вызываем на нём контекстное меню и выбираем пункт «Гиперссылка», а далее появится уже знакомое окно с полем «Адрес».

Вкладка «Изменить» (Edit) переводит окно создания сообщения в стандартный режим редактирования электронного письма, вкладка «Источник» (Source) — позволяет редактировать HTML-код, а вкладка «Просмотр» (Preview) демонстрирует послание в том виде, в котором оно будет отображаться в окне почтовой программы получателя.

Это может пригодиться:

Как вставить картинку в письмо Outlook в текст?

Допустим, Вы хотите заменить одно изображение в письме на другое.

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

Меню изменить в контекстном меню Аутлук

  • Теперь просто находите созданный заранее графический объект и вставляете его.
  • Новое изображение вставляется немножко по-другому. Нужно перейти во вкладку «Вставка» и чуть ниже выбрать «Рисунок»:

Как добавить картинку в письмо Аутлук

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

Всё довольно просто, согласитесь?

Советуем ознакомиться:

Как отправлять?

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

Отправка письма в Outlook

Как только заполните все поля, о которых было сказано выше, можете смело наживать на последнюю кнопку «Отправить»!

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

Как отправить html-письмо в Outlook 2016

Добрый день. Сегодня мы расскажем вам как отправлять и редактировать html-письма с помощью Outlook 2016.

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

Способ загрузки html-письма №1 (с помощью Microsoft Word)

1. Открываем нужный нам .html файл с помощью Microsoft Word (Клик правой кнопкой мышки по нужному файлу — Открыть с помощью)

2. Выделяем все содержимое файла (Ctrl+A) и копируем в буфер обмена (Ctrl+С)

Скриншот 1

3. Создаем сообщение в Outlook 2016

Скриншот 2

4. Вставляем содержимое буфера обмена в тело письма (Ctrl+V)

Скриншот 3

Способ загрузки html-письма в Outlook 2016 №2 (напрямую)

1. Создаем сообщение

Скриншот 4

2. Добавляем в панель быстрого доступа функцию «Вложить файл»

Примечание: функция с таким же названием во вкладке «Вставка» работает по другому.

Скриншот 5

3. С помощью появившейся кнопки «Вложить файл» в панели быстрого доступа, выбираем нужный нам html файл письма, и добавляем его в сообщение с помощью опции «Вставить как текст»

Скриншот 6

4. Готово, письмо вставлено.

Скриншот 7

Сохраняем загруженное письмо как шаблон

Помимо непосредственно отправки html-писем, мы хотим поделиться с вами еще одним небольшим «лайфхаком» для Outlook 2016 — сохранение писем как шаблонов.

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

Для того чтобы создать шаблон, после составления письма сохраните его как файл .otf — Файл/Сохранить как/Шаблон Outlook.

Примечание: Outlook автоматически создает директорию для сохранения шаблонов писем формата Диск:\Users\UserName\AppData\Roaming\Microsoft\Templates, для удобства доступа, не забудьте указать другую в момент сохранения.

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

Скриншот 8

И уже в нужную директорию добавить сохраненные шаблоны, просто перетащив их из нужной папки:

Скриншот 9

Теперь все нужные шаблоны будут всегда у вас под рукой!

Редактирование письма

Текст письма

Работа с текстом html-письма по своей сути ничем не отличается от работы с текстом в обычном письме. Вставка, редактирование шрифта, изменение выравнивания и т.д. — все эти опции для вас доступны. Но мы не рекомендуем создавать новые текстовые поля, там где они не предусмотрены структурой письма, и значительно изменять объем текста (за исключением «во всю ширину письма»).

Изображения

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

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

Соответственно единственная безболезненная манипуляции над изображениями в письме — замена на аналогичное по размерам. Для этого кликните правой кнопкой мыши на изображение и выберите опцию «Изменить изображение/Из файла»

Скриншот 10

Выберите нужное изображение у вас на компьютере, и нажмите кнопку «Вставить»

Работа со ссылками

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

Для этого кликните правой кнопкой мышки на нужную картинку или выделенный участок текста и выберите нужную опцию из списка:

Скриншот 11

  • Добавить ссылку — «Ссылка/Вставить ссылку»
  • Удалить ссылку — «Удалить ссылку» для картинки, «Удалить гиперссылку» для текста
  • Заменить ссылку — «Ссылка для редактирования» для картинки, «Изменить гиперссылку» для текста

После этого у вас откроется окно, где нужно будет указать нужную ссылку и нажать «Ок».

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

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

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

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

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

Зачем вставлять 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 .

Скачивайте и используйте уже сегодня:

Александр Сагун - исполнительный директор Geekbrains

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

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

doc иконка

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

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

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

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

Для начала следует уяснить, что любое 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 пикселей, стандартная для большей части почтовых сервисов. Выравнивание ставьте по центру.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *