Правила дизайна адаптивных email рассылок
Пособие дизайнеру о том, как стать другом html-верстальщику
Email рассылки — специфичный объект дизайна и html-верстки. Существует великое множество почтовых программ, интерпретирующих верстку по своему уникальному методу, и найти универсальный рецепт дизайна и html-верстки, подходящий большинству из них, крайне сложно.
Но есть несколько базовых и развернутых правил, соблюдение которых, позволит разработать, скажем так, компромиссный email. Тем не менее, в рамках этих компромиссов можно придумать и разработать бесконечное количество вариантов. Что может быть лучше для дизайнера, чем фантазия, ограниченная требованиями?
Базовые знания
- Дизайн разрабатывается в растровом редакторе, например, в фотошопе
- Разрешение изображения: 72 dpi (больше не нужно)
- Максимальная ширина макета: 600 px
- Минимальная ширина макета: 300-480 px (не принципиально)
- Для уменьшения «веса» исходного файла нужно перевести все Smart Object в растровые изображения.
- Минимальные отступы для текстов слева и справа от края документа — 20 px
- Фон письма, и, в особенности, под текстовыми блоками — равномерный, без градиентов, не изображение.
- Тля текста использовать только системные шрифты: Arial, Tahoma, Verdana, Times New Roman, и прочие. Все текстовые блоки, написанные не системными шрифтами, верстаются в виде изображений и у пользователей, у которых в почтовой программе отключено отображение изображений, эти блоки видны не будут по-умолчанию.
- Все текстовые ссылки нужно выделять либо цветом, либо подчеркиванием
- Стоит избегать горизонтальный вариант навигационного меню или предусмотреть это меню таким образом, чтобы пункты меню корректно смещались друго под друга, будучи отцентрованными. В противном случае такое меню будет верстаться картинками, что повлечет за собой пропорциональное уменьшение текста пунктов меню на малых разрешения.
Что нужно знать об адаптивности в дизайне email
Изображения
При дизайне нужно учитывать, что графические элементы не могут быть заменены другими изображениями при разных размерах окна просмотра. Т.е., для всех вариантов отображения email (для различных устройств и размеров окон) нужно использовать одни и те же изображения, пропорционально меняя размеры от большего к меньшему., Размеры изображений могут не меняться, если ширина изображений позволяет корректно разместить такое изображение в дизайн мобильной версии.
Например, в обычной жизни логотип компании может иметь 2, 3 и более версии расположения элементов, композиций (надпись, подпись, фирменный знак и пр.): для вертикального, горизонтального, кругового и пр. позиционирования, то в дизайне email можно использовать только одну версию по выбору дизайнера и клиента. Причем, для десктопной версии шириной 600 px логотип может быть только больше, чем для мобильной версии дизайна шириной в 300 px: трансформация будет проходить от большего к меньшему, а не наоборот.
Шрифты и тексты
Как говорилось выше, в дизайне текстов можно использовать только стандартный набор шрифтов: Arial, Tahoma, Verdana, Times New Roman и т.п.
Размеры всех шрифтов в дизайне нужно округлять до целых величин: 12, 13, 14 pt и т.д. Минимально читаемый размер шрифта, например для дискламера — 8 pt. Корректный размер шрифта для текстового блока – 12-14 pt.
Соблюдая эти 2 простых правила, текст писем будет хорошо читаться на любых устройствах.
Модульная адаптивность
Разрабатывая дизайн, стоит учитывать и возможность адаптировать целые блоки информации (текст+картинки), например, смещение блоков друг под друга (чаще), пропорциональное изменение размеров блоков (реже).
Ниже приведены возможные варианты подобной трансформации верстки.
Стоит обратить внимание на то, что элементы не меняют выравнивание: если в десктопной версии элементы выровнены по левому краю, то и в мобильной версии – также. В приведенных ниже примерах – логотип, кнопки перехода.
Вариант 1
Пропорциональная адаптация. Размеры изображения изменены пропорционально, текст – по ширине письма.
Вариант 2
Две колонки. При уменьшении размера блоки целиком смещается друг под друга.
Вариант 3
Блочная адаптация. Блоки смещаются друг под друга: правые под левые, и левые под правые. Размеры изображений изменяются пропорционально от большего (декстопная версия) к меньшему (мобильная версия)
Вариант 4
Три, четыре и более колонок. Блоки смещаются друг под друга постепенно.
Например, при среднем размере окна трехколоночная верстка выстраиваются так: сверху 2 колонки, снизу – одна. Конфигурация отцентрована по горизонтали.
Если размер окна еще меньше — колонки располагаются друг под другом. Порядок можно менять.
