Гид по верстке адаптивных писем

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

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

• — толщина рамки в пикселях;
• — отступ от рамки до содержимого ячейки;
• — расстояние между ячейками;
• — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

• — всегда используем эти свойства для всех ссылок и , иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
• — тоже используем для всех ссылок и span, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
• — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
• — делает строчный элемент блочным:

• — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
• — толщина рамки в пикселях (px);
• — ширина картинки. Если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту . Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства и она будет пропорционально менять и высоту и ширину;
• — хак для Outlook, если не ставить display:block то Outlook добавит к картинке отступы.

Создание адаптивных шаблонов с колонками «от двух к одной»

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

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

Золотое правило вёрстки писем гласит: «Везде, где только можно, используйте HTML вместо CSS». Степень поддержки CSS различными почтовыми клиентами может значительно различаться, но все они одинаково работают с HTML. Например, атрибуты вроде align=”left” и cellpadding=”10” — гораздо более надежный инструмент, нежели их аналоги в CSS float: left; и padding: 10px;. Именно эти атрибуты будут использоваться при создании писем в формате «от двух к одной колонке».

Вот так подобное письмо может выглядеть в Outlook 2007:

В пример выше использована таблица-контейнер шириной 640px, которая содержит две таблицы 320px, формирующие колонки. У этих столбцов cellpadding=”20“ — это сделано для того, чтобы контент не прижимался к границам.

При вёрстке для веба обычно используют float:left;, чтобы выровнять столбцы. Однако вместо этого можно использоватьalign=”left”. Поскольку ширина таблицы-контейнера равняется или больше совокупной ширины двух вложенных таблиц, то использование HTML хорошо сработает. Ниже представлен упрощенный код подобного двухколоночного шаблона:

<table width="640" border="0" cellpadding="0" cellspacing="0"><tr>    <td>    <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">      <tr>        <td><p>Column Left Content</p></td>      </tr>    </table>    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">      <tr>        <td><p>Column Right Content</p></td>      </tr>    </table>    </td>  </tr></table>

Результат выглядит так:

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

<style type="text/css">    @media only screen and (max-device-width: 480px) {        table {             width:320px !important;        }    }</style><table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">

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

Онлайн-ресурсы для верстки писем

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

Можно использовать различные конструкторы для выполнения работы:

SendPulse

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

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

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

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

UniSender

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

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

NotiSend

NotiSend – редактор, в котором можно создавать письма адаптированные под различные экраны и устройства.

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

Внедряем CSS

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

Как добавить CSS в нашу рассылку? Есть 3 варианта.

1. Заключить тег style внутри head или body. Наверно, это один из самых простых и популярных способов, который прекрасно работает как в письмах, так и на страницах сайтов. Но главные его минут – это перегруженность кода, в результате чего становится сложно найти нужный элемент и отредактировать его. В общем, если хотите облегчить себе дальнейшую работу, второй и третий способы специально для вас.

2. «Прячем» стили CSS в отдельном файле и даем на него ссылку в HTML-документе с помощью тега link. Простой способ, стили подгружаются довольно быстро, основной код остается «прозрачным», понятным.

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

Отзывчивый email-дизайн

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

«Отзывчивый веб-дизайн» — это понятие придумал Итан Маркотт в 2010 году: «Сочетая резиновую модульную верстку и медиа-запросы CSS3, мы можем создавать дизайн, который подстраивается под любую форму дисплея».

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

До недавнего времени Gmail не поддерживал медиа-запросы. К счастью, с сентября 2016 года это изменилось. Однако, у некоторых клиентов это параметр остался прежним: Yahoo, Windows Phone 8 и Gmail для Android.

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

Резиновая верстка

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

.container { max-width: 600px; width: 100%;}

Отзывчивая и адаптивная верстка

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

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

Гибридная и эластичная верстка

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

Вот небольшой сниппет, который я использую в большинстве своих писем:

<!—><table align=»left» border=»0″ cellspacing=»0″ cellpadding=»0″ width=»100%»> <tr> <td align=»left» valign=»top» width=»50%»> <!—> <div class=»span-3″ style=»display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;»>…</div> <!—> </td> <td align=»left» valign=»top» width=»50%»> <!—> <div class=»span-3″ style=»display: inline-block; Margin-bottom: 40px; vertical-align: top; width: 100%; max-width: 278px;»>…</div> <!—> </td> </tr></table><!—>@media only screen and (max-width: 620px) { .span-3 { max-width: none !important; width: 100% !important; } .span-3 > table { max-width: 100% !important; width: 100% !important; }}

Отзывчивые изображения

Как я уже говорил, используйте ретина-изображения от 1.5× до 3× и впишите размеры в строку.

<img src=»https://www.smashingmagazine.com/wp-content/uploads/2016/11/logo.png» height=»100″ width=»600″ alt=»Основы верстки HTML-писем для веб-разработчиков»=»Company Logo» style=»max-width: 100%;»>

Нельзя полагаться на max-width: 100%; — некоторые клиенты игнорируют этот параметр. Вам также пригодятся следующий кусочек кода:

@media only screen and (max-width: 620px) { img { height: auto !important; max-width: 100% !important; width: auto !important; }}

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

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

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

Общая структура разметки будет выглядеть следующим образом:

Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер #2 становится под блоком номер #1. Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега и подставлять обычные таблицы:

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

Какие клиенты поддерживают media queries, а какие нет:

Памятка маркетолога

• Определитесь с форматом письма, каким оно будет: стандартным и простым или сложным и креативным. Письма со сложной структурой отдавайте дизайнеру и верстальщику. Простые письма собирайте в редакторе сервиса рассылки, они адаптируются по умолчанию.
• Проверяйте результат во встроенном редакторе и, если позволяет бюджет, на сторонних сервисах. Принимая письмо у верстальщика, просите скриншоты, которые подтверждают, что письмо отображается корректно — по крайней мере, в популярных почтовых клиентах и популярных браузерах.
• Обязательно просмотрите письмо через личную почту, хотя бы в основных почтовых клиентах и с актуальных моделей смартфонов на iOS и Android.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Читать еще 

• Гид по верстке адаптивных писем
• Основы верстки HTML-писем для веб-разработчиков
• Сразу под шапкой: как правильно сделать прехедер

Обучение

• Бесплатный курс «Курс молодого бойца: первые шаги в digital»
• Программа обучения «Email-маркетинг: увеличиваем продажи и расширяем клиентскую базу»
• Офлайн-курс «Директор по онлайн-маркетингу»
• Офлайн-курс «Руководитель digital-продукта»

MIME Multipart

Обычное текстовое письмо — это просто текст. HTML-письмо — это просто HTML. Большинство писем, которые вы посылаете и получаете — это MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения интернет-почты). Этот стандарт комбинирует текст и HTML, так что получатель сам решает, какой тип отображать.

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

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

Совет: Выберите пункт «Показать оригинал» из выпадающего меню в Gmail, чтобы увидеть полный MIME.

Безопасные универсальные шрифты

Конечно, наш скелет не подходит для отправки подписчикам. Как минимум, мы использовали скучные шрифты, которые напоминают пользователям о школьных рефератах в стиле Microsoft Office Word.

Чтобы выделиться среди конкурентов, одного только качественного контента недостаточно

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

Выбор шрифта отыгрывает здесь не последнюю роль.

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

Безопасные шрифты

Проблемы при рассылках на Gmail и Hotmail

В этих популярных почтовых клиентах часто проявляются различные эффекты при отображении рассылок. Иногда их стиль отличаются в различных браузерах – Safari, Chrome или Firefox.

В них изображения передаются блочными элементами, поэтому необходимо добавить не только в CSS, но и в тег <img> параметр style=display:block. Если картинка встраивается в текст (это может быть значок после ссылки в тексте), необходимо указывать style=display:inline.

Фоновые изображения, атрибуты alt и изображения в Gmail и в Hotmail – аспекты, которым следует уделить особое внимание при верстке электронных писем

• При добавлении изображения, у него обязательно должен быть прописан атрибут border=0, а если изображение обернуто ссылкой, то для тега ссылки должно быть прописано свойство border:none (если не сделать последнего, то в некоторых клиентах вокруг картинки может отображаться синяя рамка).
• Формат gif лучше всего подходит для штрихованной графики и простых графических элементов.
• Формат jpeg лучше всего подходит для насыщенных, многослойных и фотографических элементов. Качество изображений, экспортируемых в формате jpeg¸ как правило, должно составлять 60% от изначального качества. В некоторых случаях вам прийдется увеличить качество до 75% для устранения помех изображения.
• Формат png лучше всего подходит для изображений с высокой прозрачностью.

Для встраивания изображений в текст (например, изображение стрелки после текстовой ссылки), вы должны включить style=display: inline; instead of display:block; <a href=https://site.com>

Здесь будет ссылка со стрелкой в конце <img scr=arrow.gif width=12 height=12 style=display:inline; border:0;></a>

Краткие выводы

Подведем некоторые итоги по вставке картинок в письма:

1. Картинки улучшают внешний вид и результативность рассылок при правильном использовании.
2. Верстка должна быть адаптивной, чтобы страница отображалась на экране мобильного устройства (без дополнительного сжатия).
3. Формат используемых картинок должен соответствовать поставленным задачам (преимущественно .PNG или .JPEG).
4. Шрифт подписи на картинке должен быть крупным, четким и контрастным.
5. Картинка должна иметь размер, соответствующий шаблону (до 600рх шириной).
6. При использовании картинки в качестве фона нужно учитывать видимость на ней текста, а также обеспечить альтернативное цветовое заполнение.
7. Обязательно следует указать альтернативный текст (небольшого размера) в теге ALT.
8. При вписывании картинки в ячейку таблицы необходимо соблюдать ряд правил.
9. При установке на картинку ссылки требуется предусмотреть правила линковки и убрать окантовку при наведении.
10. Нужно учитывать особенности стилевого оформления в Gmail и Hotmail.

При соблюдении этих рекомендаций ваши рассылки станут более эффективными и прибыльными!

Еще подборка полезных ссылок:

• Правила вёрстки email-писем – статья на хабре.
• Основы профессиональной верстки электронных писем.
• Инструмент проверки разметки в письмах

Как вставить картинку в письмо

Существует два способа добавить изображения к сообщению в HTML формате:

1. Указать ссылку на картинку.
2. Прикрепить картинку к письму.

Ссылка на изображение. Загрузка с сервера

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

Пример:

<img src=»http://www.yoursite.com/images/picture.jpg»>,
где значение «src» означает источник картинки.

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

Плюсы:

• Наличие картинки никак не влияет на размер письма.
• Вставить ссылку на картинку – это быстро и просто.
• Можно изменить картинку на сервере и она изменится в письме.
• Ваша картинка уже имеет определенный размер (ширину, высоту), которая не изменится почтовыми сервисами.

Минусы:

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

Как прикрепить изображение к письму

Прикрепить картинку к письму = вставить изображение непосредственно в электронное письмо.

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

В HTML коде письма это будет выражено строкой: <img src=»picture.jpg»>.

Плюсы:

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

Минусы:

• Вес письма значительно увеличится.
• Некоторые почтовые сервисы могут по умолчанию скрывать картинки, требуя от пользователя нажать «Показать картинки».

Вставить картинку в HTML письмо с помощью ePochta Mailer

Если вы не знаете HTML и не планируете его изучать, рекомендуем воспользоваться специальным программным обеспечением,
подобно ePochta Mailer. Такая программа для рассылок позволяет
легко и быстро добавлять изображения в письмо, без «копания» в коде.

3 шага добавления картинки

В процессе создания шаблона в ePochta Mailer вы подошли к этапу, когда нужно добавить изображение.

1. Выбираете на панели программы меню «Вставить».
2. Внутри этого меню выбираете опцию «Рисунок».
3. В диалоговом окне, которое появится, с помощью кнопки «Обзор» загружаете изображение с компьютера в программу.
   Строку «Текст для замены» заполняете alt-текстом.

Работа с кодом: картинка средствами HTML

Если вы планируете загружать в письмо изображения со своего сайта, переходите на специальную вкладку “HTML код” в окне
программы и добавляйте код по примеру

<img src=»http://www.yoursite.com/images/picture.jpg»>,

где src=»http://www.yoursite.com/images/picture.jpg» – источник картинки, абсолютная ссылка на изображение на вашем сайте.

Картинки не отображаются в письме: решение проблемы

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

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

Проанализировав эти данные и собрав дополнительную информацию, вы поймете:

• на какие почтовые клиенты ориентироваться при создании картинок;
• какой должен быть оптимальный размер изображений для них;
• как они обрабатывают ALT-текст;
• и по какому принципу работает функция «не показывать картинки».

Разбираемся с маленьким текстом

Прежде всего следовало разобраться с отображением текста. Причина его столь малого размера заключалась в использовании шаблона шириной 710px — для того, чтобы показать его во всей ширине почтовый клиент сильно «отъезжать» при просмотре. Помогло использование специальной media query:

@media only screen and (max-width: 480px) { … }

Подобные объявления располагаются между тегов <style> — таблицы стилей внутри них могут быть интерпретированы только HTML-почтовыми клиентами, которые соответствуют критерию @media only screen and (max-width: 480px). Вот как выглядят две таблицы, содержащие тело письма:

<table cellspacing="0" cellpadding="0" border="0" width="100%">    <tr>        <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">

Привести их к нормальному размеру можно с помощью введения классов wrappertable, wrappercell и structure:

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody>   <tr>     <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">

Затем эти классы описываются в media query:

@media only screen and (max-device-width: 480px) {    body {        width: 320px !important;    }    table {        width: 320px !important;    }    table {        width: 300px !important;}

Использованные ширины довольно значительны, поскольку на старых iPhone (материал впервые опубликован в 2012 году — прим. перев.) ширина экрана в портретной ориентации составляет 320px. Использование именно этой величины для описания ширины шаблона письма позволит добиться его отображения в режиме 100% зума по умолчанию — это значит, что будет виден не только весь дизайн, но и то, что текст и изображения получатся читабельными.