Требования к дизайну писем
TRANSCRIPT
Требования к дизайну писем
Обучалка для дизайнера
Ширина общего макета, включая рамки, отступы и тени, не должна превышать 700px.
700 px
Макет
Структура письма
прехедер
хедер/шапка
тело/контент
футер/подвал
Структура для последующей верстки
Из чего состоит письмо?
★Текстовые блоки
★Баннеры
★Иконки
★Товарная сетка
★СТА (кнопки и призывы)
★Основной фон/паттерн
Шрифты, которые отображаются на любых устройствах в текстовых блоках
Шрифты без засечек: Arial
Verdana Tahoma Trebuchet MS
Доступные шрифты
Остальные шрифты можно использовать для надписей на баннерах и статическом тексте, который будет в верстке картинкой.
Шрифты с засечками: Courier
Courier New
Georgia Times
Times New Roman
Что разместить?
• Краткий цепляющий анонс рассылки
• Ссылка на веб-версию письма
• Ссылка отписки
Прехедер
Что разместить?
Хедер (шапка)
Логотип
Слева или по центру
Фирменный слоган
Под логотипом, либо сбоку
Контакты обратной связи
Меню
Как разместить?
Десктоп
Мобильные устройства
Контакты обратной связи размещаются либо в одну строку для компактности последующей верстки, либо друг над другом.
Контакты обратной связи
Как разместить?
Десктоп
Мобильные устройства
Меню состоит из однотипных блоков (текста и/или иконок), не отвлекающих внимание от основной информации. Для адаптации под мобильные устройства пункты переносятся друг под другом без вреда для отображения.
Меню
Основной фон
★ Следует отказаться от использования фоновых изображений (текст на неоднородном фоне). С его отображением могут возникнуть проблемы в outlook. Впрочем, наши верстальщики научились справляться с этой проблемой :)) Посоветуйтесь с одним из них по поводу конкретного фона, либо предусмотрите альтернативный однотонный фон для outlook.
★ Помни о том, что при адаптации высота блока станет больше. Тогда фон должен дублироваться или продолжаться.
Боковой фон
Боковой фон для отображения письма на десктопе может быть как схож с основным фоном письма, так и отличаться от него.
Схожий фон
Фон-текстура
Также гармонично будет смотреться фон-текстура.
Еще о подготовке к верстке
★ Следует учитывать, что не все мобильные устройства интерпретируют медиазапросы. В этом случае при адаптации блоки могут смещаться без изменения выравнивания, цвета, размера и т.д.
★ В верстке писем НЕ используется • Flash анимация • Java Script • Формы • Эффекты наведения (:hover)
★ Зато используются gif-изображения
Размещение блоков
Блоки не должны мешать друг другу при верстке.
Слои не накладываются друг на друга.
Это относится как к различным типам блоков,
так и однотипным.
баннеры
фон
СТА
текст
Баннеры
Если предлагается нарисовать коллаж из товаров, разные части которого ведут на конкретный изображенный товар, он должен быть нарисован «по квадратам». Нельзя коллаж разделить по диагонали!
P.S. Примеры баннеров взяты из рассылок компании H&M
Блоки в одном ряду
Блок при блочной адаптации (например, блок товара) не должен превышать 300 px вместе с отступами.
Десктоп
Мобильное устройство
Футер
Что разместить?
Логотип Причина подписки
Контакты обратной связи
Ссылка отписки
Ссылки на соц.сети
Футер
Как разместить?
Десктоп Мобильные устройства
Размещение элементов в футере должно быть удобным для адаптации под мобильные устройства без вреда для отображения.
Конечный файл
★ В формате PSD.
★ Максимально разбитый по слоям — каждый элемент на отдельном слое.
★ Весь текст редактируемый. Размер — в пунктах, а не в пикселях. Начертание — четкое.
★ Прозрачность текстового слоя — 100%.
