Верстать: ВЕРСТАТЬ | это… Что такое ВЕРСТАТЬ?

HTML-письма без ошибок: 8 требований к дизайну и верстке

Учебные материалы

6 декабря 2021

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

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

Дизайн

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

В верстке email-рассылок нельзя использовать современные спецификации цветов, градиентов, фоновых картинок и лейаутов (flexbox и grid). Зато можно использовать старые и максимально простые инструменты. Отсюда и ограничения в дизайне.

Возможности Mindbox для самостоятельной настройки email-рассылок

1. Размер

— Ширина макета для веба — максимум 700 пикселей. Даже на больших экранах письма отображаются такой ширины.

Почему обрезается рассылка на Gmail и как это починить

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

2. Фон

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

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

3. Шрифты

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

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

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

Стандартные шрифты для веб-дизайна

Стандартные шрифты для веб-дизайна

4. Контент

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

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

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

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

Основное содержание. Главная задача письма и особенно этой части — подвести пользователя к целевому действию.

Есть несколько способов размещения информации в письме: текст, баннер, товарная сетка.

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

В заголовке лучше сразу показать пользу (вывести промокод, рассказать о подарке или скидке), чтобы человек понимал, зачем ему читать это письмо. Иногда в заголовке письма пишут приветствие: «Здравствуйте, Татьяна!».

Неудачный пример использования заголовка:

Вместо приветствия можно вынести в заголовок полезную информацию про подарок или следующий конкурс

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

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

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

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

   — Товарная сетка: обычно товары размещают плиткой в несколько колонок и рядов. Но это хорошо работает только на десктопе. Бывает, такое расположение используется и для мобильной версии письма. Это сразу «убивает» читабельность: и сами изображения, и шрифт становятся очень маленькими. Пользователю трудно рассматривать мелкий текст, и он потеряет интерес.

Даже размещенные в две колонки товары сложно рассмотреть на смартфоне

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

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

   — «Открыть в веб-версии». Веб-версия понадобится в двух случаях: письмо некорректно отобразилось или пользователь хочет переслать письмо.

При пересылке письма верстка, скорее всего, развалится, а если переслать веб-версию, все откроется нормально.

Верстка

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

Адаптивное письмо будет корректно открываться на десктопе и на смартфоне: если ширина письма уменьшается, элементы перестраиваются один под другой. Например, плитка с товарами: в десктопной версии товары стоят в ряд, а в мобильной версии — друг под другом.

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

6. Сетка

В email-рассылках есть только два способа располагать элементы на странице: таблица и инлайн-блоки.

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

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

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

Таблица на ширине 700 px:

Та же таблица на ширине 500 px:

Инлайн-блоки (Inline block, спецификация CSS позиционирования элементов). Размер блока устанавливается по содержимому, но для него можно задать ширину, высоту и отступы. Если экран будет слишком узкий, инлайн-блоки не уменьшатся, а перейдут на следующую строку.

Инлайн-блоки на ширине 600 px:

Инлайн-блоки на ширине 450 px:

7. Кодировка

Только UTF-8. Если кодировка другая, русский текст отобразится как нечитаемые символы.

Как проверить: прислать себе письмо. Если вместо текста непонятные символы, кодировка не та. Изменить кодировку можно в html-файле письма:

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

Проверка кодировки в редакторе Mindbox

8. Стили

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

❌ Нельзя использовать внешние CSS	✅ CSS прописывается только инлайн-стилями
	style="margin:0 0 12px 0;font-size:14px;"

Чтобы задать стили внутри рассылки, нужно использовать два подхода: блок стилей и инлайнеры.

Блок стилей. Прописать стили нужно внутри основного файла в блоке head или body.

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

Для этого используют сервисы, например Foundation. Сервис вычитывает документ, находит классы, затем по ним находит связанные стили и копирует их внутрь самого элемента.

Инлайнеры в сервисе Foundation

Инлайнеры в сервисе Foundation

Почему нельзя верстать письма как одну картинку

Иногда возникает соблазн сделать письмо как картинку: в нем ведь все будет выглядеть, как задумано, — и шрифты, и сетка, и фоны.

Однако email-рассылку лучше не верстать в виде картинки по нескольким причинам:

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

Тестирование

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

— справочники для тестирования отдельных свойств;

— сервисы для тестирования сверстанных писем.

Сервисы для тестирования писем

Сервисы для тестирования писем

Тестировать свойства

Отдельные свойства, например тени и блики, можно проверить с помощью сервиса Can I Email. Пример свойства — box-shadow, нативная тень под элемент. В сервисе проверка выглядит так:
https://www.caniemail.com/search/?s=box-s

Can I Email — сервис для проверки свойств объектов

Can I Email — сервис для проверки свойств объектов

Box-shadow отображается только в письмах на MacOS. Если это самая используемая операционная система среди ЦА, можно использовать свойство в письме

Тестировать письма целиком

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

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

Проверять вручную все почтовые сервисы

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

• Email
• Рассылки

• Product Owner

  Пётр Никитин

• Автор

  Анна Павлова

• Редактор

  Севиль Нагаева

Как верстать email письма — инструкция от А до Я

Представьте: ваше письмо готово и выглядит одинаково красиво на всех устройствах. Вот только это далеко от реальности: различные почтовые программы — Gmail, Яндекс.Почта и т. п.) по‑разному отображают один и тот же HTML-код. Поэтому задача верстальщика — не просто перевести дизайн шаблона в код, но и сделать так, чтобы рассылка везде выглядела хорошо. Об этом и поговорим.

Табличная вёрстка

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

По сути, HTML-вёрстка для email-рассылки — это набор таблиц, которые находятся в других таблицах. Мы заглянули в вёрстку и использовали внутренние значения border, заменив их на 1:

Особенности и ограничения вёрстки электронных рассылок

Тег <style>

Этот тег задаёт стили CSS для HTML-вёрстки писем для рассылки — шрифты, цвета, расположение отдельных блоков и других визуальных элементов.

Важная информация: style поддерживается не всеми почтовыми клиентами (вот простая таблица, которая это показывает). Поэтому и медиазапросы могут обернуться проблемами — они будут работать не везде.

Сокращённая форма стилей

Так как не все почтовые клиенты поддерживают тег <style>, все стили нужно инлайнить — писать их в атрибуте и не в сокращённой форме, а в полной. Сравните два варианта:

Сокращённая форма

h2 {

  color: #fff;

}

Полная форма

h2 {

  color: #ffffff;

}

Нам нужен второй. Кстати, для инлайна стилей и «перевода» сокращённой формы в полную можно использовать инлайнеры — такой сервис уже встроен в Letteros.

Шрифты

Шрифты в вёрстке имейлов — тот случай, когда лучше не отступать от классики и использовать только стандартные веб‑шрифты. Вот стандартный список шрифтов, применяемых для HTML-писем:

font-family: Arial, Helvetica, sans-serif;

font-family: Arial Black, Gadget, sans-serif;

font-family: Georgia, serif;

font-family: MS Sans Serif, Geneva, sans-serif;

font-family: MS Serif, New York, sans-serif;

font-family: Tahoma, Geneva, sans-serif;

font-family: Times New Roman, Times, serif;

font-family: Trebuchet MS, Helvetica, sans-serif;

font-family: Verdana, Geneva, sans-serif.

Если подключаются другие шрифты, нужно помнить, что это будет работать только в тех почтовиках, где поддерживается тег <style>. 

Размер HTML-кода

Стоит знать: почтовый клиент Gmail обрезает email, код HTML которых превышает 100 кб. Так пользователи увидят слова «Письмо показано не полностью» и ссылку на полный текст:

Чтобы email не обрезались, нужно сокращать их код до 100 кб. Для этого можно использовать Минификатор кода — он сжимает код в одну строку и убирает все лишние символы. Так можно сэкономить около 20% килобайт.

Изображения

Чтобы все изображения (в том числе и фоновые) в письме отобразились корректно, главное использовать только следующие форматы — jpg, gif и png. 

Технических ограничений по весу изображений в шаблонах писем нет. Но при мобильном интернете после клика по теме письма очень «тяжёлые» картинки будут долго открываться. Поэтому картинки для баннера должны весить не больше 150 килобайт, а все остальные — не больше 50.

Чтобы сжать картинку до нужно размера, можно воспользоваться специальными сервисами — Optimizilla и TinyPNG. Или встроенным сервисом в Letteros.

JavaScript

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

Работает AMP пока не везде: Gmail, Mail.Ru, Yahoo! Mail технологию уже освоили, а вот Яндекс ещё нет, и в его почтовых сервисах AMP-функционал отображаться не будет. 

Опросы

В письмах бывают опросы, а в них — чекбоксы, галочки, поля для ввода и другие детали, которые не поддерживаются в вёрстке. Как их сделать?

Первый способ — это NPS-опрос с одним закрытым вопросом в стиле «Оцените нашу работу от 1 до 10». Результаты покажут, как подписчик оценил работу, почитав ваше письмо:

Второй способ подходит для открытых вопросов: на кнопку (или в любом другом месте) в рассылке вешается ссылка на опрос в Google Forms.

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

Добавление в календарь

Подписчик может добавить в свой календарь событие из рассылки — вот как это работает: 

1. Получает рассылку с анонсом события.
2. Нажимает на кнопку «Добавить в календарь».
3. Календарь автоматически открывается и предлагает добавить событие.

Чтобы всё получилось, нужно сделать календарь публичным, открыть доступ на событие для всех, скопировать ссылку и последнее — отправить её пользователям. Это работает со всеми популярными типами календарей: Google, Яндекс, Yahoo!, Mail.ru, Outlook или iOS. В этой статье есть подробная инструкция. 

Счётчики обратного отсчёта

Таймер обратного отсчёта — отличный инструмент, чтобы напомнить в цепочке промописем: нужно поторопиться.

Чтобы таймер работал корректно, его лучше сверстать скриптом — либо собственным, либо использовать сервисы Sendtric или MotionMail.

Отступы в вёрстке рассылок

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

Свойство padding устанавливает внутренние отступы со всех сторон элемента. Но вертикальный отступ внутри структуры body можно задать и с помощью пустой таблицы с указанием высоты самого отступа. 

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
    </tr>
</table>

Font-size обнуляем. Ещё вариант — отбивка отступа линией. Вот такой:

Её код: 

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="left" valign="top">
        </td>
    </tr>
</table>

Это таблица, у которой нет никакой размерности. Значение border-top-width как раз и указывает на линию толщиной 1px серого цвета border-top-color, а значение border-top-style задаёт линии сплошной стиль solid. Есть ещё несколько значений, которые можно использовать:

• none обнуляет линию;
• dotted состоит из набора точек;
• dashed указывает на пунктирную линию;
• double создаёт двойную линию;
• groove для эффекта вдавленной линии;
• ridge отвечает за рельефную линию; 
• inset и outset определяют трёхмерную линию.  

Margin же в CSS определяет внешний отступ на всех четырёх сторонах элемента:

margin-top, margin-right, margin-bottom и margin-left.

Осталось самое интересное — мобильная адаптация. 

Мобильная адаптация 

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

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

Перестраивающиеся блоки

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

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

Раз — и картинка уехала вниз. 

Два перестраивающихся блока

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

Инлайн‑блоки занимают всю заданную ширину контейнера. Соответственно, если использовать ширину письма в 600px, то два одинаковых контейнера будут по 300px. Вот пример кода:

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="top">
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
            </td>
            <td valign="top">
            <![endif]-->
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END-->
        </td>
    </tr>
</table>

Cellpadding и cellspacing, естественно, обнуляем, а td align задаём center. Закрывает код первого блока условный комментарий для Outlook — хотя ему вообще не нужны перестроения, ведь это десктопный почтовик. Но иначе он не увидит закрывающий тег </td> в первом контейнере. 

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

В итоге таблица выглядит так:

контент

контент

А если экран сузится даже на один пиксель, блоки перестроятся. Пример:

контент

контент

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

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="top">
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
            </td>
            <td valign="top">
            <![endif]-->
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td align="center" valign="middle">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td align="center" valign="top">
                                        контент
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><!-- Item END-->
        </td>
    </tr>
</table>

Здесь width превратился в max-width, потому что размер стал больше 300px: если задать жёстко ширину, экран «упрётся» в 400px. Теперь наша таблица выглядит так:

контент

контент

А так — при перестроении:

контент
контент

То же самое и с баннерами. Часто контент баннера разделён на две стороны: слева — текст, справа — картинка:

При адаптации баннер может перестраиваться по‑разному — правая колонка может «уйти» под другую:

Но можно и наоборот — чтобы сначала текст, после — изображение. Так мы добрались до обратного перестроения блоков. 

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

Такая вёрстка для email-рассылки работает примерно так же, но есть одно но: атрибут dir. Он используется для задания направления: 

• ltr (Left To Right) — текст отображается слева направо;
• rtl (Right To Left) — справа налево.

Код начинается с table border, далее tr служит контейнером для создания строки таблицы:  

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td dir="rtl" align="center"><!--[if (gte mso 9)|(IE)]>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td dir="rtl">
            <![endif]-->
            <!-- Item -->
            <div>
                <table cellpadding="0" cellspacing="0" border="0" dir="ltr">
                    <tr>
                        <td align="center">
                            Блок 2
                        </td>
                    </tr>
                </table>
            </div><!-- Item END--><!--[if (gte mso 9)|(IE)]>
            </td>
            <td>
            <![endif]-->
            <!-- Item -->
            <div>
                <table border="0" cellspacing="0" cellpadding="0" dir="ltr">
                    <tr>
                        <td align="center">
                            Блок 1
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td></tr>
            </table>
            <![endif]--></td>
    </tr>
</table>

Здесь td align выравнивает содержимое ячейки по горизонтали. Вот пример, как код отобразится на большом экране:

Блок 1

Блок 2

А так — на мобильном: 

Блок 2

Блок 1

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

Адаптация изображений

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

Чтобы картинка шириной больше 300px начала адаптироваться и не ломала вёрстку, в стилях прописываем ширину в процентном соотношении (100%), и максимальную ширину картинки img (600px), используя резиновый подход:

<span>
    <img src="creative-main.png" alt="Альтернативный текст" border="0"
    />
</span>

Десктопные версии (в том числе Outlook) увидят запись width=600 и покажут баннер шириной 600px. Google читает запись width: 100%; max-width: 600px и отобразит изображение на всю ширину, но не более 600px. Так получится масштабирование изображения, которое не помешает адаптироваться всему остальному контенту письма. 

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

Масштабирование кнопок

Бывает, что кнопки растягивают на всю ширину экрана:

Вот как будет масштабироваться такая кнопка в мобильной версии:

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" valign="middle" bgcolor="#000"
           >
            <!--[if gte mso 9]>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td nowrap align="center" valign="middle">
            <![endif]-->
            <a href="#" target="_blank"
              >
                Текст кнопки
            </a>
            <!--[if gte mso 9]>
            </td></tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

Чуть разберём: height и line-height здесь одинаковые, также как background и bgcolor. Target задано свойство _blank — так страница загрузится в новом окне браузера.

Важно, чтобы высота строки соответствовала высоте кнопки, а её текст был меньше 300px в ширину. Если будет больше — текст либо сломает адаптацию, упёршись в края кнопки при сужении [при наличии свойства white-space со значением nowrap], либо неминуемо перестроится и вылезет за пределы кнопки.

Тёмная тема

Как это работает? Всё просто: при включении Dark Mode фон страницы становится тёмным, а шрифт — светлым. 

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

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

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

Ещё лучше — сделать фон таким цветом, на котором будет хорошо читаться как белый текст, так и чёрный:

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

Чёрно‑белые или серые иконки, которые используются в дизайне письма, должны быть с обводкой в цвет фона (1–1,5 px). В светлой теме её не будет видно, зато в тёмной — ещё как. Это же правило относится к нестандартным шрифтам, которые используются в заголовках.

Если кнопку верстать кодом, она тоже будет инвертироваться. Когда в светлой теме у кнопки есть обводка, этого можно избежать: верстать кнопки картинками, добавляя заливку в цвет фона. В светлой теме это будет выглядеть как обводка, а в тёмной — как обычная кнопка. Рекомендуем использовать этот приём.

Как сделать так, чтобы вёрстка точно не «поехала»

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

Платформа показывает отображение письма на огромном количестве (100+) популярных устройств, а встроенные сервисы сразу проверяют письмо на ошибки — и рассылка выглядит красиво как на десктопе, так и в мобильных почтовиках: вёрстка писем для email-рассылки адаптируется под любой вид устройства. Там же можно тестировать рассылки и использовать другие возможности сервиса.

Посмотрите демо и переходите на Letteros, где на создание писем уходит 15 минут.

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

Typeset Определение и значение — Merriam-Webster

тип·набор ˈtīp-ˌset 

переходный глагол

: установить в тип : составить

Примеры предложений

Недавние примеры в Интернете Раньше газеты и книги набирались вручную — буква за буквой, слово за словом, строка за строкой, с использованием технологии 15-го века, разработанной немецким печатником и изобретателем Иоганном Гутенбергом. — Ник Йетто, 9 лет.0015 Smithsonian Magazine , 30 марта 2022 г. Статья была отредактирована, набрана и отправлена ​​Пирсону на корректуру, как обычно развивались события. — The Salt Lake Tribune , 26 февраля 2022 г. В то время как большинство книг набраны с использованием пропорциональной типографики, отводя каждому символу пространство в соответствии с его шириной, моноширинные шрифты дают каждому символу, будь то простая точка или начальная заглавная, равный интервал. — Джулиан Лукас, 9 лет.0015 The New Yorker , 13 декабря 2021 г. Как и многие результаты в науке, этот долго шел от грязных ботинок до набранных черных линий. — Нед Розелл, Anchorage Daily News , 26 сентября 2020 г. Когда Зохре привела свою дочь в офис, Хумар внимательно наблюдала за тем, как уйгурский персонал набирал уйгурский алфавит, модифицированный арабский шрифт, для выпуска уйгурского издания, которое содержало в основном переводы статей, написанных ханьскими журналистами. — New York Times , 29 января 2020 г. Машина Linotype представляла собой систему линий горячего металла для набора строк за раз вместо более раннего метода размещения одной буквы за раз для печати. — Линди Макналти, baltimoresun.com/maryland/carroll , 14 августа 2019 г. Они были опубликованы в BOMB и появились в Screen Tests, но они были набраны раз.0016 Олсона и сфотографированы как произведения искусства, включенные в выставку. — Тобиас Кэрролл, Longreads , 25 июля 2019 г. Invitational на следующей неделе выйдет онлайн на день раньше, в среду, 3 июля, поскольку раздел «Искусство и стиль» воскресной печатной газеты также будет набран в тот же день. — Washington Post , 27 июня 2019 г. Узнать больше

Эти примеры предложений автоматически выбираются из различных онлайн-источников новостей, чтобы отразить текущее использование слова «набор текста». Мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв.

История слов

Первое известное использование

1945 год, в значении, определенном выше

Путешественник во времени

Первое известное использование набрано было в 1945 году

Другие слова того же года тип серии

наборный

наборщик

Посмотреть другие записи поблизости

Процитировать эту запись0003

«Вёрстка». Словарь Merriam-Webster.com , Merriam-Webster, https://www.merriam-webster.com/dictionary/typeset. По состоянию на 11 марта 2023 г.

Copy Citation

Подпишитесь на крупнейший словарь Америки и получите тысячи дополнительных определений и расширенный поиск — без рекламы!

Merriam-Webster без сокращений

Typeset Определение и значение | Словарь.com

• Основные определения
• Викторина
• Примеры
• Британский

Показывает уровень оценки в зависимости от сложности слова.

[tahyp-set]

/ ˈtaɪpˌsɛt /

Сохранить это слово!

См. синонимы для: набор текста на Thesaurus.com

Показывает уровень оценки в зависимости от сложности слова.

---

глагол (используется с дополнением), набор-набор, набор-набор.

установить (текстовое содержание) в тип.

прилагательное

(письменного, текстового материала) набрано шрифтом.

ВИКТОРИНА

ВСЕ ЗА(U)R ЭТОГО БРИТАНСКОГО ПРОТИВ. АМЕРИКАНСКИЙ АНГЛИЙСКИЙ ВИКТОРИНА

Между тем, как люди говорят по-английски в США и Великобритании, огромная разница. Способны ли ваши языковые навыки определить разницу? Давай выясним!

Вопрос 1 из 7

Правда или ложь? Британский английский и американский английский различаются только сленговыми словами.

Происхождение набора

Впервые записано в 1865–1870 гг.; обратное формирование от наборщика

Слова рядом набраны

тип местности, тип металла, тип-аут, машинопись, набор шрифтов, набор, наборщик, набор текста, набор-сайт, типовые виды, типовой образец

Dictionary.com Unabridged Основано на словаре Random House Unabridged Dictionary, © Random House, Inc. 2023

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

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

  «Предварительное исследование» COVID оказалось на удивление достоверным|Филип Кифер|3 февраля 2022 г.|Popular-Science

• В исходном тексте стихи в заголовках глав были набраны готическим шрифтом; они отображаются ниже серым шрифтом.

  Очерки жизни аборигенов|V. V. Vide

• Некоторые итальянские отрывки, большинство из которых взяты из либретто опер, были неправильно набраны в исходном тексте.

  Верди: Человек и музыкант|Фредерик Джеймс Кроуст

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

  Справочник студента по грибам Америки, съедобным и ядовитым | Томас Тейлор

• В оригинале он был набран как абзац, а не как пункт с выступающим отступом.

  Handy War Guide for My Company|Andr Godefroy Lionel Hanguillart

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