Технические требования к материалам, предоставляемым заказчиком для размщения на сайте RB.RU

Брендированная подложка

Виды подложек:

• Background HTML5

Background HTML5

Background HTML5 - баннер, который позволяет заменить фон сайта на HTML креатив или изображение.

Фоновое изображение по ширине должно быть равно ширине сайта + ширина боковых полей бекграунда. Вес фонового изображения не должен превышать допустимое ограничение в 300Кб. Фоновое изображение может быть как самостоятельным баннером, в таком случае HTML креатив подготавливать не нужно, либо фоновое изображение может быть заглушкой, которая покажется в случае, если браузер пользователя не поддерживает HTML5 код креатива.

Требования к фоновому изображению:

Размеры:

• ширина: 1980px
• высота: 1200px

Формат: jpeg, png

Важно учесть при отрисовке фонового изображения!

Ширина контента сайта размера "десктоп" - 1180px

Меньше размера окна браузера 1220px - фоновое изображение не отображается

Полезное использование фонового изображения: Сверху страницы - после основного меню оставляем отступ 200px

На схеме цветом выделены:

• участок, видимый пользователю на разных размерах экрана
• участок, который может быть скрыт от видимости на разных размерах экрана

Размеры на схеме:

• h1: 1200px
• h2: 200px
• w1: 1980px
• w2: 1180px

Схема расположения фонового изображения:

Баннер-интерскроллер (десктоп)

Banner Interscroller HTML5 - отображает содержимое с использованием параллакс эффекта. Интерактивный баннер, размещенный под контентом сайта. Параллакс эффект при скролле страницы создает впечатление, что баннер, прерывая контент сайта, начинает показываться с нижней части, по мере скролла постепенно раскрываясь вверх, и также плавно скрываясь снова под контентом сайта. В нижней части баннера расположена плашка с уведомлением, что это реклама.

При подготовке креатива, либо фонового изображения необходимо предусмотреть расположение элементов с учетом того, что при скролле страницы верхняя и нижняя части баннера будут скрыты в определенные моменты.

Требования к HTML креативу:

Креатив должен быть сверстан адаптивно - при изменении размера окна элементы креатива должны корректно масштабироваться

В креативе ширну контейнера (canvas) необходимо указывать - “100%”, высоту - “auto” для того, чтобы креатив можно было размещать и на главной странице на всю ширину контента и на внутренних страницах – в местах, где контент по-ширине уже.

Размеры:

• ширина: 1180px
• высота: 180px и выше (по согласованию с менеджером)

Требования к изображению

При использовании изображения в качестве материала для баннера корректное отображение

Размеры:

• ширина: 1180px
• высота: 180px и выше (по согласованию с менеджером)

Баннер-интерскроллер (мобильный)

Banner Interscroller HTML5 - отображает содержимое с использованием параллакс эффекта. Интерактивный баннер, размещенный под контентом сайта. Параллакс эффект при скролле страницы создает впечатление, что баннер, прерывая контент сайта, начинает показываться с нижней части, по мере скролла постепенно раскрываясь вверх, и также плавно скрываясь снова под контентом сайта. В нижней части баннера расположена плашка с уведомлением, что это реклама.

При подготовке креатива, либо фонового изображения необходимо предусмотреть расположение элементов с учетом того, что при скролле страницы верхняя и нижняя части баннера будут скрыты в определенные моменты.

Требования к HTML креативу:

Размеры:

• ширина: 300px
• высота: 520px

Требования к изображению:

Размеры:

• Формат

• ширина: 300px
• высота: 520px

Фуллскрин с видео (десктоп)

Ширина и высота фуллскрина - адаптивная, 100% от размеров окна браузера

Размеры видео:

• ширина: 1230px
• высота: 705px

Допустимые форматы видео: форматы, которые поддерживают браузеры. Рекомендуемый формат mp4.

Фуллскрин (мобильный)

Требования к HTML креативу:

Креатив должен быть сверстан адаптивно - при изменении размера окна элементы креатива должны корректно масштабироваться

Ширина и высота фуллскрина - адаптивная, 100% от размеров окна браузера

Требования к изображению:

Размеры:

• ширина: 300px
• высота: 500px

Формат: jpeg, png