Мобильная версия сайта
Не забудьте ознакомиться с общими техническими требованиями для баннерной рекламы и техническими требованиями к баннеру на мобильной версии Главной страницы Яндекса.
Основные требования по оформлению баннеров
Все размеры указаны для формата 640 × 134. Для формата 320 × 67 размеры должны быть вдвое меньше. На странице представлены уменьшенные иллюстрации. Чтобы посмотреть их в большем размере, .
Шрифт текста
- Высота шрифта на баннере должна быть не больше:
70 пикселей, если текст занимает не больше 10% баннера;
52 пикселей, если текст занимает не больше 15% баннера;
44 пикселей, если текст занимает не больше 25% баннера;
32 пикселей, если текст написан в одну строку;
- 20 пикселей, если текст написан в две строки;
- 15 пикселей, если текст написан в три строки.
- Минимальный размер шрифта для логотипов, сообщений, иллюстраций, предупреждений — 11 пикселей. Исключение — фотографии упаковок и товаров, а также снимки экранов.
Расположение текста
Расстояние от края баннера до текста должно быть не меньше 10 пикселей.
Требование не относится к расположению возрастного ограничения.
Размер логотипа
Логотип бренда, продукта или технологии должен занимать не больше 28% площади баннера.
Пример хорошего баннера в увеличенном виде:
Цвет фона
- Текст на слишком пестром фоне с мелкими элементами. Текст должен быть контрастным по отношению к фону и легко читаемым.
- Желтый фон, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
Рамка
В баннерах для мобильных устройств рамка не используется. Тем не менее необходимо выделить баннер с помощью горизонтальных границ. Если нет белых элементов, которые пересекают край баннера, или цвет фона отличается от белого, то допускается отсутствие границ.
В другом случае необходимо добавить контрастные границы толщиной в 1 пиксель по горизонтали (сверху и снизу). Наиболее подходящий цвет — #DADADA.
Длительность анимации
Баннер или его отдельные элементы не должны мигать, отвлекая пользователя.
Допустимая частота смены элементов на баннере — не чаще 1 раза в 2 секунды.
Читаемость обязательной информации
Обязательная правовая информация (например, название банка в ОПФ, сроки акции и т. д.) должна быть четко видна сразу, без взаимодействия пользователя с баннером. Подробнее смотрите в дополнительных рекомендациях.
Пример хорошего баннера в увеличенном виде:
Элементы интерфейса на баннере
- Баннер не должен маскироваться под элементы пользовательского интерфейса — например, под системное окно Windows.
- Баннер не должен содержать стандартные элементы пользовательского интерфейса (курсор, поисковая строка, различные кнопки и т. п.), которые не выполняют соответствующие функции.
- Не следует использовать желтый в элементах интерфейса, так как этот цвет применяется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
Возрастная метка
Если на баннере необходимо возрастное ограничение, то:
- Его нужно ставить в верхнем правом углу баннера.
- Шрифт — «Arial Regular» 12 пунктов.
- Цвет — #DADADA.Примечание.
Если ограничение серого цвета не читается, например из-за пестрого фона, его следует разместить на белой подложке.
Кнопка/бейдж магазина приложений
- Максимальные размеры кнопки или бейджа: высота — 50 пикселей, ширина — 150 пикселей.
- Не рекомендуется делать кнопку или бейдж желтыми, так как этот цвет используется для стандартных элементов дизайна страниц Яндекса. Допустимый желтый цвет — #F0E5AD и светлее.
- Расстояние от края баннера до кнопки должно быть не меньше 10 пикселей.
- К бейджу магазина приложений предъявляются такие же требования, как к логотипам.
Дополнительные рекомендации для полной и мобильной версий сайта
Читаемость шрифта
90% отказов при прохождении модерации случаются из-за плохой читаемости шрифта.
- Лучше отказаться от дробных координат при выравнивании шрифта в HTML5-баннере, чтобы избежать эффекта «размытости» (требуется проверка во всех популярных браузерах).
- Рекомендуется использовать векторные шрифты.Совет.
Если использовать векторный шрифт невозможно, сохраните растровые текстовые блоки в максимально хорошем качестве (с учетом ограничений по размерам баннера).
- В некоторых случаях шрифт в векторном формате также содержит эффект «размытости».
Эффект может появиться по нескольким причинам:
- маленький размер
- сложная форма шрифта (например, с засечками)
- шрифт не адаптирован для использования в вебе или изначально разработан для заголовков и крупных кеглей
Решить проблему «размытости» шрифта, в том числе и в векторном формате, можно несколькими способами:- увеличить кегль шрифта
- заменить шрифт на более простой
- использовать шрифт, адаптированный для веба и маленьких кеглей
Не используйте эффекты и украшательства
Украшательство шрифтов и плашек (тень, обводка, объем) может усложнить восприятие сообщения.
Уменьшите количество шрифтов
- Используйте не больше двух шрифтов и начертаний.
- Используйте не больше трех цветов в шрифтах.
- логотипу бренда, продукта или технологии;
- предупреждениям или обязательной правовой информации;
- шрифту возрастной метки;
- шрифту, который является частью иллюстрации.
Не используйте изображения/фото низкого качества
- С артефактами сжатия
- С размытием или чрезмерной четкостью
Выберите главное
Не пытайтесь вместить большое количество информации на узкий баннер. Придумайте короткую и понятную формулировку, чтобы сообщение считывалось моментально.
Не мельчите
- Не используйте маленькие изображения объектов с большим количеством мелких деталей.
- Не используйте фотографию в качестве фона для баннера, если на ней много мелких деталей.
Оформление обязательной юридической информации
Текст должен быть контрастным и легко читаемым. Минимальный размер шрифта — 11 пикселей. Информация должна присутствовать на экране не меньше 3 секунд.
Возможные варианты оформления:
- сроки акции — на первых кадрах;
- остальная информация — под плашкой «юридическая информация» и доступна по наведению курсора.
При показе кадр с обязательной информацией должен отображаться не менее 3 секунд.