 Технические требования
к рекламным материалам
1 Графические
Наименование формата
|
Тип устройства, ориентация
|
Размер баннера, px
|
Размер файла
| |
Полноэкранный
|
Смартфоны, книжная ориентация
|
320х480
|
до 70 Кб
|
Смартфоны,
Альбомная ориентация
|
480х288
|
до 70 Кб
|
Планшеты
|
640х640
|
до 120 Кб
|
Верхний
|
Смартфоны
|
320х100
|
до 80 Кб
|
Планшеты
|
1000х120
|
до 150 Кб
|
Поддерживаемые форматы: - GIF, JPEG, PNG, Animated GIF.
Максимальное количество знаков в ссылке, содержащейся в баннере (URL), не должно превышать 500 знаков.
Ссылки (URL) на сайт (адрес страницы, которая открывается по клику на баннер) принимаются только в кодировке UTF-8.
Не принимаются баннеры с включенными в них ссылками, содержащими редирект более трех раз
Просьба включать в наименование файла формат и размер баннера.
Важно: креативы должны быть присланы минимум за 2 рабочих дня до размещения.
Внимание! Рекламная кампания пройдет эффективнее, если посадочная страница, на которую попадает пользователь после клика на рекламу, адаптирована для просмотра с мобильных устройств, т.к. наша аудитория - это преимущественно пользователи смартфонов.
Полноэкранный видео баннер.
Горизонтальный (смартфоны и планшеты):
Расширение видео-файла — MP4
Максимальный размер видео-файла — до 3 Мб
Видео-кодек - Н.264 MPEG-4 AVC
Аудио-кодек – MPEG AAC Audio, 44 kHz, stereo
Размер изображения – 1136х640
Видеоролик должен содержать параметры (высоту и ширину) в метаданных.
Продолжительность показа видеоролика — до 20 секунд.
Вертикальный (смартфоны и планшеты):
Расширение видео-файла — MP4
Максимальный размер видео-файла — до 3 Мб
Видео-кодек - Н.264 MPEG-4 AVC
Аудио-кодек – MPEG AAC Audio, 44 kHz, stereo
Размер изображения – 768х1181 (соотношение сторон, ширина к высоте 0,65-0,7)
Видеоролик должен содержать параметры (высоту и ширину) в метаданных.
Продолжительность показа видеоролика — до 20 секунд.
 
Горизонтальный Вертикальный
3 Полноэкранный видео баннер.
Важно: креативы должны быть присланы минимум за 3 рабочих дня до размещения.
Внимание! Рекламная кампания пройдет эффективнее, если посадочная страница, на которую попадает пользователь после клика на рекламу, адаптирована для просмотра с мобильных устройств, т.к. наша аудитория - это преимущественно пользователи смартфонов. Видеобаннер может отображать кнопки "Подробнее", крестик закрытия и отключения звука. Кнопка "Подробнее" располагается строго внизу видеоролика и в случае вертикального видео перекрывает контент, например, дисклеймер, который находится чаще всего внизу, что недопустимо. Чтобы избежать перекрытия элементов ролика, мы рекомендуем устанавливать кликабельной всю площадь вертикального видео или же располагать элементы таким образом, чтобы кнопка "Подробнее" не перекрывала их. Данная рекомендация относится также к кнопкам закрытия и отключения звука, т.к. в верхнем углу может располагаться важный элемент контента, например, возрастное ограничение.
Требования к поддержке мобильных ОС:
Android не ниже 4.0
iOS не ниже 6.0
Windows Phone не ниже 7.5
Требования к поддержке мобильных браузеров:
Safari Mobile
Chrome Mobile
Android Browser
YaBrowser
IE Mobile
Opera Mobile
Firefox for Android/iOS
Обязательные требования:
Архив с материалом на проверку должен быть предоставлен не позднее 5-и рабочих дней до старта РК.
Обращаем ваше внимание, что с нашей стороны обеспечивается лишь соответствие отображения оригинального баннера и размещенного на портале. Корректность отображения баннера на требуемом к поддержке многообразии устройств, браузеров и операционных систем должна обеспечиваться исполнителем самостоятельно.
Баннер должен представлять из себя самостоятельно работающую HTML страницу и не использовать внешние ресурсы. Все ресурсы должны быть приложены локально.
HTML страница должна быть именована index.html.
Баннер необходимо выполнить адаптивным, поскольку iframe, в котором он будет располагаться, занимает все окно браузера устройства.
Не должно присутствовать никакого функционала, препятствующего отображению баннера в iframe.
Обязательные требования:
При разработке креативе учитывайте непрозрачную кнопку закрытия баннера в правом верхнем углу размером 50px на 50px.
Баннер не должен иметь горизонтальную или вертикальную прокрутку.
Весь используемый CSS необходимо располагать в HTML файле.
Основная кликовая ссылка заводится нашим аккаунтменеджером в систему adfox. Поэтому, для того, чтобы инициировать переход по кликовой ссылке, необходимо выполнить js код: parent.postMessage('banner.redirect', '*'); Код можно установить атрибутом для любого html элемента.
Если требуется установить более одной ссылки, необходимо использовать обычные ссылки с параметром target='_blank'. При переходе по такой ссылке необходимо регистрировать уникальное событие.
Если требуется вести учет событий, необходимо по наступлении события вызвать код:
parent.postMessage('banner.event.N', '*');, где N – номер события. Всего можно регистрировать до 5 уникальных событий с номерами, соответственно: 1,2,3,4,5.
Если требуется предотвратить закрытие баннера по таймеру, необходимо вызвать код parent.postMessage('banner.preventClosing', '*').
Готовый материал к отправке должен представлять из себя ZIP архив, содержащий в себе HTML страницу, а также прочие материалы, необходимые для отрисовки баннера:
изображения, шрифты, скрипты.
Общее количество файлов в архиве не должно превышать 10 единиц, а общий размер не превышать 3мб.
Обязательные требования:
Если требуется получить идентификаторы рабочей и домашней станций метро пользователя, необходимо вызвать код parent.postMessage('banner.getUserData', '*').
Ответ должен прийти в формате JSON:
{"homeStationId": 25, "jobStationId": 35}
Словарь соответствия идентификаторов станциям высылается по запросу.
Использование гироскопа и акселерометра. Если требуется доступ к событиям devicemotion и deviceorientation (предоставляют данные о положении устройства в пространстве), необходимо выполнить действия согласно примеру: 
Обязательные требования:
При разработке креативе учитывайте непрозрачную кнопку закрытия баннера в правом верхнем углу размером 50px на
Рекламодатель предоставляет ссылку на страницу перехода вместе с рекламным материалом. Рекламодатель обязуется не изменять материал на странице перехода до завершения рекламной компании. При необходимости заменить ссылку, рекламодатель вправе обратиться рекламораспространителю. Страница перехода должна подтверждать информацию, размещенную на рекламном материале. Содержание сайта должно соответствовать требованиям действующего законодательства РФ.
Рекомендации:
Использовать как можно меньше файлов.
По возможности размещать js код внутри HTML страницы.
Оптимизировать изображения, например с помощью https://tinyjpg.com/.
Использовать спрайты.
Важно: креативы должны быть присланы минимум за 5 рабочих дней до размещения.
Внимание! Рекламная кампания пройдет эффективнее, если посадочная страница, на которую попадает пользователь после клика на рекламу, адаптирована для просмотра с мобильных устройств, т.к. наша аудитория - это преимущественно пользователи смартфонов.
Тестирование
Готовый баннер можно протестировать непосредственно на портале по адресу: wi-fi.ru/banner_tests/html5.
Доступны следующие параметры:
url: публичный адрес, где размещается баннер. В частности, это может быть наш CDN сервер, либо публичный сервер исполнителя баннера. Параметр является обязательным.
closeTimer: время в секундах, через котрое баннер автоматически закроется. Параметр необязательный.
showCloseButton: время в секундах, через которое активируется крестик, с помощью которого можно закрыть баннер вручную. Параметр необязательный.
Все параметры передаются в строке браузера в стандартном для GET запросов виде:
?параметр1=значение1&параметр2=значение2&параметр3=значение3
Например, строка http://wi-fi.ru/banner_tests/html5?url=http://cdn.vmet.ro /banners/maximatelecom/pets&closeTimer=20&showCloseButton=5 откроет баннер
http://cdn.vmet.ro/banners/maximatelecom/pets/ с установками закрытия баннера через 20 секунд и активацией крестика закрытия через 5 секунд.
Для удобства размещения разработки брендированных материалов, размещаемых на странице авторизации, разработан специальный макет, а также ряд правил и ограничений по его использованию. В качестве финальной работы на проверку мы ожидаем получить этот макет с внесенными изменениями, упакованным в ZIP архиве на электронную почту вашего аккаунтменеджера.
Важно! Общий размер всех файлов, используемых в брендировании, за исключением тех, которые содержатся в исходном макете, не должны составлять более 2 мегабайт в несжатом виде, а количество таких файлов не должно превышать 10 единиц.
Макет и технические требования к нему постоянно совершенствуются. Актуальную версию макета и требований, а также любую требуемую информацию всегда можно получить по ссылкам, расположенным в конце настоящих требований.
Основные требования:
Качество верстки должно быть проверено изготовителем креатива и заказчиком РК на всем многообразии желаемых устройств до старта РК. В противном случае оперативные правки не дадут должного эффекта из-за кеширования материалов на стороне пользователей.
К данному техническому требованию прилагается архив, содержащий в себе макет: HTML документ, в рамках которого должна осуществляться разработка брендированной страницы. а также вспомогательные файлы, обеспечивающие визуальное сходство макета брендирования с реальным отображением материалов на странице авторизации портала wi-fi.ru.
2
Основные требования:
Любые манипуляции с макетом для создания брендированной страницы допускаются исключительно в файле assets/branding/style.css и внутри контейнера #content файла index.html.
Все файлы, относящиеся к брендированию (изображения, шрифты и прочее), должны располагаться в папке assets/branding. Не допускается использование материалов, размещенных удаленно.
Не допускается использование каких-либо пользовательских скриптов (Javascript) на странице.
Все элементы, не относящиеся к брендированию, а именно, шапка, футер и кнопка «войти в интернет», не должны перекрываться элементами брендирования, не должны иметь значение параметра z-index ниже 0, должны быть доступны для клика или тапа, а размещенные внутри них тексты и иконки должны быть явно читаемыми.
Кнопка «войти в интернет» должна быть визуально отделена от элементов брендирования.
Все стили должны быть прописаны относительно контейнера #content. Стилизация самого элемента #content, а также элементов, находящихся вне #content, не допускается.
Допускается изменение фона элементов header, #disableAd, #join-internet. Однако это также должно быть сделано в файле style.css. Стили, расположенные в других файлах, будут проигнорированы.
Не допускается делать элементы header, #disableAd, #joininternet, а также дочерние по отношению к ним, прозрачными.
Общий размер всех файлов, используемых в брендировании, за исключением тех, которые содержатся в исходном макете, не должны составлять более 2 мегабайт в несжатом виде, а количество таких файлов не должно превышать 10 единиц.
Основные требования:
Любые манипуляции с макетом для создания брендированной страницы допускаются исключительно в файле assets/branding/style.css и внутри контейнера #content файла index.html.
Для сбора статистики и учета кликов, желаемоей ссылке необходимо добавить атрибут data-event-click, c возможными значениями от 1 до 7:
Рекламодатель предоставляет ссылку на страницу перехода вместе с рекламным материалом. Страница перехода должна подтверждать информацию, размещенную на рекламном материале. Содержание сайта должно соответствовать требованиям действующего законодательства РФ.
Рекламодатель обязуется не изменять материал на странице перехода до завершения рекламной компании. При необходимости заменить ссылку, рекламодатель вправе обратиться к рекламораспространителю.
Если РК предполагает скачивание приложений из AppStore и/или Google Play, ссылка на скачивание необходимо прописывать без редиректов.
Рабочие материалы
Архив с материалами, необходимыми для создания брендированной страницы, доступен по ссылке.
Пример сверстанной страницы для брендирования страницы авторизации доступен по ссылке.
Пример отображения доступен по ссылке.
4 Общие требования
Рекомендации к landing page клиента:
Страница клиента должна иметь адаптивный дизайн и одинаково хорошо отображаться на всем многообразии мобильных устройств.
Страница, на которую осуществляется переход, должна выдерживать до 500 запросов в минуту.
Архив с макетами доступен по ссылке.
Страница авторизации:
Для работы мы предоставляем макеты для устройств iPhone 4/5/6/6plus с отображением нашего интерфейса.
В наборе также присутсвуют макеты для горизонтальной ориентации устройств. Претензии к горизонтальному отображению при отсутствующих горизонтальных макетах не принимаются.
Готовые макеты для 4/5/6/6plus позволяют покрыть большую часть мобильных устроств. Для телефонов c OS Android/Windows размеры идентичны.
Основные:
Макет должен быть представлен в формате PSD, цветовое пространство RGB.
Имя файла должно состоять только из латинских букв, цифр и _ (underscore).
Если макет дополняет/изменяет уже существующий, то в его имени должен быть суффикс, указывающий версию (например landing_v2.psd).
В рамках макета желательно должна быть соблюдена сетка.
Rulers должны быть выровнены точностью до одного пикселя. Полпикселя недопустимо.
В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта. Ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24 пикселей.
При разработке дизайна «под разрешение» обязательно отрисовывать в разрешении окна браузера, а не устройства (iphone5 - при 568px активная высота браузера 460px).
Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете.
Основные:
На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех странц в одном макете приводит к использованию чрезмерного количества оперативной памяти и замедляет работу.
Макет должен предусматривать резиновую/адаптивную верстку. Таким образом желательно иметь два макета:
широкий 1000px по ширине и узкий, например 320px.
Если в макете предполагается использование векторных элементов (иконки, логотипы), необходимо приложить их отдельным файлом в формате .svg.
Слои (layers):
Каждый элемент должен находиться в одном слое, названным интуитивно понятным именем, а не «slice copy 1,2».
Все слои одного логического элемента должны находиться в одной папке (например, модуль авторизации).
Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.». 5. Недопустимо использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)
Нельзя использовать режим «Наложение цвета».
Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента).
Нежелательно использовать градиентные границы (border, stroke).
Текст:
Для текстовых элементов обязательно указывать шрифт и его размер.
Размеры (кегль) шрифтов должны быть целыми числами. Использование дробных чисел в качестве размера шрифта недопустимо.
Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля.
Обязательно прикладывать к макету шрифты, использовавшиеся в макете, в формате TTF, OTF.
Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
Недопустимо использовать прозрачность для элементов, содержащих текст.
Для каждого отдельного блока текста должен быть использован отдельный text box.
Межбуквенный/межсловный интервал, отличный от дефолтного (100%), должен быть отмечен комментарием.
Из текстовых эффектов допустима только тень, и всѐ возможно эмулироватьс еѐ помощью.
Желательно не использовать в макете более 2-х нестандартных шрифтов, их количествово сильно влияет на рендеринг страницы в браузере.
Желательно все текстовые элементы делать без сглаживания.
Рыба:
1. Для повторяющихся элементов (списки и т.д.), рыба должна быть разной.
Интерактивные элементы:
Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний.
Ссылка:
Обычная (не посещѐнная, не активная)
При наведении (hover)
При нажатии (click)
Посещѐнная (visited)
Кнопка:
Обычная
При наведении (hover)
При нажатии (click)
Заблокированная (disabled)
Поле ввода (input, select):
Обычное Активное (active)
Заблокированное (disabled)
Checkbox, radio button:
Обычный
Активный (active)
При наведении (hover)
Заблокированный (disabled)
|
