Email html code: Создание шаблона HTML письма с нуля.

Содержание

Как отправить html email с django с динамическим контентом в нем?

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

Буду признателен за любые предложения.

Спасибо.

python

django

Поделиться

Источник


Ankit Jaiswal    

09 июня 2010 в 10:47

7 ответов


  • django+ отправить email в html с django-регистрацией

    im using django-registration, все в порядке, подтверждение email отправлялось в обычном тексте, но знаю, что im исправлен и отправляет в html, но у меня проблема с мусором… код html показывает: <a…

  • Как отправить рассылку в Magento с динамическим контентом?

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



107

Django включает в себя метод django.core.mail.send_mail в эти дни (2018), нет необходимости использовать класс EmailMultiAlternatives напрямую. Сделайте это вместо этого:

from django.core import mail
from django.template.loader import render_to_string
from django.utils.html import strip_tags

subject = 'Subject'
html_message = render_to_string('mail_template.html', {'context': 'values'})
plain_message = strip_tags(html_message)
from_email = 'From <[email protected]>'
to = '[email protected]'

mail.send_mail(subject, plain_message, from_email, [to], html_message=html_message)

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

Поделиться


Babken Vardanyan    

18 апреля 2018 в 08:18



64

from django.core.mail import EmailMultiAlternatives
from django.template.loader import render_to_string
from django.utils.html import strip_tags

subject, from_email, to = 'Subject', '[email protected]', '[email protected]'

html_content = render_to_string('mail_template.html', {'varname':'value'}) # render with dynamic value
text_content = strip_tags(html_content) # Strip the html tag. So people can see the pure text at least.

# create the email, and attach the HTML version as well.
msg = EmailMultiAlternatives(subject, text_content, from_email, [to])
msg.attach_alternative(html_content, "text/html")
msg.send()

Поделиться


Marvin W    

02 мая 2013 в 10:15



11

Это должно делать то, что вы хотите:

from django.core.mail import EmailMessage
from django.template import Context
from django.template.loader import get_template


template = get_template('myapp/email.html')
context = Context({'user': user, 'other_info': info})
content = template.render(context)
if not user.email:
    raise BadHeaderError('No email address given for {0}'.format(user))
msg = EmailMessage(subject, content, from, to=[user.email,])
msg.send()

Дополнительные сведения см. в документах django mail .

Поделиться


blokeley    

09 июня 2010 в 11:31


  • Отправка html email в Django

    С тех пор как вышел Django 1.7, все немного изменилось. Я пытаюсь использовать ‘send_mail’, чтобы отправить HTML email. Я хочу отправить спасибо email пользователям после регистрации на моем сайте. Я использую subject = ‘Thank you from ******’ message = ‘text version of HTML message’ from_email =…

  • iOS создать PDF с динамическим контентом

    Я хочу сделать PDF с динамическим контентом,например текст будет динамичным,изображения будут динамичными,так что зависит от содержания страниц курса, которые также будут динамичными, я следовал этому учебнику http://code.tutsplus.com/tutorials/generating-pdf-documents—mobile-11265 но в этом…



8

Для тех, кто смотрит на это в 2020 году и использует django v3.x (я не знаю, когда это было введено, поэтому это может работать для более ранних версий.

Примечание: Я хотел включить только версию html без обычной текстовой версии. Мой django взгляд:

from django.template.loader import render_to_string 
from django.core.mail import EmailMessage

# import html message.html file
html_template = 'path/to/message.html'

html_message = render_to_string(html_template, { 'context': context, })

message = EmailMessage(subject, html_message, from_email, [to_email])
message.content_subtype = 'html' # this is required because there is no plain text email message
message.send()

Мой файл html (message.html) выглядел так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Order received</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0">
...
content
...
</table>
</body>
</html>

Более подробная информация здесь: Отправка альтернативных типов контента из django docs

Поделиться


alkadelik    

25 июня 2020 в 18:52



6

Попробуйте это::::

https://godjango.com/19-using-templates-for-sending-emails/

ссылка на пример кода

# views.py

from django.http import HttpResponse
from django.template import Context
from django.template.loader import render_to_string, get_template
from django.core.mail import EmailMessage

def email_one(request):
    subject = "I am a text email"
    to = ['[email protected]']
    from_email = '[email protected]'

    ctx = {
        'user': 'buddy',
        'purchase': 'Books'
    }

    message = render_to_string('main/email/email.txt', ctx)

    EmailMessage(subject, message, to=to, from_email=from_email).send()

    return HttpResponse('email_one')

def email_two(request):
    subject = "I am an HTML email"
    to = ['[email protected]']
    from_email = '[email protected]'

    ctx = {
        'user': 'buddy',
        'purchase': 'Books'
    }

    message = get_template('main/email/email.html').render(Context(ctx))
    msg = EmailMessage(subject, message, to=to, from_email=from_email)
    msg.content_subtype = 'html'
    msg.send()

    return HttpResponse('email_two')

Поделиться


vijay    

15 июля 2015 в 12:46



1

Если вам нужны динамические шаблоны email для вашей почты, сохраните содержимое email в таблицах базы данных.
Это то, что я сохранил как код HTML в базе данных =

<p>Hello.. {{ first_name }} {{ last_name }}.  <br> This is an <strong>important</strong> {{ message }}
<br> <b> By Admin.</b>

 <p> Good Day </p>

В ваших взглядах:

from django.core.mail import EmailMultiAlternatives
from django.template.loader import get_template

def dynamic_email(request):
    application_obj = AppDetails.objects.get(id=1)
    subject = 'First Interview Call'
    email = request.user.email
    to_email = application_obj.email
    message = application_obj.message

    text_content = 'This is an important message.'
    d = {'first_name': application_obj.first_name,'message':message}
    htmly = FirstInterviewCall.objects.get(id=1).html_content #this is what i have saved previously in database which i have to send as Email template as mentioned above HTML code

    open("partner/templates/first_interview.html", "w").close() # this is the path of my file partner is the app, Here i am clearing the file content. If file not found it will create one on given path.
    text_file = open("partner/templates/first_interview.html", "w") # opening my file
    text_file.write(htmly) #putting HTML content in file which i saved in DB
    text_file.close() #file close

    htmly = get_template('first_interview.html')
    html_content = htmly.render(d)  
    msg = EmailMultiAlternatives(subject, text_content, email, [to_email])
    msg.attach_alternative(html_content, "text/html")
    msg.send()

Это отправит динамический шаблон HTML, который вы сохранили в Бд.

Поделиться


Javed    

26 июля 2018 в 04:34



1

from django.core.mail import EmailMultiAlternatives

subject, from_email, to = 'hello', '[email protected]', '[email protected]'
text_content = 'This is an important message.'
html_content = '<p>This is an <strong>important</strong> message.</p>'
msg = EmailMultiAlternatives(subject, text_content, from_email, [to]
msg.attach_alternative(html_content, "text/html")
msg.send()

Поделиться


Hamdi Hassen    

17 апреля 2020 в 23:05


Похожие вопросы:

Отправить HTML Email со встроенными изображениями в Django

Я пытаюсь отправить HTML Email со встроенными изображениями, как показано в статье: https:/ / www.vlent.nl/weblog/2014/01/15/sending-emails-with-embedded-images-in-django/ . У меня это работает….

Как отправить Email с Html контентом и изображением в Android

Я хочу отправить email из моего приложения android, которое имеет содержимое HTML, а также изображение в качестве вложения. Результаты моего поиска показали, что отправить изображение с помощью тега…

Как отправить email с django-регистрацией?

Как отправить email с django-регистрацией?

django+ отправить email в html с django-регистрацией

im using django-registration, все в порядке, подтверждение email отправлялось в обычном тексте, но знаю, что im исправлен и отправляет в html, но у меня проблема с мусором… код html показывает:…

Как отправить рассылку в Magento с динамическим контентом?

Я чрезвычайно Новичок в Magento. Я создал шаблон информационного бюллетеня с фиктивным контентом. Теперь мне нужно заменить фиктивный контент динамическим. В основном мне нужно отправлять почту с…

Отправка html email в Django

С тех пор как вышел Django 1.7, все немного изменилось. Я пытаюсь использовать ‘send_mail’, чтобы отправить HTML email. Я хочу отправить спасибо email пользователям после регистрации на моем сайте….

iOS создать PDF с динамическим контентом

Я хочу сделать PDF с динамическим контентом,например текст будет динамичным,изображения будут динамичными,так что зависит от содержания страниц курса, которые также будут динамичными, я следовал…

SwiftmailerBundle как отправить email с html контентом? Symfony 2

я пытаюсь отправить шаблон с содержимым html, но в email я получил только текст как я могу установить для отправки email с содержимым html? $messaggio = \Swift_Message::newInstance()…

qTip с динамическим контентом

Я пытаюсь заставить qtip2 работать с приложением rails3. qtip отлично работает, но я не могу понять, как заставить его работать с динамическим контентом из моих моделей. Я застрял, форматируя свой…

Как отправить Email с html страницей в Django?

Я новичок в Django ! Я не знаю, как отправить email в Django. Я ссылаюсь на документацию Django, но это мне не помогло . Мне нужно отправить email с html страницей разным пользователям .In models.py…

Инструкция по HTML верстке писем email рассылки

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

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

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

Создание HTML письма: Базовые знания

Существуют два основных правила, о которых всегда стоит помнить, приступая к верстке письма:

  • Используйте таблицы HTML кодов при создании дизайна шаблона. Это будут огромные таблицы с большим количеством вложенных таблиц. Но такой подход помогает сохранить нужный дизайн на любом устройстве и в любом почтовом клиенте. Представьте, что вы вернулись на 20 лет назад – и верстайте 🙂
  • Используйте внутренние CSS стили. Некоторые почтовые клиенты будут удалять всё, что находится в тегах <head> и <body>, включая CSS. Поэтому, для изменения стилей различных элементов письма — цвет, фон, шрифты — рекомендуется прописывать параметры отдельно для каждого элемента в теле письма.

А теперь давайте разбираться детальнее в такой сложной, но интересной теме как верстка email писем.

Один из самых распространенных вопросов среди новичков: Где писать код шаблона HTML письма? Не в Microsoft Word же, правда? Удобно и понятно, когда сразу видишь, как выглядит написанный код HTML письма и в каком виде его получит клиент. Программа для массовых email рассылок ePochta Mailer имеет прекрасный функционал для параллельного написания кода и просмотра созданного шаблона в режиме реального времени. Поэтому здесь и далее все примеры по созданию, редактированию и отправке письма будут представлены с ее помощью.

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

Формат шаблона html-писем

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

Чаще всего одноколоночный макет включает в себя:

  1. Хедер (шапку), что содержит логотип и навигационные ссылки с родительского вебсайта.
  2. Основное тело письма с контентом, картинками и ссылками на веб-страницы с полной информацией, обзор которой подан в письме.
  3. Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

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

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

HTML код любого email сообщения состоит из двух частей:

  1. Шапка (Header). Всё, что будет обернуто в тег <head> и </head>, почтовый клиент будет принимать за шапку письма.
  2. Тело (Body). Код, размещенный внутри тега <body> и </body> будет использован для создания структуры вашего email сообщения.

Создание HTML письма начинается с создания документа типа XHTML:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5. <title>Инструкция Создания Email Шаблона <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6. </head>
7. </html>

<!DOCTYPE> объясняет почтовому, какие HTML-теги ожидать в дальнейшем, и какому набору правил HTML и CSS вы придерживались, создавая письмо. Несмотря на то, что некоторые почтовые клиенты (Gmail, Google Apps, Yahoo! Mail и Outlook.com) заменят ваш хедер на собственный, мы рекомендуем включить данный код в документ.

<meta http-equiv=”Content-Type” /> указывает, как обрабатывать текст и специальные символы в вашем письме.
«text/html» дает понять механизму, что рассматривать следующие строки текста нужно как html.

<meta name=”viewport”/> указывает устройство, на котором просматривается электронное письмо, чтобы установить видимую область сообщения в соответствии с шириной экрана.

Заголовок email сообщения записывается внутри тега <title>. В таком случае, если получатель выберет «Просмотр в Интернете», заголовок сообщения будет отображаться на вкладке браузера.

Верстка тела email писем. Создание таблицы

Общая структура письма создается с использованием тега <body>.

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

Ширина главной таблицы должна быть 100% (table width=”100%”). Она выступает фактически основным каркасом, «телом» email сообщения. В отличие от тега , работая с таблицей, вы можете работать со стилями: например, чтобы задать общий цвет фона для всего письма, его нужно прописать в параметрах этой главной таблицы.

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

Примечание. Здесь и далее мы оставим значение тега border для границы всех таблиц как 1: border=”1″. Так вам будет проще отследить структуру макета. В конце, значение можно убрать, используя функцию «Найти и заменить».

1. <body>
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Привет!
6. </td>
7. </tr>
8. </table>
9. </body>

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

(наличие рамки – результат работы тега border=”1″)

Максимально возможная и удобная ширина для электронного сообщения, которое просматривается в почтовых клиентах на персональном компьютере – 600px. Чтобы письмо не растягивало на весь экран, нужно внутри уже созданной главной таблицы создать еще одну вложенную, строго прописав значение её ширины: width=”600″.

Золотое правило в создании HTML кода email сообщения: если нужный атрибут (тег) существует в HTML, используйте его, и не нужно обращаться к CSS.

Этот код вложенной таблицы следует вставить вместо слова «Привет!»

1. <table border="1" cellspacing="0" cellpadding="0" align="center">
2. <tbody>
3. <tr>
4. <td>Привет!</td>
5. </tr>
6. </tbody>
7. </table>

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

Вы заметили, что для вложенной таблицы использован атрибут <border-collapse> со значением “collapse”? Он указывает почтовым клиентам на правильность отображения границ вокруг ячеек таблицы. Если этого не сделать, более новые версии Outlook, например, в процессе обработки письма, добавят небольшое ненужное пространство между границами двух таблиц.

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

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

1. <tr>
2. <td>
3. Привет!
4. </td>
5. </tr>

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

Должно получиться следующее:

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td>
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td>
14.Строка 3
15. </td>
16. </tr>
17. </table>

Визуально:

Давайте добавим цвет фона отдельно для каждой строки. Так как в HTML существует для этого специальный тег <bgcolor>, следует использовать его вместо CSS стилей. Обратите внимание, что выбирая цвет, нужно указывать все 6 символов кода, так как сокращенные три символа могут попросту не сработать.

1. <table align="center" border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td bgcolor="#ffa500">
4. Строка 1
5. </td>
6. </tr>
7. <tr>
8. <td bgcolor="#ffffff">
9. Строка 2
10. </td>
11. </tr>
12. <tr>
13. <td bgcolor="#1e90ff">
14. Строка 3
15. </td>
16. </tr>
17. </table>

Сосредоточимся на первой строке – это будет хедер письма.

Строка 1. Верстка хедера HTML писем

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

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

Прописывая параметры, вполне допустимо использовать краткий вариант записи, типа padding: 10px 10px 5px 5px;.

Если же возникают проблемы, их решит длинный вариант записи, типа padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 5px;.

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

Например:

<tr><td>&nbsp;</td></tr>

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

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

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

Пример кода Строки 1 с вставленным изображением:

1. <td align="center" bgcolor="#ffa500">
2. <img alt="СМС и Email маркетинг" src="E:\epochta\БЛОГ\mailer_html_img.png">
3. </td>

Визуально:

Строка 2. Работа с контентом в HTML шаблоне письма

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

Визуально должно получиться:

Теперь нужно подготовить место для контента. Как упоминалось выше, нужно добавить еще одну вложенную таблицу. Это будет таблица с тремя строками:

  • одна – для заголовка,
  • вторая – для краткого описания статьи,
  • третья – для строки с двумя столбцами.

Поехали!

Ширина таблицы, которая будет во второй строке должна стоять не в пикселях, а в процентах (100%). Это нужно, если хотите, чтобы письмо было респонсивным.

Код Строки 2 с вложенной таблицей:

1. <td bgcolor="#ffffff">
2. <table border="1" cellpadding="0" cellspacing="0">
3. <tr>
4. <td>
5. Строка 1
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Строка 2
11. </td>
12. </tr>
13. <tr>
14. <td>
15. Строка 3
16. </td>
17. </tr>
18. </table>
19. </td>

Визуально:

Пишем заголовок статьи и её краткое описание. В строке с описанием можно добавить отступы для красивого отображения текста. Обратите внимание, что программа ePochta Mailer позволяет добавлять и изменять текст непосредственно в визуальном редакторе, без перехода на вкладку HTML кода.

Вложенная таблица с текстом:

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td>
5. Продвижение бренда в Вайбер: массовые рассылки в мессенджерах
6. </td>
7. </tr>
8. <tr>
9. <td>
10. Cейчас Viber — это не только приложение для личных переписок, но и эффективный канал коммерческого продвижения товаров и услуг.
11. Только ленивые не говорят о том, что вайбер для бизнеса — это действительно эффективный и дешевый инструмент. Так ли это? Предлагаем проверить эти утверждения на соответствие действительности.
12. </td>
13. </tr>
14. <tr>
15. <td>
16. Строка 3
17. </td>
18. </tr>
19. </tbody>
20. </table>

Визуально:



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

Давайте по порядку.

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

Основной параметр столбца – ширина. В данном случае мы будет ориентироваться на ширину картинки, которая будет размещена в нем. Её ширина 260px. И чтобы не запутаться, высчитывая, какой же процент составляют 260 пикселей из таблицы на 540px* (а это будет 48,1%), проще будет указать известную ширину.

*Ширина вложенной таблицы 540px – это ширина основной таблицы в 600px минус отступы, по 30px с каждой стороны.

Итого, два столбца по 260 пикселей + средний пустой столбец на 20px.

Укажем также для обоих столбцов значение valign=”top”, что выровняет текст по вертикали, по верхнему краю строки, независимо от количества текста в каждом столбце. По умолчанию, значение valign считается middle; не забудьте его изменить.

1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td valign="top">
4. Колонка 1
5. </td>
6. <td>
7. &nbsp;
8. </td>
9. <td valign="top">
10. Колонка 3
11. </td>
12. </tr>
13. </table>

Визуально:

Добавляем изображения и контент.

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

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody>
3. <tr>
4. <td valign="top">
5. <table border="1" cellspacing="0" cellpadding="0">
6. <tbody>
7. <tr><td>&nbsp;
8. <img alt="Картинка для колонки 1" src="E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg"> </td>
9. </tr>
10. <tr>
11. <td>
12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
13. </td>
14. </tr>
15. </tbody> </table>
16. </td>
17. <td>
18. &nbsp;
19. </td>
20. <td valign="top">
21. <table border="1" cellspacing="0" cellpadding="0">
22. <tbody> <tr>
23. <td>
24. &nbsp;
25. <img alt="Картинка для колонки 3" src="E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg"> </td>
26. </tr>
27. <tr>
28. <td>
29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
30. </td>
31. </tr>
32. </tbody> </table>
33. </td>
34. </tr>
35. </tbody> </table>

Визуально:

Строка 3. Создание кода футера HMTL письма

Основные компоненты футера – контакты компании и ссылка отписки. Как видите, это два разных элемента и нам снова нужно разделить строку на две колонки с помощью дополнительных таблиц.

Чтобы не забыть, сначала добавим отступы, а после – таблицы.

Отступы:

<td bgcolor="#1e90ff ">
Строка 3
</td>

Визуально:

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

1. <table border="1" cellpadding="0" cellspacing="0">
2. <tr>
3. <td>
4. Колонка 1
5. </td>
6. <td>
7. Колонка 2
8. </td>
9. </tr>
10.</table>

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

Дополнительная таблица с информацией футера:

1. <table border="1" cellspacing="0" cellpadding="0">
2. <tbody><tr>
3. <td>
4. <p>Компания ePochta<br>
5. [email protected]</p>
6. </td>
7. <td align="right">
8. Вы получили это письмо как клиент нашей компании. Чтобы отписаться от рассылки, нажмите на ссылку ниже.
9. </td>
10. </tr>
11. </tbody></table>

Визуально:

Вы заметили, что текст во второй колонке футера выровнен по правому краю? Это возможно благодаря атрибуту align=”right” для тега .

Шаблон готов!

Верстка дизайна шаблона email рассылки

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

Возможностями встроенного CSS вы можете изменять параметры шрифта – использовать тег или для жирного шрифта, прописывать размер и название непосредственно семейства шрифта.

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

1. <td><p align="center">
2. Продвижение бренда в Вайбер:<br>массовые рассылки в мессенджерах
3. </p></td>

Посмотрите, как изменился текст:

Теперь уберем границы таблиц, которые мы оставляли, чтобы было визуально легко отследить изменения в структуре. Для этого на вкладке HTML код нажмите CTRL+F или перейдите в меню Правка – Найти. В открывшемся диалоговом окне выберите функцию Заменить и задайте значение border=”1″ заменить на тег border=”0″. Перейдите во вкладку Сообщение – все границы пропали, перед вами чистый готовый макет email сообщения.

При желании, можно оставить границу для основной таблицы в 600px, сделав её мало заметной, например:

<table align="center" cellspacing="0" cellpadding="0">

Добавим небольшой отступ в самой первой строке, чтобы фон не прилипал к самому верху страницы: 1. <table border="0" cellspacing="0" cellpadding="0">
2. <tbody>><tr>
3. <td>

А теперь – проба пера: отправляем письмо на тестовый email адрес.

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

Вот так созданный шаблон выглядит в Gmail

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

И пусть клиенты с удовольствием читают ваши рассылки!

HTML для Email: Что можно и чего нельзя делать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Last post

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Зачем нужен HTML-шаблон? — Еmail маркетинг

Время чтения: 12 минут

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

Что такое шаблон письма?

Шаблон email-рассылки – основа электронного письма. Это пустая форма письма, которую заполняют подходящими элементами – изображениями, текстом, кнопками с призывом к действию, ссылками на сайт и соцсети. Готовый шаблон выглядит так:

Шаблон составляют один раз, но использовать его для создания писем можно бесконечно: макет остается тот же, а его наполняемость меняется.

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

Структура шаблона

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

Хедер

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

Хедер в email-рассылке зоомагазина Petshop.ru выглядит так:

Компания вставила логотип, название, рекламный слоган, номер колл-центра и ссылки на разделы из каталога товаров.

Основная часть

Основная часть – место для описания коммерческого предложения, ярких картинок и вашей фантазии. Это поле для креатива, но важно не перегрузить шаблон текстом и пестрым дизайном. Пишите коротко и по делу, а картинки вставляйте не для красоты, а для иллюстрации идеи, как это делает сеть спортивных клубов Alex Fitness:

Емкое письмо от фитнес-клуба: завлекающий текст, тематическая картинка. Один минус – нет кнопки с призывом к действию. Ее не стоит прятать в футер. Лучше поставить в основную часть.

Футер

Подвал письма. Здесь указывают юридический адрес отправителя, ссылки на соцсети и кнопку «отписаться от рассылки».

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

Виды шаблонов

Платформы для email-рассылок предлагают 3 варианта работы с шаблонами:

  • Готовый шаблон;
  • Блочный редактор;
  • Собственный HTML-шаблон.

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

В Mailigen – 108 готовых шаблонов. Чтобы их найти, войдите на платформу и кликните на «Кампании – Шаблоны – Предлагаемые шаблоны».

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

Блочный редактор. Это инструмент, благодаря которому создают шаблон из готовых блоков. Знания HTML-кода не нужны.
В Mailigen есть 10 блоков, их можно переставлять местами, добавлять и удалять:

  • Текст;
  • Видео;
  • Кнопка;
  • Заголовок;
  • RSS-контент;
  • Изображение;
  • Группы в соцсетях;
  • Шеринг в соцсетях;
  • Динамический контент;
  • Горизонтальный разделитель.

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

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

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

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

Возможности HTML-шаблона

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

Зато если научиться «кодить», получится создать уникальные макеты email-рассылок. Плюс, при грамотно прописанном коде верстка письма будет правильно отображаться:

а) на устройствах с любой шириной экрана;
б) в любом браузере и любой почте.

Теперь про ограничения. Язык HTML разработали в 1980-90-х годах. С тех пор он обновлялся несколько раз, а в интернете появились новые браузеры и почтовые провайдеры. Они не составили единые стандарты обработки кода, поэтому писать код так, чтобы его правильно считывали все браузеры и почтовые провайдеры, стало сложно.

Вот тут-то новичок и может попасть в ловушку – написать разметку макета, используя современные версии языка HTML. Это риск, ведь не все веб-системы смогут прочитать закодированную информацию. Как результат – съедет верстка: размер кнопок станет большим, или, наоборот, маленьким; футер потеряется, а текст выйдет за пределы шаблона.

Чтобы не разочароваться в возможностях HTML-верстки и сделать email-рассылку, которая откроется «без потерь», нужно использовать старые способы работы с кодом – те, что разработали в 1990-х годах.

Как верстать HTML-шаблон?

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

В коде обозначают и ширину письма. Оптимально – поставить 600 пикселей. Этот размер хорошо «подстраивается» под экраны разных диаметров.

Есть рекомендации и по размеру шрифта – 13 пикселей и больше. Меньше ставить не нужно, иначе на смартфоне шрифт будет мелким. Человек не сможет его прочитать.

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

Шрифты лучше использовать общепринятые: Arial, Times New Roman, Georgia, Tahoma и другие. Если вставите дизайнерский шрифт, есть риск, что он не отобразится у пользователя – это зависит от версии браузера и настроек почтовых программ. Тогда шрифт автоматически «переведут» в стандартный. Человек сможет прочитать текст, но, скорее всего, он съедет: ведь высота и ширина символов для каждого шрифта отличается.

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

Где сделать HTML-шаблон?

HTML-шаблон письма можно сделать на платформе для email-рассылок. Такая опция есть в Mailigen. Заходишь на платформу, кликаешь «Кампании – Шаблоны – Визуальный редактор».

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

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

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

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

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

Stripo

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

Stripo предлагает 300 бесплатных готовых HTML-шаблонов, которые можно экспортировать на вашу платформу для email-рассылок. Код сохранится – вы сможете отредактировать его в любой момент и изменить внешний вид рассылки. Чтобы правок было меньше, выбирайте в Stripo тематические шаблоны – для промо-писем, welcome-серии, уведомлений, брошенной корзины.

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

А такую для брошенной корзины магазина товаров для туризма:

Litmus Templates

Сайт с бесплатными готовыми HTML-шаблонами для welcome-цепочек, объявлений, уведомлений и других видов писем.

Такой макет Litmus предлагает для рассылки-квитанции:

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

В Litmus количество бесплатных HTML-шаблонов меньше, чем в Stripo, а дизайн не такой разнообразный. Для первых опытов подойдет, а профи уже будет скучно.

Behance

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

На чем остановимся?

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

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

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

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

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

 

Хочешь больше узнать про верстку? Нужен уникальный дизайн письма? Позвони или напиши на [email protected].

Рекомендуемые статьи

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

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

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

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

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

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

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

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

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

Если вы посмотрите на текст выше, то увидите, что я добавил в электронное письмо параметр? Subject = и что в строке темы будет указано «I love TextFixer.com»

Электронный HTML-код с темой и телом

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

Примечание. не включайте вопросительный знак, знак равенства, амперсанд или двойные кавычки в строке темы или тексте сообщения, так как это нарушит код. Если вам все же нужно включить их, их нужно написать по-другому. Вы можете запомнить следующий код — амперсанд — это & ​​amp; — двойные кавычки — & quot; — знак равенства — & # 61; и вопросительный знак — & # 63;

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

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

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

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

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

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

Word и языковые инструменты

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

Руководство по электронной почте в формате HTML: создание шаблонов с нуля

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


.

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

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

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

Определите зрительские привычки вашей аудитории.

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

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

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

В этих отчетах вы ищете наименьший общий знаменатель. Если, например, 30% используют Lotus Notes 7, вам необходимо убедиться, что вы специально протестировали этот клиент перед отправкой.Конкретная версия почтового клиента может быть актуальной — Outlook 2003 доставит вам гораздо меньше головной боли, чем Outlook 2007, и в некоторых случаях в вашем списке может использоваться только одна версия.

Если вы никогда раньше не попадали в этот список, возможно, вам просто нужно протестировать каждого клиента, которого вы можете найти, и сделать некоторые обоснованные предположения о том, с какой аудиторией вы имеете дело. Скорее всего, они будут использовать мобильные телефоны для чтения электронной почты или заблокировать корпоративные серверы? Может быть, все они используют Outlook.com и Yahoo, которые, по крайней мере, легко проверить. Что бы вы ни знали о своей аудитории, сделайте себе заметки о том, какие почтовые клиенты вы хотите проверять больше всего при каждой отправке.

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

Положитесь на таблицы — и не только на данные.

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

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

.

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

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

1. Установите ширину в каждой ячейке, а не в таблице.

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

  

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

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

2. Разместите столы для обеспечения равномерного интервала.

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

3. Установите цвет фона на контейнерном столе.

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

4. Пробелы имеют значение.

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

Использовать встроенный CSS.

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

В настоящее время единственным крупным почтовым клиентом, который удаляет все другие типы CSS, встроенные теги

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

1-2-3

ДОМ | ССЫЛКА 1 | ССЫЛКА 2 | ССЫЛКА 3

Fusce Interdum

Donec in lacus in ante facilisis dignissim quis auctor elit.Praesent hendrerit ligula sit amet torpis fringilla, ut hendrerit turpis fringilla. Maecenas nec sapien lacinia, mollis nisi ut, euismod turpis.

Curabitur cursus metus hendrerit iaculis laoreet. Vivamus risus felis, соллиситудин и ipsum eu, placerat laoreet massa. Phasellus eget justo luctus, facilisis urna lobortis, Conctetur tellus. Nunc quis euismod purus, dapibus condimentum enim.

Заголовок побочного содержимого

Ссылка 1
Ссылка 2
Ссылка 3

Здесь размещаются текст нижнего колонтитула и ссылки.

ОТПРАВИТЬ ИНСТРУКЦИЮ / ССЫЛКУ

СВЯЗАТЬСЯ С НАМИ:
ФРЕД ФЛИНСТОУН
BEDROCK GRAVEL, INC
123 СКАМЬЯ RD
БЕДРОК, NY 11111

В строках 21, 56 и 78 уведомления эти таблицы помечены тегами class = "email" или class = "email-content".Это последнее изменение гарантирует, что наша электронная почта будет хорошо отображаться на телефонах.

Как видите, мы также добавили базовый HTML-код для верхней и нижней части писем, а также блок кода стиля CSS:

 

 Проект Help Kids Code | Как закодировать электронное письмо в формате HTML 






... электронный код / ​​содержание здесь ...



 

Блок кода стиля CSS - это стандартное объявление @media, в строке 7. Любое устройство с шириной экрана менее 480 пикселей изменит ширину ваших таблиц с тегами class = ”email” и class = ”email-content ”До 320 пикселей в ширину и используйте обозначение! Important, чтобы принудительно изменить это изменение, в строке 9. Этот стиль также установит для таблиц освобождение пространства как слева, так и справа, чтобы содержимое правого столбца скользило вниз на экранах телефонов.Мы также можем установить здесь размер шрифта, если необходимо, или любой другой стиль, предназначенный для дисплеев телефонов.

Также обратите внимание, что мы используем нотацию table [class = email], чтобы обойти проблему, связанную с чтением объявлений CSS в почте Yahoo.

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

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

  • Оболочка, которая описывает электронное письмо и содержит как электронное письмо в формате HTML, так и текстовое сообщение электронной почты версии
  • Электронное письмо в формате HTML
  • Текстовая версия письма

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

Шаг 6. Проверьте и настройте электронную почту

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

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

Одна ключевая деталь, которую следует помнить о тестировании: постепенная деградация - это цель, а не совершенство. Хотя теоретически можно закодировать электронную почту так, чтобы она отображала идеальный пиксель во всех возможных программах электронной почты, некоторые программы электронной почты могут не стоить усилий по настройке кода в течение нескольких часов. Например, возможно, стоит установить размер шрифта и цвет ссылки в Gmail, но не утруждать себя установкой значений шрифта для Lotus Notes, если Notes игнорирует ваш код и отображает шрифт по умолчанию. В среднем у меня уходит три или четыре часа, чтобы написать, протестировать и настроить электронную почту на основе файла JPEG или Photoshop.Это должно быть вашей максимальной целью потраченного времени.

При кодировании электронной почты используйте веб-браузеры Chrome и Firefox, чтобы проверить, насколько хорошо отображается ваша электронная почта. Когда ваш код будет завершен и будет хорошо отображаться в этих браузерах, вы можете протестировать в Windows, есть ли у вас компьютер с Windows. В частности, проверьте свою электронную почту в Internet Explorer 7 (или 8), чтобы увидеть, есть ли у вас какие-либо проблемы. Тестирование в этих старых браузерах Windows помогает выявить проблемы, с которыми вы можете столкнуться в Outlook 2003, 2007 и 2010.

Убедившись, что ваш код отлично отображается хотя бы в Chrome и Firefox, попробуйте сервис тестирования электронной почты. Самый простой способ найти его - воспользоваться службой доставки электронной почты. MailChimp и CampaignMonitor предлагают тесты бесплатно или за небольшую плату.

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

Я также хотел бы указать вам на один или оба курса Lynda.com, которые я создал, особенно если вы уже подписались на их услуги. Мои курсы включают в себя, как кодировать электронную почту, а также полезные темы, которые на самом деле не освещаются где-либо еще в Интернете, например, как создавать текстовые электронные письма, как электронные письма на самом деле выглядят как код и как автоматизировать создание электронных писем с помощью WordPress и Expression Engine.

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

Узнать больше

CodeHTMLEmail.com

Наконец-то я создал веб-сайт, посвященный этой теме, если вы хотите узнать больше от меня и других.
http://www.codehtmlemail.com

Fogbuz: отзывчивые электронные письма в формате HTML: другая стратегия

Другой способ кодирования электронной почты в формате HTML: в виде электронной почты с одним столбцом. В статье есть много интересных ссылок для дополнительных исследований. Однако их образец кода на Github заставляет вас задуматься, как кодировать содержимое электронной почты.Вот почему эта статья существует.
http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/
https://gist.github.com/tinabeans/6996367

Руководство по поддержке CSS в электронном письме

http://www.campaignmonitor.com/css/

Монитор кампании: адаптивный дизайн электронной почты

http://www.campaignmonitor.com/guides/mobile/

MailChimp: электронная почта на мобильных устройствах

http://mailchimp.com/resources/guides/email-on-mobile-devices/
https: // github.com / mailchimp / Email-Blueprints

Руководство по электронному маркетингу

http://mailchimp.com/resources/guides/email-marketing-field-guide/

Litmus: Адаптивный и масштабируемый дизайн электронной почты: в чем разница?

http://litmus.com/blog/responsive-scalable-email-design-whats-the-difference

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

Обязательно тщательно протестируйте любой код на большом количестве старых и новых почтовых программ.
http: // www.emailaudience.com/responsive-design-for-mobile-email-ooh-shiny
http://blog.lyris.com/us/email-inspiration-six-great-responsive-email-designs/
http: // www .zurb.com / игровая площадка / responseive-email-templates
http://notes.envato.com/general/responsive-email-templates-2/
http://marketingland.com/four-responsive-email-layouts- 15858
http://marketingland.com/learning-by-example-9-more-responsive-emails-25864
http://marketingland.com/responsive-email-layout-patterns-29378

Lynda.com Курсы кодирования электронной почты HTML

Два курса, которые мне посчастливилось создать для Lynda.com. Однако вы должны заплатить, чтобы пользоваться их услугами. Оказывается, стоит подписаться на их услуги, учитывая, сколько обучения они предлагают. Я действительно попытался включить много материалов, которых нет в других местах в Интернете, по теме кодирования электронной почты в формате HTML, например, о создании шаблонов в WordPress и Expression Engine для автоматического создания электронных писем и о том, как создавать текстовые электронные письма.
http: // www.lynda.com/Business-Online-Marketing-SEO-tutorials/Creating-an-HTML-Email-Newsletter/94626-2.html
http://www.lynda.com/Business-Online-Marketing-SEO-tutorials/ Effective-HTML-Email-and-Newsletters / 76981-2.html
http://www.lynda.com/Tim-Slavin/850027-1.html

Добавьте фоновое изображение в электронную почту за два простых шага

http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/

Оптимизация электронной почты для мобильных устройств с помощью запроса @media

http: // www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

Образец письма "Присоединяйтесь ко мне"

Случайное электронное письмо в формате HTML, которое я сохранил, а затем очистил. Код может или не может следовать всем правилам в этой статье. Следовательно, это может вас заинтересовать в качестве примера. Любое электронное письмо в формате HTML можно сохранить локально на вашем компьютере, но для тщательной очистки кода потребуется время и терпение.
https://www.kidscodecs.com/files/join-me-email-clean.html

Лорем Ипсум

Основанный на книге Цицерона de Finibus Bonorum et Malorum (Крайности добра и зла), написанной в 45 г. до н.э., этот фиктивный текст использовался типографами и издателями с 1500-х годов.
http://www.lipsum.com
http://www.gutenberg.org/files/29247/29247-h/29247-h.html
http://en.wikipedia.org/wiki/Lorem_ipsum

Как создавать ссылки Mailto в HTML

Ссылки Mailto используются для перенаправления на адрес электронной почты вместо URL-адреса веб-страницы. Когда пользователь щелкает ссылку Mailto, открывается почтовый клиент по умолчанию на компьютере посетителя и предлагает отправить сообщение на адрес электронной почты, указанный в ссылке Mailto.

Чтобы создать ссылку Mailto, вам необходимо использовать HTML-тег с его атрибутом href и вставить после него параметр «mailto:», например:

   Отправить электронное письмо   

Если вы хотите получать электронное письмо на несколько адресов, разделите адреса электронной почты запятыми:

   Отправить электронное письмо   

Следующие поля можно заполнить заранее: ¶

  • тема - для строки темы,
  • cc - для отправки копии,
  • bcc - для отправки скрытой копии,
  • body - для основного текста сообщения.

Если вы хотите иметь поле темы, которое уже заполнено, добавьте параметр «тема» в атрибут href:

   Отправить электронное письмо   

Чтобы добавить копию и скрытую копию к своему электронному письму, используйте параметр« cc »или« bcc »в атрибуте href:

   Отправить электронное письмо   

Чтобы добавить основной текст, используйте параметр" body "с другими параметрами:

   Отправить электронное письмо   

Собрав все вместе, мы получим следующий пример.

Пример создания ссылки mailto: ¶

  

  
    <стиль>
      .основное содержание {
        ширина: 60%;
        высота: 400 пикселей;
        отступ: 20 пикселей;
        высота строки: 28 пикселей;
      }
      нижний колонтитул {
        отступ: 10 пикселей 20 пикселей;
      }
      a {
        цвет: # 00aaff;
      }
    
  
  
    

Это сообщение

Мы рады сообщить, что у нас появилась новая функция под названием сниппеты. Фрагмент - это программный термин, обозначающий небольшой фрагмент многократно используемого исходного кода или текста.Как вы можете видеть ниже, есть следующие разделы фрагментов: AngularJS, CSS, HTML, JavaScript, Linux, NodeJs, PHP и Symfony. В будущем мы планируем добавить больше сниппетов, а также их разделов.

<нижний колонтитул>

Автор: команда W3docs

По вопросам: Отправить письмо <адрес> Верин Антарайин ул.160/6
Ереван, РА
(+374) 95-588689

Попробуйте сами »

Оборотная сторона ссылок Mailto¶

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

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

Вот пример HTML-кода электронной почты

Хороший редактор электронной почты необходим для работы с кодом электронной почты HTML

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

& nbsp;

Информационный бюллетень, как и наш блог, будет содержать ресурсы об Интернет-маркетинге и общую информацию.

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

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

Однако есть более простой и эффективный способ разработки и рассылки электронных кампаний вашим клиентам - использование профессиональных услуг электронного маркетинга.Benchmark Email - это служба электронного маркетинга, которая предлагает редактор WYSIWYG («Что видишь, то и получаешь»), который упрощает создание электронных писем для всех, независимо от того, сколько HTML вы знаете.

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

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

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

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

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

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

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

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

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

См. HTML-шаблон электронного письма Pen от HubSpot Кристины Перриконе (@hubspot) на CodePen.

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

Как создать электронное письмо в формате HTML

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

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

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

Все еще хотите создать электронное письмо в формате HTML с нуля?

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

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

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

Разрабатываете электронное письмо в формате HTML специально для HubSpot?

Если вы разрабатываете шаблон электронной почты HTML специально для использования в HubSpot, вам нужно убедиться, что вы включили необходимые токены HubL (они гарантируют, что ваши электронные письма могут быть настроены и соответствуют законам CAN-SPAM).Вы можете найти полное руководство по написанию HTML-шаблонов электронной почты для HubSpot здесь. Или, как альтернатива, просто воспользуйтесь нашим простым редактором электронной почты «что видишь, то и получаешь».

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

  1. Убедитесь, что ваше электронное письмо в формате HTML соответствует разным размерам экрана и устройствам.
  2. Убедитесь, что ваш стиль работает в разных почтовых клиентах.
  3. Помните, сколько времени требуется для загрузки ваших HTML-сообщений.
  4. Запланируйте (как можно больше) на случай несогласованности конечных пользователей.
  5. Проведите тщательное тестирование.

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

1.Убедитесь, что ваше электронное письмо в формате HTML адаптируется к разным размерам экрана и устройствам.

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

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

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

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

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

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

2. Убедитесь, что ваш стиль работает в разных почтовых клиентах.

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

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

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

3. Помните, сколько времени требуется для загрузки ваших HTML-сообщений.

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

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

Умеренно используйте изображения.

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

Используйте стандартные веб-шрифты.

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

Попробуйте минификатор HTML.

Минификатор HTML (например, minifycode.com и smallseotools.com) автоматически удаляет код, который не нужен в файле HTML. Повторяющиеся, лишние элементы будут удалены, но фактическое отображение вашего электронного письма должно остаться прежним (всегда проверяйте это!).Каждая строка кода влияет на время загрузки электронного письма, поэтому время, необходимое для удаления нежелательного кода, может положительно сказаться на времени загрузки.

Сосредоточьте свое сообщение на единственной цели.

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

4. Планируйте (как можно больше) на случай несогласованности конечных пользователей.

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

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

Но вы не должны быть полностью беспомощными перед этими переменными - вам просто нужно сделать небольшое предварительное планирование.

Подумайте о создании версии электронной почты в виде веб-страницы.

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

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

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

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

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

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

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

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

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

5. Проведите тщательное тестирование.

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

Некоторые инструменты электронной почты (например, HubSpot) предлагают тестирование в приложении в своих конструкторах электронной почты, чтобы упростить процесс. Если вы работаете с нуля, вы можете использовать такой инструмент, как HTML Email Check или PreviewMyEmail, чтобы лучше понять, как ваша электронная почта будет выглядеть в различных почтовых клиентах и ​​устройствах.

Простые и бесплатные шаблоны электронной почты в формате HTML

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

1. Бесплатный HTML-шаблон электронной почты HubSpot

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

2.HTML-шаблон электронного письма с новостями компании от Campaign Monitor

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

3. Бесплатный шаблон электронного письма в формате HTML от Unlayer

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

4. Бесплатный шаблон электронной почты MINImalist в формате HTML

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

5. Бесплатные шаблоны электронной почты HTML от Bee Free

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

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

6. Бесплатный шаблон электронного письма в формате HTML от Campaign Monitor

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

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

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

Примечание редактора: этот пост был первоначально опубликован в июне 2019 года и был обновлен для полноты.

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

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

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

Во-первых, в качестве иллюстрации, если вы просто скопируете и вставите этот код в тело электронного письма, вот как оно будет отображаться в Outlook:

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

Есть три шага, которые вы можете выполнить, чтобы отобразить код в вашем электронном письме:

1.Оберните код в теги

.

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

3. Закодируйте скобки тегов, которые вы хотите отобразить.

Вот как выглядит каждый шаг:

Примечание. Для доступа к исходному коду электронной почты вам потребуется бесплатный стиль ClickDimensions, блочный или пользовательский редактор HTML. Это невозможно сделать с помощью редактора перетаскивания.

Оберните код в теги

.

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

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

Это в сочетании со следующим шагом гарантирует, что Outlook, Gmail и Yahoo интерпретируют теги как отображаемый текст, а не как теги, которые влияют на структуру электронного письма:

Закодируйте скобки тегов, которые вы хотите отобразить .

Это в сочетании с предыдущим шагом гарантирует, что Outlook, Gmail и Yahoo интерпретируют скобки как символы, которые должны отображаться, а не как части тегов, которые вносят вклад в структуру электронного письма:

Примечание. Закодированные формы <и>: & lt; и & gt; соответственно.

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

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