Как оформить шапку письма: примеры и правила
Шапка — первое, что видит читатель после открытия письма. У неё две задачи: сообщить, от кого письмо, и настроить на нужный лад. Если шапка сделана хорошо, читатель сразу понимает, где он оказался, и продолжает читать. Если шапка отсутствует или сделана небрежно, письмо теряет узнаваемость и доверие.
Что входит в шапку
Шапка — это верхний блок письма до основного контента. Обычно она включает несколько элементов.
Логотип. Главный элемент шапки. Читатель видит логотип и мгновенно понимает, от кого письмо, ещё до того, как прочитал тему или первое предложение.
Навигационное меню. Ссылки на основные разделы сайта или категории каталога. Используется в рассылках интернет‑магазинов и медиа. Помогает читателю сразу перейти туда, куда нужно.
Ссылка на веб‑версию. Небольшая строка «Посмотреть письмо в браузере» для тех, у кого письмо отображается некорректно. Обычно размещается выше логотипа.
Слоган или описание рассылки. Короткая фраза под логотипом, которая напоминает читателю, о чём эта рассылка. Особенно полезна для контентных и новостных рассылок.
Не все элементы нужны в каждом письме. Для транзакционных писем достаточно логотипа. Для промо‑рассылки интернет‑магазина уместно и меню, и логотип. Для личной авторской рассылки — имя и фото автора.
Шапка Хабра — логотип слева, ссылка на веб‑версию и кнопка «Консультация» справа. Навигация в шапке ведёт к конкретному действию, а не просто на главную.
Размеры и технические параметры
Стандартная ширина письма 600 пикселей — шапка должна вписываться в этот размер.
Высота шапки зависит от содержимого. Если это только логотип, достаточно 80–120 пикселей. С навигационным меню — 120–160 пикселей. Слишком высокая шапка занимает ценное пространство в верхней части письма, которую читатель видит первой.
Логотип лучше готовить в двойном разрешении для Retina-экранов. Если логотип занимает 200 пикселей в ширину, исходный файл должен быть 400 пикселей и ограничен через атрибут width в HTML.
Формат логотипа: PNG с прозрачным фоном, если шапка цветная. SVG не подходит — поддерживается не всеми почтовыми клиентами.
Шапка рассылки «Честно» — рукописный логотип и слоган под ним. Авторский стиль создаёт узнаваемость без корпоративного дизайна.
Цвет и фон шапки
Шапка задаёт визуальный тон всего письма. Три рабочих подхода.
Белый фон. Универсальный вариант. Логотип на белом фоне выглядит нейтрально и не конкурирует с контентом письма. Хорошо работает для контентных рассылок и B2B.
Фирменный цвет. Шапка в цвете бренда сразу создаёт узнаваемость. Важно убедиться, что логотип читается на этом фоне и что цвет не слишком тяжёлый — иначе шапка будет давить на всё письмо.
Тёмный фон. Работает для брендов с тёмной айдентикой. Требует отдельной проверки в тёмной теме почтовых клиентов — цвета могут инвертироваться.
При любом варианте проверяйте шапку в тёмном режиме. Логотип с прозрачным фоном на тёмной подложке может стать невидимым, если он тёмного цвета.
Навигационное меню в шапке
Навигация в шапке письма уместна не всегда. Она хорошо работает в рассылках интернет‑магазинов, где читатель привык её видеть и использует для быстрого перехода в нужный раздел.
В контентных и транзакционных письмах навигация отвлекает от основного действия. Если письмо ведёт к одной цели, лишние ссылки в шапке снижают конверсию.
Несколько правил для навигации в шапке.
Не больше 4–5 пунктов. Больше — шапка становится перегруженной, на мобильном пункты не помещаются в одну строку.
Шрифт меньше основного текста письма, обычно 12–13px. Меню не должно конкурировать с заголовком.
На мобильном навигация часто скрывается или переносится в несколько строк — проверяйте, как это выглядит на узком экране.
Шапка «Подписных изданий» — логотип и четыре пункта навигации по категориям каталога. Читатель сразу может перейти в нужный раздел.
Шапка для разных типов рассылок
Промо‑рассылка интернет‑магазина. Логотип по центру или слева, навигационное меню с основными категориями, фирменный цвет фона или белый. Шапка лаконичная — основное внимание на баннер с оффером.
Контентная и новостная рассылка. Логотип или название рассылки, короткий слоган или описание выпуска, иногда номер выпуска. Шапка задаёт редакционный стиль.
Транзакционное письмо. Только логотип. Никакого меню и слоганов — письмо передаёт важную информацию, шапка не должна отвлекать.
Авторская рассылка. Имя автора, фото, короткое описание. Личный стиль работает лучше корпоративного логотипа, если рассылка строится на личном бренде.
B2B-рассылка. Логотип, иногда название компании текстом рядом с логотипом. Минималистично и профессионально.
Шапка Sendsay — логотип по центру на белом фоне, без навигации и лишних элементов. Чисто и узнаваемо.
Шапка Центрального университета — логотип и баннер без навигации. Всё внимание сразу переходит на заголовок и суть предложения.
Транзакционное письмо Timeweb Cloud — фирменный синий блок с логотипом и заголовком. Шапка сразу сообщает бренд и суть письма.
Типичные ошибки в шапке
Слишком большой логотип. Логотип на полную ширину письма выглядит тяжело и съедает место. Оптимальная ширина логотипа — 150–250 пикселей.
Логотип без ссылки. Логотип в шапке должен вести на сайт. Это стандартное ожидание читателя — он кликает на логотип и попадает на главную страницу.
Нет альт‑текста у логотипа. Если изображения отключены, читатель видит пустой блок вместо логотипа. Альт‑текст с названием компании решает эту проблему.
Разная шапка в разных письмах. Если шапка меняется от рассылки к рассылке, читатель не формирует визуальную привычку. Шапка должна быть стабильным элементом, одинаковым во всех письмах бренда.
Шапка не адаптирована под мобильный. На узком экране логотип масштабируется, меню переносится или ломается. Проверяйте шапку на мобильном устройстве или в предпросмотре редактора.
Итог
Хорошая шапка — это логотип с ссылкой, читаемый на любом фоне и в тёмной теме, нужная навигация и не больше. Она должна узнаваться с первого взгляда и не перетягивать внимание с основного контента письма. Зафиксируйте шапку в мастер‑шаблоне один раз — и она будет работать во всех рассылках без дополнительных усилий.
Читайте также: