Как верстать письма

2. Обязательные свойства для HTML-тегов

Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем. Их нужно использовать всегда во всех html тегах письма.
<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″>
border=»0″ — толщина рамки в пикселах;
cellpadding=»0″ — отступ от рамки до содержимого ячейки;
cellspacing=»0″ — расстояние между ячейками;
style=»margin:0; padding:0″ — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:
<a href=»#» style=»color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;» target=»_blank»></a> <span style=»color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;»></span>
color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
-webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
display: block — делает строчный элемент блочным:
<img src=»#» alt=»» border=»0″ width=»100″ style=»display:block;»/>

alt=»» — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
border=»0″ — толщина рамки в пикселях (px);
width=»100″ — ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=»100″. Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=»30″ и она будет пропорционально менять и высоту и ширину;
display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

11. Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:
1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:
Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку. Также необходимо указать нужные стили для ссылок.
Для телефона:
<a href=»tel:0­ 8­00 3­03 5­05″ value=»+380800303505″ target=»_blank» style=»»>0­ 8­00 3­03 5­05</a>
Для электронной почты:
<a href=»mailto:exemple@gmail.com» target=»_blank» style=»»>exemple@gmail.com</a>
2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=»100%» и для td прописать height=»100%». Пример:
<table bgcolor=»#000000″ border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″ width=»100%»> <tr> <td height=»100%»>
Не нужно задавать таблице height=»100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.
3. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height.
display: block;» — решает проблему отображение свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

13. Адаптивная верстка

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

<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″> <tr> <td> <center style=»max-width: 600px; width: 100%;»> контент письма </center> </td> </tr> </table>
Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями:
<span style=»display:inline-block; width:260px;»> Контент блока </span>
Общая структура разметки будет выглядеть следующим образом:
<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″ width=»100%»> <tr> <td> <center style=»max-width: 600px; width: 100%;»> <table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″ width=»100%»> <tr> <td> <!— Блок номер 1 —> <span style=»display:inline-block; width:300px;»> Контент блока </span> <!— Блок номер 1 —> <!— Блок номер 2 —> <span style=»display:inline-block; width:300px;»> Контент блока </span> <!— Блок номер 2 → </td> </tr> </table> </center> </td> </tr> </table>
Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.
Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы:
<table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″ width=»100%»> <tr> <td align=»center»> <center style=»max-width: 600px; width: 100%;»> <!—> <table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″><tr><td> <!—> <table border=»0″ cellpadding=»0″ cellspacing=»0″ style=»margin:0; padding:0″ width=»100%»> <tr> <td> <!—> <table border=»0″ cellpadding=»0″ cellspacing=»0″> <tr><td align=»center»> <table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»300″ align=»center»><tr><td> <!—> <!— Блок номер 1 —> <span style=»display:inline-block; width:300px;»> Контент блока </span> <!— Блок номер 1 —> <!—> </td></tr></table> </td> <td align=»center»> <table border=»0″ cellpadding=»0″ cellspacing=»0″ align=»center»><tr><td> <!—> <!— Блок номер 2 —> <span style=»display:inline-block; width:300px;»> Контент блока </span> <!— Блок номер 2 —> <!—> </td></tr></table> </td> </tr></table> <!—> </td> </tr> </table> <!—> </td></tr></table> <!—> </center> </td> </tr> </table>
Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.
Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.

Основные проблемы верстки

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

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

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
  • Outlook 2000, 2002 и 2003 используют Internet Explorer.
  • Outlook 2007, 2010 и 2013 используют Microsoft Word (да-да, Word!).
  • Веб-клиенты, соответственно, используют движки браузера — например, Safari использует WebKit, а Chrome использует Blink.

Почтовые клиенты добавляют собственные стили, помимо тех, что были изначально выбраны разработчиком рассылки. Например, Gmail для всех шрифтов в <td>устанавливает значение. Также разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного CSS и media queries.

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

  • <table> вместо <div>
  • #FFFFFF вместо #FFF,
  • padding вместо margin,
  • CSS2 вместо CSS3,
  • HTML4 вместо HTML5,
  • background-color вместо background, также стоит использовать расширенные свойства, вроде padding-top;, padding-left; и другие,
  • фон цветом вместо фоновых изображений, а визуальные элементы через тег <img>,
  • HTML-атрибутов вместо CSS,
  • инлайн CSS вместо наборов стилей или блоков <style>.

Изображения и медиа

Следующая важная тема при верстке писем — работа с изображениями и медиа.

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

Поведение почтовых клиентов здесь весьма вариативно:

  • Outlook блокирует рендеринг изображений по умолчанию,
  • Apple Mail не блокирует,
  • Gmail не блокирует.

Важно включать alt-текст для всех используемых картинок — это поможет получателю письма понять, что должно было быть на месте изображений, если его email-клиент вдруг ему их не покажет. Для тега<img>можно прописать стилевые правила текста, например colorили font-family, которые будут применяться к alt-тексту.

Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.

Адаптивная верстка

  • Около половины всех писем в мире открывают с мобильных устройств, и эти цифры растут.
  • По данным проекта Email Client Market Share доля iPhone на рынке почтовых клиентов составляет 31%, у iPad 11%, а у Android 4% — это больше 45%, а ведь есть еще Windows Mobile и другие ОС.
  • Исследователи из MailChimp обнаружили, что число кликов на ссылки в адаптивных письмах за последнее время выросло почти на 15% — с 2,7 до 3,1%.

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

Закажите шаблон email рассылки!

Наш дизайнер сверстает шаблон под ваши потребности

Заказать шаблон

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

Одноколоночное письмо на десктопе и смартфоне

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

<table cellspacing=»0″ cellpadding=»0″ border=»0″ width=»600″> <!— тут текст письма —> </table> @media screen and (max-width:480px) { table { width: 100%!important; } }

Также нужно будет адаптировать размеры изображений и размер шрифта font-size — и все.

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

Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута align=»left» для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:

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

table { width: 600px; } table { width: 180px; } table { width: 30px; height:30px; } @media only screen and (max-width: 480px) { table { width: 420px!important; } table { width: 100%!important; } }

Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.

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

Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.

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

table { width: 600px; } table td { height:100px; width:200px; } @media only screen and (max-width: 480px) { table { width: 440px!important; } table td { width:100%!important; display: block!important; } }

Здесь можно поиграть с примером кода на Codepen.

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

Как сделать резиновую верстку

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

<!—> <table border=»0″ cellpadding=»0″ cellspacing=»0″ width=»640″ align=»center» style=»width:640px;»> <tr> <td> <!—> <div style=»margin:0 auto; max-width:640px;»> <able cellpadding=»0″ cellspacing=»0″ style=»width:100%;» align=»center» border=»0″> <tr> <td> …</td> </tr> </table> </div> <!—> </td> </tr> </table> <!—>

А вот более подробный пример кода.

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

Шаблон MJML представляет набор особых тегов разметки, которые после компиляции превращаются в обычную табличную верстку:

<mj-container> <mj-section> <mj-column> <mj-text> Hello World!</mj-text> </mj-column> </mj-section> </mj-container>

Неочевидные моменты в работе с текстом email

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

Не забывайте о текстовой версии письма

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

Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.

Прехедер сообщения очень важен

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

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

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

Для превью сообщений и тестирования прехедеров можно использовать этот инструмент от Остина Вудалла (Austin Woodall).

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

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

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