Руководство по дизайну подписи электронной почты

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

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

Руководство по дизайну

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

• Используйте рекомендуемые ширины как для шаблона подписи, так и для широких элементов, таких как баннеры.
• Используйте таблицы для верстки
• Загружайте изображения в их фактическом размере
• Выбирайте поддерживаемые форматы файлов
• Учитывайте, как подпись будет выглядеть на мобильных устройствах
• Избегайте копирования и вставки текста — вводите текст напрямую, или если вставка необходима, вставляйте как обычный текст без форматирования.
• Применяйте форматирование и стили, такие как шрифты и цвета (или другие параметры из панели свойств), сначала к внешним слоям, затем к внутренним таблицам, ячейкам или группам. Для получения дополнительной информации о работе с внутренними и внешними частями шаблона смотрите Цветные границы, группировка и наследование свойств в Конструкторе подписей.

Рекомендуемые стандарты дизайна

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

Лучшие практики

Компоновка

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

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

Шрифты

Выбор шрифтов

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

Для получения дополнительной информации смотрите Разница между кастомными шрифтами и стеками шрифтов.

Размеры шрифтов

Используйте следующие размеры шрифтов для поддержания читаемости и профессионального вида:

• 11 пт – 12 пт для крупного текста (например: имя, должность)
• 10 пт – 8 пт для контактных данных (например: телефон, электронная почта, сайт)
• 8 пт – 7 пт для отказов от ответственности и юридического текста

Для получения дополнительной информации о размерах шрифтов смотрите Как использовать значения в пикселях и пунктах при выборе размера шрифта.

Изображения

Для оптимального отображения и производительности изображений:

• Избегайте изменения размера изображений в Конструкторе подписей — вместо этого загружайте изображение точно того размера, в котором хотите его видеть. Например, если вы хотите, чтобы изображение отображалось размером 100x100 пикселей, создайте или измените размер файла изображения до этого размера.
• Изображения могут быть встроенными или связанными:
  • Встроенные изображения: Загружаются напрямую с вашего устройства в шаблон подписи.
  • Связанные изображения: Размещаются на общедоступном сервере и используются в шаблоне подписи через URL.

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

Фоны

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

Совместимость с мобильными устройствами

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

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

Распространённые ошибки

Избегайте следующих ошибок при создании подписей:

• Использование подписей шире 600 пикселей. Это может вызвать проблемы с отображением на маленьких экранах.
• Неуказание реальных размеров изображений для отображения. Это может привести к тому, что изображения будут выглядеть слишком большими или искаженными.
• Отсутствие использования таблиц для верстки. Неструктурированные дизайны могут некорректно отображаться в почтовых клиентах. См. Разница между таблицами и группами.
• Использование неподдерживаемых форматов изображений. Используйте только JPG, JPEG, PNG или GIF.
• Использование цветов или стилей, неподходящих для тёмного режима на устройствах.
• Недостаточная осторожность при использовании ИИ для генерации контента, так как его может быть невозможно воспроизвести в подписи.

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