Дизайн писем с точки зрения вёрстки: практические советы с примерами
Вёрстка — это описание визуала с помощью HTML-разметки и CSS-стилей. Проще говоря, это определённый набор инструментов, с помощью которых мы создаём то, что видит пользователь.
Когда речь заходит об электронных письмах, воображение дизайнеров часто вступает в конфликт с ограниченными техническими возможностями. Как сделать так, чтобы реальность совпала с ожиданиями?
Текст или картинка?
Мы привыкли, что львиную долю писем занимает текст. Впрочем, иногда рассылки верстают единой картинкой. У такого подхода есть несколько плюсов:
- вся красота дизайна сохраняется в соответствии с задумкой;
- в мобильной версии всё остаётся на своих местах;
- письмо одинаково отображается во всех почтовиках.
А вот минусов больше:
Здесь мы говорим только о минусах с точки зрения отображения. Напомним, что письма-картинки могут не пройти спам-фильтры почтовых провайдеров.
- ссылку можно поставить только на всё изображение целиком — то есть ссылки на разные продукты, статьи, соцсети или контакты вам недоступны;
- мобильная версия письма может сжаться до микроскопических размеров;
- если получатель пользуется тёмной темой, а письмо выполнено в светлых тонах, то оно превратится в неприятное для глаз яркое пятно;
- и самое опасное: слишком большое изображение может попросту не загрузиться.
Мы же не хотим причинять пользователям столько неудобств? Правильно, не хотим.
Текст
Текст — это суть письма. Но он выполняет и визуальную функцию, ведь смысл передаётся не только словами, но и расположением и выравниванием строк.
В письмах лучше всего использовать стандартные шрифты. В отличие от сайтов, к емейлу нельзя просто так взять и подключить любой желаемый шрифт: если его нет у пользователя на жёстком диске, вёрстка может поехать из-за различий в ширине и высоте букв. Особенно это важно в письмах, где есть блоки с перестроениями или фиксированными шириной и высотой.
Поэтому я советую использовать веб-безопасные шрифты: Arial, Courier New, Times New Roman, Georgia, Trebuchet, Serif, Sans Serif или Verdana. Этот набор шрифтов есть у каждого пользователя, поэтому письмо отобразится корректно.
Распространённый компромисс — использовать фирменные шрифты в заголовках, свёрстанных картинками. Но для этого нужно продумать мобильную адаптацию письма: такие заголовки чаще всего не перестраиваются, а сжимаются, и текст может стать мелким (в зависимости от ширины).
В исключительных случаях можно нарезать заголовок на части, равные минимальной ширине экрана мобильного устройства, чтобы текст мог перестроиться. Но такой подход возможен для заголовков в одну строку.
Изображения
Изображения помогают сделать письмо визуально привлекательным. Неопытные дизайнеры иногда добавляют картинки, не задумываясь о том, как с ними дальше будет работать верстальщик. Такие изображения, например, могут выпирать за пределы блока или пересекать контент по соседству.
Дорабатывать изображения в таком случае приходится верстальщику, и иногда из-за этого дизайнерская задумка искажается. Правильно подготовленный визуал помогает сохранить её.
Одинаковые блоки
Если в макете есть одинаковые блоки (например, карточки товаров или пункты списка, расположенные горизонтально), то изображения должны иметь одинаковые размеры. Конечно, картинки с разной высотой можно выровнять отступами, но различные почтовики рендерят высоту отступа по-разному, и текст под такой картинкой в одинаковых блоках может съехать.
Если в письме несколько однотипных горизонтальных блоков вида «текст + картинки» и в мобильной версии картики перестраиваются наверх или вниз, то приоритет должен быть у ширины. Так как высота может варьироваться в зависимости от объёма текста.
Блоки также не должны пересекаться по вертикали, чтобы можно было сверстать их по отдельности, а не единым изображением.
Тень вокруг изображения
Если вокруг изображения есть тень, то при экспорте оно увеличивается в размерах. Это следует учитывать, когда одинаковые карточки с тенью стоят рядом друг с другом и тени могут пересекаться.
Также важно при дизайне не приближать текст слишком сильно к таким изображениям: на вёрстке текст начнётся там, где заканчивается тень.
Иконки внутри текста
Иконки внутри текста, расположенные на одной строке, по высоте должны быть равны размеру шрифта.
Если высота намного больше, иконка начинает «отодвигать» свою строку от текста выше.
Слои
Слои изображения
Все слои, относящиеся к одному изображению, следует объединить в группу. Если этого не сделает дизайнер, задача перейдёт к верстальщику, который не так сильно погружён в задумку и может потеряться в поиске этих слоёв.
Однажды тигр из нашей рассылки так лишился прекрасной моноброви:
Режимы наложения
Режимы (или методы) наложения позволяют определить, как слои изображения взаимодействуют или смешиваются друг с другом. Иногда на дизайне применяют такие режимы не к отдельным слоям, а ко всему изображению. При экспорте такого изображения эффект пропадёт, так как на вёрстке не получится его воспроизвести. В итоге дизайнерский замысел исказится. В целом лучше всего использовать режим наложения normal.
Блоки с перестроением
Предположим, у нас есть несколько блоков, которые должны перестроиться в мобильной версии. В примере ниже это текстовый блок и стрелка.
Чтобы можно было это сверстать, блоки не должны пересекаться друг с другом по горизонтали. Обратите внимание, насколько непараллельны линии, отделяющие каждую пару. Если пересечение всё-таки есть, такие блоки верстаются единой картинкой. Но тогда текст на масштабируемых изображениях будет мелким.
Хороший пример:
Выносные элементы
Любые блоки с выносными элементами обычно верстаются картинками. Это важно помнить, так как в мобильной версии такие картинки масштабируются, то есть текст на них уменьшается.
Бывают исключения, когда выносным изображением можно пренебречь. В таком случае в мобильной версии мы прячем его с помощью позиционирования фона. При этом мы также жертвуем декором в виде скруглений кодом.
Ещё пример допустимого пересечения: небольшое изображение находится чётко по центру подложки и пересекает её в самой широкой части.
Прозрачность
Прозрачность до сих пор не работает в некоторых почтовиках (например, в Outlook 2019 и старше), поэтому в вёрстке её лучше вовсе не использовать. Именно поэтому при дизайне цвет необходимо указывать шестизначным кодом: то есть полупрозрачный чёрный текст на самом деле должен быть серым.
Подложка с тенью
Предположим, текст располагается в блоке с белым фоном, и в дизайне его нужно выделить по периметру тенью. Получается эффект текста на подложке.
Но среди десктопных почтовиков тени поддерживает только Mail.ru, а в остальных текст «повиснет» с большими отступами. В таких случаях вместе с тенью лучше предусмотреть тонкую рамку того же цвета, что и тень.
Тёмная тема
Всё больше пользователей предпочитают тёмную тему, причём не только на мобильных устройствах, но и на десктопе. Рассмотрим моменты, которые стоит предусмотреть при дизайне письма.
Фоновые изображения
Лучшее решение для фоновых изображений — прозрачный слой вместо сплошной заливки или градиента. В противном случае в тёмной теме текст может потеряться. Например, тёмный шрифт станет светлым, а фон останется без изменений.
Если необходимо всё-таки использовать градиент или сплошную заливку, то фон нужно сделать полупрозрачным. Мы провели несколько экспериментов и выявили, что оптимальна непрозрачность (opacity) 70%. В тёмной теме сквозь прозрачность будет виден инвертированный цвет, который задаётся для случаев, когда картинка не загрузилась, — и текст становится видимым.
Возможен вариант, когда цвета текста и фона подбираются так, что даже при инвертировании письмо остаётся читабельным.
Заголовки, текст, логотип
Заголовки, написанные нестандартным шрифтом (и свёрстанные картинкой, как я писала выше), должны иметь обводку. Она нужна, чтобы этот текст также не потерялся в тёмной теме.
То же самое с логотипами:
Жёлтый фон в тёмной теме
Жёлтый — самый неудачный цвет для дизайна с точки зрения тёмной темы. Он в ней остаётся светлым, хотя и считается самым светлым на цветовом круге, что предполагает инвертирование в достаточно тёмный цвет. Это снижает контраст текста и фона.
Если фон на вёрстке задаётся кодом, а не картинкой, то надо быть готовым, что в тёмной теме цвет будет «грязным», а текст — почти нечитабельным.
Лучшее решение — либо не использовать жёлтый цвет вообще, либо подбирать значение цвета для текста.
Макеты из Photoshop
Сейчас для дизайна макетов всё чаще используют Figma. Но иногда в работу попадают макеты, сделанные в Photoshop. В таком случае нужно обратить особое внимание на ширину и разрешение макета.
Для письма с шириной 600 px на десктопе следует задать ширину макета 1200 px с разрешением 144 dpi. Это необходимо для правильного экспорта изображений для Retina-дисплеев.
Каждый дизайн уникален, поэтому все сложные моменты лучше обсудить на стадии подготовки макета, до презентации клиенту. Дизайнеры и верстальщики EMAILMATRIX тесно взаимодействуют друг с другом, чтобы на выходе получилось то, что должно быть.
