email учебник
Начало работы с электронной почтой
Поиск…
замечания
HTML-адрес электронной почты - это использование подмножества HTML и CSS для форматирования сообщения электронной почты, такого как веб-страница, с использованием цветов, графики, столбцов таблицы и ссылок.
Полезные ссылки:
HTML и обычный текст
HTML-адрес электронной почты - это использование подмножества HTML и CSS для форматирования сообщения электронной почты, такого как веб-страница, с использованием цветов, графики, столбцов таблицы и ссылок.
Когда вы отправляете электронное письмо, важно отправить как обычный текст, так и HTML. Вы делаете это, отправляя свою электронную почту как многочастный MIME. У большинства поставщиков услуг электронной почты есть инструменты для автоматической сборки MIME для вас. Некоторые из них будут генерировать текстовую версию на основе вашей версии HTML, а также сторонние инструменты .
Пример текстового письма:
# EMAIL TITLE GOES HERE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-1
---
## Subheader goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst.
Learn more: http://www.website.com/landing-page-2
---
Footer and Sender information
Unsubscribe here: http://www.website.com/unsubscribe
Обратите внимание, что с недавнего запуска Apple Watch появилась новая часть MIME: text/watch-html . Этот контент будет отображаться только в Apple Watch (и любых других клиентах, поддерживающих этот тип MIME).
Почтовые клиенты и рендер-двигатели
Клиенты электронной почты используют разные механизмы рендеринга для отображения электронных писем HTML:
- Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit
- Outlook 2000/02/03 использует Internet Explorer 6
- Outlook 2007/10/13 использует Microsoft Word
- Веб-клиенты используют соответствующий движок своего браузера (например, Safari использует WebKit, Chrome использует Blink)
Некоторые клиенты также добавят свои собственные стили поверх ваших, например, Gmail устанавливает все шрифты <td> в font-family: arial,sans-serif; , что может повлиять на отображение электронной почты.
До 2016 года все продукты Gmail лишали теги <link> , любые теги CSS внутри тегов <style> и любые другие CSS, которые не были включены. В конце 2016 года Gmail начала поддерживать <style> и медиа-запросы в большинстве своих продуктов. Вот обновление от 23 ноября 2016 года :
Основы (таблицы и встроенные CSS)
Таблицы для макета
Структура HTML-файла электронной почты похожа на структуру веб-страницы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a simple paragraph.</p>
</body>
</html>
Однако макет CSS на основе <div> не работает в электронной почте, как это делается в Интернете. Крупные почтовые клиенты либо не предлагают поддержки для таких вещей, как float и flexbox, или калечат ее по-разному. <div> s также имеют проблемы с позиционированием и коробкой в разных клиентах, особенно в Outlook. Существует несколько методов кодирования электронной почты с использованием только <div> s, но безопаснее придерживаться таблиц для макета.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation”>
<tr>
<td width="200">
<h1>Hello World!</h1>
</td>
<td width="400">
<p>This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
Встроенный CSS
Применение стиля inline придает приоритет более стилям (например, стили клиентов электронной почты), а также работает с почтовыми клиентами, которые вытесняют CSS из головных или внешних файлов CSS. Встроенный CSS - лучший способ обеспечить постоянный показ в каждом почтовом клиенте.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body style="background: #000000;">
<table cellspacing="0" cellpadding="0" border="0" width=”600” role=”presentation” style="margin: auto; background: #ffffff;">
<tr>
<td width="200" style="padding: 20px; background-color: #eeeeee;">
<h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">Hello World!</h1>
</td>
<td width="400" style="padding: 20px;">
<p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p>
</td>
</tr>
</table>
</body>
</html>
У вас есть несколько вариантов вложения CSS:
- Напишите CSS в строке, когда вы идете
- Использовать локальные фрагменты в редакторе
- Используйте веб-интерфейс CSS, как этот
- Используйте программный CSS-интерфейс, подобный этому
- Используйте процесс сборки, подобный этому, или язык шаблонов
- Позвольте вашему поставщику услуг электронной почты обработать инкрустацию для вас (если они ее поддерживают)
Кодирование электронных писем для всех почтовых клиентов
Используемый метод кодирования: гибридный / губчатый
Это был вечный миф о том, что div не может использоваться в электронных письмах. Есть почтовые клиенты (в отличие от Outlook), которые могут отображать div. Пример, приведенный ниже, иллюстрирует, как можно кодировать электронную почту, которая будет работать в приложении Gmail (пока обновления еще не развернуты), устройства Samsung и другие почтовые клиенты, которые не читают медиа-запросы.
Представление условных операторов Outlook
Условные заявления Outlook очень полезны, когда дело доходит до рендеринга электронной почты или показывается что-то конкретное, например, назад к Outlook.
<!--[if (gte mso 9)|(IE)]>
<![endif]-->
Вышеприведенный код читает, если он больше, чем Microsoft Outlook 9 или IE
Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15
Версии для условных операторов перечислены.
Запуск гибридного шаблона электронной почты
Каждый шаг объяснялся таким образом, что для всех, у кого есть базовые знания HTML, должно быть легко понять.
Сначала мы начинаем с таблицы-обертки, которая будет охватывать весь путь по экрану и с классом контейнера.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
После этого мы добавляем медиа-запрос для почтовых клиентов, которые не читают максимальную ширину, но читают CSS в заголовке. Медиа-запрос будет ориентирован на все экраны и отображает контейнер шириной 700 пикселей.
@media only screen and (max-width : 700px) {
.container{width:700px;}
}
Затем добавим условный оператор outlook, который удерживает таблицу (с контейнером класса) шириной 700 пикселей.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;">
<tbody>
<tr>
<td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE]</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Вышеприведенный код теперь должен содержать ваш шаблон в перспективе на ширину 700 пикселей.
Теперь для столбцов. Ниже код создаст два одинаковых столбца на шаблоне шириной 350 пикселей.
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="300">
<![endif]-->
<div style="width: 350px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>[COLUMN CONTENT HERE]</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
После этого предел будет только вашим воображением или дизайнером. Когда проекты выполняются, важно участвовать в стадии каркаса проводов, чтобы не было никаких сюрпризов, когда дизайн находится на стадии кодирования.
Замечания:
- Изображения Retina будут нуждаться в изображениях, установленных на уровне элемента не по его стилю <img src = "" width = "" ...
- Вы все же можете выбрать встроенный CSS или вы можете выбрать CSS в голове, только если все ваши клиенты поддерживают CSS в голове.
