Как сделать письмо html - IT Новости
Microclimate.su

IT Новости
31 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать письмо html

Как создать динамический HTML шаблон электронного письма

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

Основные принципы

Самая большая проблема при разработке HTML шаблона письма – это обеспечение его совместимости с разными платформами. Существует множество различных почтовых клиентов, например, Google Mail , Apple Mail , Outlook , AOL , Thunderbird , Yahoo! , Hotmail , Lotus Notes . Некоторые из них уже давно не у дел. Особенно это касается поддержки CSS , поэтому нам нужно использовать HTML таблицы , чтобы обеспечить корректное отображение писем. Фактически, использование HTML таблиц является единственным способом создать макет, который будет одинаково отображаться в разных почтовых клиентах.

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

Чтобы убедиться в этом, рассмотрите пример ниже, в котором я применил атрибут border , чтобы вывести границу каждой таблицы. Обратите внимание, что символы %s являются местом, где будет размещен динамический текст и картинки:


Весь макет построен на основе HTML таблиц . Мы воспользуемся PHP библиотеками для анализа маркера %s и его заполнения динамическим текстом перед отправкой письма.

Разработка статического шаблона

Начнем программировать! Прежде чем приступить к созданию красивого шаблона HTML письма , нужно начать HTML файл с XHTML документа :

Я рекомендую определить все таблицы границей border=»1″ , поскольку так проще определять ошибки при создании HTML шаблон письма. Для начала создадим базовый макет:

Установите cellpadding и cellspacing в ноль , чтобы избежать непредусмотренного пространства в таблице. Также установите ширину в 100%, поскольку эта таблица является телом письма ( стилизация тега body полностью не поддерживается ).

Теперь мы добавим вместо текста « My first email template! » (« Мой первый шаблон электронного письма! ») другую таблицу:

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

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

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

Несколько замечаний перед тем, как сделать шаблон HTML письма :

  1. Добавьте атрибут alt там, где нужно показать текст вместо изображений на случай, если почтовый клиент не сможет правильно загрузить их;
  2. Добавьте маркер %s там, где нужно, чтобы данные появлялись динамически в зависимости от варианта письма;
  3. Процентные значения обозначаются дополнительным знаком %. Это сделано так, чтобы PHP библиотека, которая используется для динамической обработки, знала, как правильно анализировать текст.

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

Разработка динамического шаблона

Сохраните приведенный выше код в виде файла template.html . Теперь создадим новый PHP файл .

На серверной стороне зададим метод отправки HTML шаблона письма , описанный ниже:

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

Теперь, когда все готово, можно использовать оба метода и отправить наше первое динамическое письмо! Давайте воспользуемся созданным шаблоном письма для рассылки HTML . Допустим, что новый пользователь только что подтвердил свой электронный адрес. Хотелось бы отправить пользователю письмо с текстом Your email has been successfully verified (« Ваша электронная почта успешно подтверждена »).

Предположим, что у нас есть подтвержденная почта пользователя user@user.com и почта компании company@company.com . Теперь можно отправить автоматическое письмо:

Все! Вы можете использовать этот подход. Вот окончательный HTML шаблон email письма , отправленного пользователю:

Данная публикация представляет собой перевод статьи « How to create a dynamic HTML Email Template » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

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

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

Читать еще:  Выравние текста по ширине html

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

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

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

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

Подготовка

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

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

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

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

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

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

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

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

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

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

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

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

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

Просмотр

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

Кодировка

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

Как создать красивое html письмо для рассылки

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

Но желание — есть, поэтому стал копаться дальше. Может быть и на блоге, скоро заменю подписку по email от feedburner (под статьями) на какую-нибудь другую, где можно сделать ее более симпатичной. Главное учесть все нюансы верстки под почтовые клиенты, а их поверьте не мало.

Актуальность создания html писем для почтовой рассылки

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

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

Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!

Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка. Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.

Читать еще:  Как сделать картинку гиперссылкой в html

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

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

Проблемы при верстке html писем

Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи , а именно inline, для каждого элемента отдельно.

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

Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.

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

Как написали на одном из сайтов:

Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan

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

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

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

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

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

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

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

Как вы уже заметили, я задал cellpadding=»40″ для таблицы-обертки. Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше…

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

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

Этим кодом я добавляю строку с одним столбцом, в таблицу «content» и помещаю в него картинку, с надписью «Smartlanding»:

Сейчас письмо выглядит так:

Идем дальше. Сейчас нам нужно реализовать такую структуру:

Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:

Теперь необходимо реализовать анонс статьи, делается это достаточно просто. 1 строка, 1 столбец и текст в нем:

Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 — для того, чтобы задать отступ между ними (60px).

Точно такую же разметку делаю для текста, заголовков:

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

Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:

  • gmail
  • yandex
  • rambler
  • mail
  • mozilla thunderbird
  • outlook 2007
  • outlook 2013
  • the bat

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

Читать еще:  Создание сайта html презентация

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

(Ознакомиться с предварительными тестами html письма в разных поисковых системах можно здесь)

Создание с нуля HTML-шаблона электронного письма

Дата публикации: 2019-09-11

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

Что мы создаем

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

Начинаем с HTML-документа

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Прекрасные 2D иконки от Пьера Бородина на Dribbble

Иконки социальных сетей от Metrize Icons

Теперь, как мы уже писали в предыдущем руководстве, вам нужно начать HTML-документ электронного письма с XHTML-документа:

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

Создайте раздел body и основную таблицу

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

Мы также добавим таблицу шириной 100%. Он выполняет роль тега body для нашего электронного письма, поскольку стилизация тега body не поддерживается полностью. Если вы хотите добавить цвет фона к «телу» электронного письма, вам нужно вместо этого применить его к этой большой таблице.

Установите для cellpadding и cellspacing ноль, чтобы избежать неожиданных пустых пространств в таблице.

Примечание: мы собираемся оставить border=»1″ для всей таблицы, чтобы мы могли видеть скелет макета. Мы удалим его в конце с помощью простого поиска и замены.

«Если в HTML существует атрибут, используйте его вместо CSS»

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

Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML электронных писем: если в HTML существует атрибут, используйте его вместо CSS. Мы заменим наше маленькое приветствие «Hello!» этой таблицей:

Мы также добавили свойство встроенного стиля, которое устанавливает для свойства border-collapse значение collapse. Если мы этого не сделаем, более новые версии Outlook добавят небольшое пространство между нашей таблицей и обводкой.

Создайте структуру и заголовок

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

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

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

Использование отступов

При использовании отступов в электронном письме вы всегда должны указывать каждое отдельное значение (верхнее, правое, нижнее и левое), в противном случае вы можете получить непредсказуемые результаты. Я считаю, что вы можете использовать сокращенную запись, то есть padding: 10px 10px 8px 5px;, но если у вас возникли проблемы вы можете использовать полную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Если у вас возникают еще большие проблемы с отступами (например, если платформа отправки удаляет ваш CSS), не используйте их вообще. Просто создайте пустые ячейки, чтобы задать пространство. Нет необходимости использовать пустые GIF, просто убедитесь, что вы добавляете style=»line-height: 0; font-size: 0;» для ячейки, размещаете внутри нее и задаете ей явную высоту или ширину. Вот пример:

Также обратите внимание, что использование тегов TD безопасно, а тегов P или DIV — нет. Они ведут себя намного более непредсказуемо.

Итак, мы будем использовать некоторые встроенные CSS для добавления отступов ячейки. Затем мы вставим изображение, добавив альтернативный текст и указав style=»display:block;», что является обычным исправлением, которое не дает некоторым почтовым клиентам, добавлять пробелы под изображениями. Мы разместим изображение по центру, добавив align=»center» к тегу td. Мы также добавим тег alt, который важен для начальной загрузки электронного письма, которая в большинстве случаев будет отключена.

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

0 0 голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector