Требования и рекомендации по баннерам

Адаптивные баннеры под разные устройства
Не секрет, что баннеры подходящие под десктоп, на мобильных устройства не так эффективны и заменты.
Теперь можно будет загружать два разных варианта. Причем если все таки, по каким то причинам у вас не будет мобильного варианта. Для устройств такого типа, мы будет показывать основной вариант десктопа, как и раньше.

Рекомендуем:
Не нагружать мобильную версию баннеров длительной анимацией, в отличие от основного баннера. Эффектиней будет использовать правильно расположение для глаз элементов контента, выдерживая достаточного расстояни между ними.
В среднем, мобильный баннер находится в фокусе не более 1,5 секунд, и зачастую до пользователя не доходит часть информации, которая появляется при анимации.

Форматы и размеры баннеров

Большой баннер
Десктоп версия - 300 х 400px
Мобильная версия - 1080 x 1920px

Отображается на главной странице, в статьях, в разделе работа, и каталоге патнерок и т.д.
Зафиксирован и движется вместе с прокруткой
Помимо ссылки в самом баннере, можно добавить дополнительные ссылки в кнопки (на соцсети, контакты менеджеров и другие лендинги)
Формат: GIF, WebP или HTML5, до 120 КБ
Горизонтальный ТОП, под брендированием
Десктоп версия - 1000 х 90px
Мобильная версия - 1080 x 160px

Отображается на всех страницах сайта;
Формат: GIF, WebP или HTML5, до 120 КБ
Горизонтальный 1, между разными блоками на странице
Десктоп версия - 1000 х 60px
Мобильная версия - 1080 x 200px

Отображается на всех страницах сайта;
Формат: GIF, WebP или HTML5, до 120 КБ
Горизонтальный 2, ниже между разными блоками на странице
Десктоп версия - 1000 х 60px
Мобильная версия - 1080 x 200px

Отображается на всех страницах сайта;
Формат: GIF, WebP или HTML5, до 120 КБ
Основной 1000x230
Десктоп версия - 1000 х 230px
Мобильная версия - 1080 x 200px

Формат: GIF, JPG, PNG, WebP или HTML5, до 200 КБ; WebM или MP4, до 300 КБ

Схематичный пример расположения баннеров на сайте

Технические требования к баннерам формата HTML5

Все используемые файлы должны быть упакованы в zip-архив без вложенных директорий, основной код должен быть в файле index.html и не содержать лишних отступов элементов (margin, padding стили, теги <br> и прочие),
ссылка на рекламируемую страницу должна быть указана в файле index.html и должна быть заменена на макрос {{CLICK_URL}}. Она автоматом поменяется на вашу рефекальную ссылку.
Сылка должна открываться в новом окне или новой вкладке. (target: blank )
Рекомендуем все элементы в верстке обернуть в единичный тег <a>. Чтобы вся область вашего баннера была кликабельной.

Простой пример файла index.html

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a target="_black" class="block" >
<div class="item-logo">
<img src="logo.png" alt="">
</div>
<div class="item-title">
.........
</div>
<div class="item-btn">
<h1>КНОПКА</h1>
</div>
</a>
</body>
</html>

Хороший пример html5 баннера от наших партнеров из Evadav