Урок 3. Служебные элементы кода
Структуру письма вы изучили в прошлом уроке — сегодня вернемся к ней, но поговорим об этом уже на языке HTML: будем «расшифровывать» код письма.
Откройте код любой веб‑страницы и увидите, что она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. С письмами — такая же история.
Мы подготовили шаблон кода пустого письма, которым пользуемся сами. С его помощью и разберём основные элементы кода письма:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»
xmlns:v=»urn:schemas-microsoft-com:vml»
xmlns:o=»urn:schemas-microsoft-com:office:office»>
<head>
<!—[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]—>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ >
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge» />
<meta name=»x-apple-disable-message-reformatting»>
<title>-</title>
<style type=»text/css»>
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
@media only screen and (max-device-width: 620px), only screen and (max-width: 620px) {
.mob_100{
width:100% !important;
}
.mob_center{
text-align: center !important;
}
.mob_center_bl{
float:none !important;
display: block !important;
margin: 0 auto;
}
.mob_hidden{
display:none !important;
}
.mob_no_border{
border-right-width: 0px !important;
}
}
.mob_link a{
text-decoration:none;
color:#b1bac3;
}
.preheader{
display:none !important;
}
</style>
<style type=»text/css»>
@-ms-viewport{width:device-width}
</style>
</head>
<body style=»padding:0px;margin:0px;»>
<div id=»mailsub» class=»notification» align=»center» style=»word-break:normal;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;line-height: normal;»>
<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″ style=»line-height: normal;»>
<tr>
<td align=»center» bgcolor=»#ffffff»>
<!—[if (gte mso 9)|(IE)]>
<table width=»620″ border=»0″ cellspacing=»0″ cellpadding=»0″ style=»width:620px;»><tr><td>
<![endif]—>
<div style=»overflow:hidden;»>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%» style=»max-width: 620px;»>
<tr><td align=»center» style=»padding-right: 10px; padding-left: 10px;»>
<!—[if !mso]><!—>
<div class=»preheader» style=»font-size: 0px; color: #F6F7F9; line-height: 0px;»>
<span style=»font-family: Arial, Helvetica, sans-serif; font-size: 0px; color: #F6F7F9; line-height: 0px;»>прехедер ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀</span>
</div>
<!—<![endif]—>
<!—header—>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>
<tr><td align=»center»>
</td>
</tr>
</table>
<!—header END—>
<!—body—>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>
<tr><td align=»center»>
</td></tr>
</table>
<!—body END—>
<!—footer—>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>
<tr><td align=»center»>
</td></tr>
</table>
<!—footer END—>
</td></tr>
</table>
</div>
<!—[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]—>
</td></tr></table>
</div>
</body>
</html>
Кстати, вы можете скопировать этот код и использовать его в своей работе [да, это бесплатно 🙂 ]. А теперь по порядку.
Информация о странице
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
С этим элементом вы уже знакомы — он указывает версию HTML, которая будет использоваться в вёрстке.
<html xmlns=»http://www.w3.org/1999/xhtml»
xmlns:v=»urn:schemas-microsoft-com:vml»
xmlns:o=»urn:schemas-microsoft-com:office:office»>
Этот атрибут xmlns тега html [без которого, как вы помните, не обойтись] позволяет работать с VML [Vector Markup Language — язык векторной разметки, англ.]. Здесь параметр vml используется специально для Outlook и даёт нам больший контроль над некоторыми элементами электронной почты.
Кстати, для вёрстки писем знать язык VML необязательно, но мы ещё затронем эту тему более подробно в одном из следующих уроков.
<head>
Уже знакомый вам открывающий тег заголовка, который передаёт информацию о странице.
<!—[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]—>
У почтовых клиентов Outlook есть свои особенности, в том числе проблемы с масштабированием DPI [Dots Per Inch — точки на дюйм, англ.]. Этот фрагмент кода предназначен для всех клиентов Outlook и помогает предотвратить масштабирование изображения, вызывающее проблемы с рендерингом.
Кстати, без vml, которую мы рассмотрели выше, этот код не будет работать.
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ >
Тег <meta> определяет метатеги [теги, которые несут в себе информацию о содержании электронной почты]. Фактически значение Content-Type указывает на тип кодировки документа [utf-8 — это и есть кодировка].
Существует множество различных тегов <meta>, но мы сосредоточимся на тех, которые дают прочную основу для вёрстки писем.
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
Атрибут name — имя метатега. Viewport — это область страницы, видимая пользователю без прокрутки. Таким образом мы сообщаем браузеру, как именно обрабатывать размер страницы и менять её масштаб.
Здесь width — это ширина области просмотра. Значение device-width задаёт ширину страницы в соответствии с размером экрана. Его также можно задать целым числом от 200 до 10 000 пикселей. Initial-scale определяет начальный масштаб страницы [от 0.1 до 1.0], где 1.0 — масштаб 1:1 [то есть не масштабируемый].
<meta http-equiv=»X-UA-Compatible» content=»IE=edge» />
Хак для поддержки Outlook. Если конкретней, то X-UA-Compatible указывает версию браузера Internet Explorer [в данном случае edge] и призывает браузер работать в определённом режиме документа.
<meta name=»x-apple-disable-message-reformatting»>
Этот хак помогает решить проблему с автомасштабированием писем в iOS 10 и iOS.
Перечисленные выше метатеги — это всё стандартная история, которая не меняется от письма к письму. С ними разобрались, поехали дальше.
<title>…</title>
Определяет заголовок документа. Сам элемент не показывается на веб‑странице — его содержимое можно увидеть в названии вкладки, открытой в браузере. В вёрстке писем сюда принято вписывать тему письма, чтобы пользователь мог её увидеть при открытии имейла в веб‑версии.
Стили и медиа‑запросы
<style type=»text/css»>
Уже знакомый вам открывающий тег <style>, который задаёт CSS-стили для медиа‑запросов. Атрибут type сообщает браузеру, какой синтаксис использовать, чтобы правильно распознать стили.
html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
Эта строка необходима, чтобы движок WebKit не менял размер текста и письмо отображалось корректно.
@media only screen and (max-device-width: 620px), only screen and (max-width: 620px) {
.mob_100{
width:100% !important;
}
.mob_center{
text-align: center !important;
}
.mob_center_bl{
float:none !important;
display: block !important;
margin: 0 auto;
}
.mob_hidden{
display:none !important;
}
.mob_no_border{
border-right-width: 0px !important;
}
}
В этом блоке мы используем встроенную таблицу стилей для включения медиа‑запросов. Это команды, которые адаптируют контент под разрешение экрана. Для этого чаще всего используется запрос max-width.
Когда медиа‑запрос обнаружит любую ширину меньше указанной максимальной, все CSS-коды в запросе вступят в силу. Это позволяет, например, изменять размер заголовков, чтобы они лучше подходили для мобильных устройств.
В @media можно указывать определённые типы устройств: all [все], print [печать], speech [для программ чтения с экрана] и screen [для устройств с экранами]. Для имейл‑писем за редким исключением используется последний.
Разберём по порядку классы медиа‑запросов и что делают прописанные в них стили:
- .mob_100 делает ширину контейнера 100%;
- .mob_center выравнивает текст по центру;
- .mob_center_bl выравнивает по центру блок;
- .mob_hidden скрывает блок;
- .mob_no_border скрывает границы блоков.
Обратите внимание на !important — об этом объявлении мы говорили в первом уроке. Здесь как раз та ситуация, где мы используем смену приоритета: инлайн‑стили не работают с CSS-свойствами, пока не прописано это объявление.
Эти медиа‑запросы в письмах мы используем сами, но всё зависит от того результата, который вы хотите получить. В код можно добавлять и другие классы — для этого совершенствуйте свой язык CSS 😉
.mob_link a{
text-decoration:none;
color:#b1bac3;
}
.preheader{
display:none !important;
}
</style>
Здесь имя класса .mob_link с селектором a убирает подчёркивание у всех ссылок в документе, делая их серыми. Дело вот в чём: Google, например, автоматом подчёркивает как ссылку то, что ему кажется ссылкой. Чтобы этого избежать, нужно добавить имя класса .mob_link к тегу <span> и прописать необходимые для текста стили.
Дальше идёт .preheader — он скрывает прехедер. И закрывающий тег </style>.
<style type=»text/css»>
@-ms-viewport{width:device-width}
</style>
</head>
Следующий медиа‑запрос используется для настройки ширины прокрутки экрана в Outlook, которая будет подстраиваться под ширину устройства [device-width]. После этого тег </head> закрывает информацию о странице.
Теперь поговорим о содержимом письма.
Тело письма
Хотя основной код будет сильно различаться для каждой рассылки, есть несколько элементов, которые необходимо включить в каждый имейл.
<body style=»padding:0px;margin:0px;»>
В атрибут style тега <body> записываются стилевые свойства. Конкретно эта строчка обнуляет внешние и внутренние отступы нашей таблицы.
Дело в том, что разные движки показывают одни и те же элементы по‑разному. Чтобы этого не произошло и письмо на разных устройствах выглядело одинаково красиво, мы устанавливаем значения отступов padding и margin на 0.
<div id=»mailsub» align=»center» style=»word-break:normal;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;line-height: normal;»>
Мы также оборачиваем всё письмо в тег <div> [блочный элемент, с помощью которого можно выделить фрагмент документа, чтобы изменить в нём содержимое]. Чтобы избавиться от больших отступов, которые делает Mail.ru, добавляем id=»mailsub». Атрибут align выравнивает содержимое контейнера по центру.
Дальше идут стили: word-break переносит слова на другую строчку через разбивку по слогам [в значении none, соответственно, ничего переноситься не будет]; -webkit-text-size-adjust и -ms-text-size-adjust не дают изменится размеру текста на разных движках; line-height отвечает за межстрочный интервал.
Общая таблица
С помощью открывающего тега <table> задаём начало таблицы:
<table width=»100%» border=»0″ cellspacing=»0″ cellpadding=»0″>
Из этой строчки понятно, что таблица имеет ширину 100%, а её границы не видны [border=»0″]. Атрибут cellspacing задаёт расстояние между внешними границами ячеек, а cellpadding — расстояние между границей ячейки и её содержимым. Как видим, здесь всё по нулям.
<tr>
<td align=»center» bgcolor=»#ffffff»>
Уже знакомый вам <tr> задаёт строку, а <td> — ячейку. Здесь контент в ячейке расположен по центру, а фон [bgcolor] залит белым цветом.
<div style=»overflow:hidden;»>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%» style=»max-width: 620px;»>
Теперь нужно сузить нашу таблицу до 620px, где 600px — стандартная ширина письма, а 10px с обеих сторон — минимальные отступы, чтобы контент «не прилипал» к краям. Кстати, такие отступы в кругу верстальщиков зовутся «ушками».
Свойство overflow указывает на то, как должно вести себя содержимое блочного элемента, если его размер превышает допустимую длину или ширину. Значение hidden означает, что такое содержимое не будет отображаться.
Дальше идёт наша таблица, но уже суженная до 620px с помощью значения max-width [максимальная ширина контейнера]. Так как width установлен на 100%, наша таблица стремиться занять всё доступное ей пространство, но не больше 620px.
Вот только Outlook не знает свойства max-width, он видит только width=»100%». Поэтому для него мы прописываем условные комментарии [комментарии, которые читает только Outlook]:
<!—[if (gte mso 9)|(IE)]>
<table width=»620″ border=»0″ cellspacing=»0″ cellpadding=»0″ style=»width:620px;»>
<tr><td>
<![endif]—>
Здесь <!—[if (gte mso 9)|(IE)]> — начало условного комментария, которое говорит, что этот фрагмент кода для Outlook. А <![endif]—> закрывает комментарий. В общем, всё что находится между <!—…—> будет считываться как условный комментарий.
Как это работает: Outlook видит условный комментарий, в котором мы как бы создаём копию нашей таблицы, невидимую для других почтовиков. И в неё «загоняем» контент.
Это важно: если не прописать такой условный комментарий, в Outlook письмо растянется на всю ширину экрана.
Итак, таблицу сузили до 620px. Что дальше:
<tr><td align=»center» style=»padding-left: 10px;padding-right: 10px;»>
В уже суженной таблице указываем атрибут align, который располагает весь контент по центру. Padding-left и padding-right задают те самые отступы по 10px, чтобы контент «не прилипал».
Дальше идёт прехедер.
Прехедер
Придумать крутой прехедер — задача копирайтера. Мы же поговорим о том, как написать его код. Стандартная запись для всех прехедеров:
<!—[if !mso]><!—>
<div class=»preheader» style=»font-size: 0px; color: #ffffff; line-height: 0px;»>
<span style=»font-family: Arial, Helvetica, sans-serif; font-size: 0px; color: #F6F7F9; line-height: 0px;»>прехедер</span>
</div>
<!—<![endif]—>
Начинается она с комментария для Outlook <!—[if !mso]><!—>, чтобы почтовый клиент смог распознать прехедер. Далее идет блок <div> с классом preheader и свойствами, которые мы все обнуляем [чтобы прехедер наверняка не было видно].
Прехедеры бывают видимые и невидимые. Видимый прехедер — то, что вы видите в папке «Входящие» после темы письма. Невидимый — это заглушка, которая на даёт контенту письма попасть в инбокс на место прехедера:
Тег <span> определяет стиль текста, далее прописывается сам прехедер. Но текст прехедера может быть коротким, и тогда за ним подтянутся другие элементы письма. Чтобы этого избежать, добавляем в текст прехедера пробелы. В итоге запись выглядит так:
<!—[if !mso]><!—>
<div class=»preheader» style=»font-size: 0px; color: #F6F7F9; line-height: 0px;»>
<span style=»font-family: Arial, Helvetica, sans-serif; font-size: 0px; color: #F6F7F9; line-height: 0px;»>прехедер ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀</span>
</div>
<!—<![endif]—>
Да‑да, это всё символы неразрывного пробела в HTML, но в разных кодировках 🙂
Итак, общая таблица нашего письма готова. Дело осталось за малым [нет]: переходим к контенту нашего письма. Для удобства работы контент лучше разделить на три части: хедер, тело письма и футер.
Хедер:
<!—header—>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>
<tr><td align=»center»>
тут хедер
</td></tr>
</table>
<!—header END—>
Тело:
<!—body—>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>
<tr><td align=»center»>
тело письма
</td></tr>
</table>
<!—body END→
Футер:
<!—footer—>
<table border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»>
<tr><td align=»center»>
здесь футер
</td></tr>
</table>
<!—footer END—>
В следующем уроке будем учиться наполнять их контентом 😉
Квиз
- Что такое метатеги?
— Теги, которые несут в себе информацию о содержании веб‑страницы
— Теги, которые указывают на тип кодировки документа
— Теги, которые несут в себе информацию о содержании электронной почты
— Теги, которые видит только Outlook
- Что определяет viewport?
— Какой синтаксис использовать, чтобы правильно распознать CSS-стили
— Область страницы, видимая пользователю без прокрутки
— Заголовок документа, видимый во вкладке браузера
— Начало условного комментария
- Стандартная ширина письма…
— 500px
— 600px
— 620px
— 800px
- Что означает запись cellspacing=»0″ cellpadding=»1″?
— Расстояние между внешними границами ячеек — 1px, расстояние между границей и её содержимым — 0px.
— Верхняя граница таблицы равна 0px, нижняя — 1px.
— Расстояние между внешними границами ячеек — 0px, расстояние между границей и её содержимым — 1px.
— Верхняя граница таблицы равна 1px, нижняя — 0px.
- Тег <div> является…
— Строчным элементом
— Блочным элементом
— Строчно‑блочным элементом
Домашнее задание
Чтобы стать настоящим верстальщиком, нужна практика, практика и ещё раз практика! Поэтому теперь, когда вы больше погружены в HTML и технические особенности вёрстки, начинаем практиковаться. Итак, что нужно сделать:
- Откройте свой редактор кода и создайте в нём новый файл HTML.
- Полностью скопируйте HTML-код шаблона пустого письма в файл.
- Придумайте и пропишите тему и прехедер будущего письма.
- Удалите «обёртки» для хедера и футера письма.
- Сузьте таблицу тела письма до 600px [не забудьте про «ушки»] и сделайте границы шириной в 1px.
- Откройте файл с помощью браузера — так вы увидите результат своей работы. Посмотрите, как отображается вёрстка, и если что‑то сломалось — поправьте код.
- Прикрепите файл с полученным кодом в комментарии к заданию.