Дизайн рассылок – технические нюансы
Эта статья скорее для дизайнеров, которые готовят макеты писем. Для того, чтобы верстальщик или ответственный за html-верстку рассылки не прибегал к дизайнеру с правками, обсудим технические ограничения и особенности верстки рассылок, чтобы было понятно как же строить макет.
Стандартно, ширина макета под рассылки 600рх. Изображения лучше использовать в качестве 2х, и лучше их сжимать, чтобы вес был до 700МБ. Если при этом ширина изображения 1200рх, то на экранах ретина (apple), мы получим четкое изображение при этом еще и небольшого веса, т.к. широкое и не очень качественное изображение сожмется в письме в 2 раза и плотность пикселя увеличится и оно станет четким. Дальше интереснее.
Здравствуйте 90-ые
Почтовые сервисы зашифровывают сообщения и у каждого свой метод. Поэтому стандарты верстки писем крайне размыты. У каждого почтовика свои особенности. Кто-то умеет адаптироваться под мобильные устройства, а кто-то в темной теме "раскрашивает" рассылки совсем не в те цвета. Внедрение "фич" для улучшения отображения писем далеко не главная задача почтовика, именно поэтому принято использовать верстку 90-х, а именно верстку таблицами и инлайновые стили. Если веб-верстка далеко ушла вперед, в основном за счет развития функционала браузеров, то большинство почтовиков остаются на том же уровне, стараясь ничего особо не менять. Не хочу судить строго, полагаю процесс шифрования и дешифрования сообщений имеет свои ограничения, поэтому красота писем уходит на второй план. Но, всегда можно найти выход.
Особенности верстки рассылок для дизайнеров
- Визуальное деление на таблицу. Html-верстка рассылок осуществляется таблицами, это важно учитывать при позиционировании элементов. Примерно посмотрите получится ли разбить ваш макет на строки и столбцы. Конечно, это работа верстальщика, но чтобы понять его боли, вам это поможет. Пример визуальной разбивки ниже:
- Используем "безопасные" шрифты. Импорт шрифтов в таких капризных почтовиках, как аутлук и ряде других не работает, поэтому если у вас есть фирменный шрифт, то подберите пару похожих из популярных и не мучайтесь. Зато вам дана полная свобода в изображениях и баннерах, вот здесь уже можно всё – любой шрифт, градиент, начертание и пр.
- Меню в письмах. Фоновое изображение в меню не отобразится. Например, у вас красивое меню на фоне баннера, но есть нюанс. Большинство почтовиков блокирует фоновые изображения за текстом, особенно, если мы говорим про корпоративные ящики. Изображение, как баннер не блокируется, а фоновые изображения идут "в топку". Как выкрутиться? Использовать однотонный фон для блока с меню, либо вынести его из баннера поверх письма. Примеры ниже:
- Иконка и текст, главное не соприкасаться. По той же причине, связанной с частой блокировкой фонов, размещаем иконку над, под или сбоку относительно текста, т.е. не заходя на него. Если всё же есть задача сделать эффект "наложения", то весь этот блок можно вставить картинкой. Так можно делать если текста не очень много, поскольку объемный текст в картинке может пикселить в самом письме.
- Рассылка имеет много изображений. Если вдохновение не знает рамок и ваш макет пестрит изображениями, то важно помнить, что в письмах это опасная практика. Если в письме большое число изображений, то оно имеет низкое соотношение текста к изображениям, а это снижает репутацию домена и письмо может попасть в спам.
- Градиент в таблицах. Если у вас красивая строка с градиентом, то вам в макете нужно разбить этот градиент на ячейки. Почему? Потому что стили приписываются только ячейкам, а не строкам. Такое правило верстки. Поэтому каждой ячейке свой градиент. Также градиент мы не можем применять к границам (обводке) таблицы, но можно выкрутиться. Пример ниже:
- Гифки, пару слов. Вес лучше не более 1МБ, если тяжелее где-то пройдет, где-то заблокируется, явных критериев нет. Тяжелые гифки часто блокируются из-за веса. Почтовики явно не сторонники бодипозитива. Да и еще – первый слайд не должен быть пустым, поскольку аутлук не воспроизводит гиф и застывает на первом экране.
В целом, это всё. Других ограничений в дизайне при верстке рассылок я особо не встречала. Если у вас есть интересные замечания от верстальщиков, напишите, буду рада ознакомиться. Надеюсь, материал был полезен :)
Никогда не понимал как делать качественные рассылки, теперь больше понимания, спасеба
Спасибо, Анастасия, это очень полезная статья!