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

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

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


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

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

    Отображается на главной странице, в статьях, каталоге франшиз и т.д.
    Зафиксирован и движется вместе с прокруткой
    Формат: GIF или HTML5 , до 120 КБ

     

  2. Горизонтальный ТОП, под брендированием
    Десктоп версия - 1000 х 90px
    Мобильная версия - 1080 x  160px

    Отображается на всех страницах сайта;
    Формат: GIF или HTML5, до 120 КБ

     

  3. Горизонтальный 1, между разными блоками на странице
    Десктоп версия - 1000 х 60px
    Мобильная версия - 1080 x  200px 

    Отображается на всех страницах сайта;
    Формат: GIF или HTML5, до 120 КБ

     

  4. Горизонтальный 2, ниже между разными блоками на странице
    Десктоп версия - 1000 х 60px
    Мобильная версия - 1080 x  200px 

    Отображается на всех страницах сайта;
    Формат: GIF или HTML5, до 120 КБ

     

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

Технические требования к баннерам формата 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" href="{{CLICK_URL}}">
                <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>