Что нужно знать, что бы заказать тянущийся html5 баннер

Ключевая информация, которую необходимо уточнить на рекламной площадке где будет размещаться резиновый баннер — это минимальная и максимальная ширина. Это очень важно, тк от этого будет зависеть какой тип резинового баннера лучше подойдет.

Обычно в тех. требованиях площадки сразу пишут обозначение вида: 100% х 250 (min 300px) — это означает что минимальная ширина баннера будет 300px  по ширине.
Однако для полной картины лучше узнать так же и максимальную ширину, тк в случае если  максимальная ширина будет не сильно отличаться от минимальной, в данном случае, например 500px, то достаточно будет сделать простой респонсив баннер, но если максимальная ширина не ограничена или ограничена большими значениями, например 1280px, то придется делать адаптивный баннер с перестановкой элементов на разной ширине, а разработка такого баннера обойдется  дороже обычного.

Простой «резиновый» (тянущийся) html5 баннер

Резиновый, он же отзывчивый или responsive html5 баннер предполагает, что у элементов баннера заданы координаты, фактические или в виде % от ширины и в зависимости от ширины элементы баннера распределяются заданным образом.

Такие html баннеры нужны тогда, когда по требованиям площадки диапазон ширины не сильно большой, например минимальная ширина должна быть 970 пикселей, а максимальная 1600 пикселей, в таком случае элементы компонуются на размере 970px а если ширина увеличивается то они распределяются по баннеру заданным образом. Соответственно такой html5 баннер может некорректно отображаться, если ширина будет меньше 970px, тк элементы дизайна будут накладываться друг на друга 

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

Пример ниже, в нем объекты прижимаются к краям, минимальная ширина 970px  и тянется баннер до 1600px.

В этом пример объекты всегда расположены по центру и при увеличении ширины появляются поля.

Адаптивный (Adaptive) html5 баннер

Адаптивный html5 баннер предполагает, что при разной ширине баннера, элементы дизайна будут адаптироваться (подстраиваться) к новой ширине.

Технически, внутри одного адаптивного баннера спрятаны несколько ресайзов и в зависимости от ширины баннера прописано какой ресайз показывать. Такие html баннеры нужны тогда, когда по требованиям площадки нужно охватить большой диапазон ширины, например минимальная ширина должна быть 300 пикселей, а максимальная 1280 пикселей, в таком случае необходимо перекомпоновать элементы в зависимости от размера.

На примере ниже, внутри одного баннера спрятано 4 размера, если ширина от 300px до 420px то показываем самый маленький размер, а остальные скрываем, при ширине от 420px до 740px  показываем средний, от 740px до 1180px — большой, больше 1180px — самый большой баннер.

Поэтому адаптивные баннеры стоят в 2 раза дороже обычных (не смотря на то, что делать их сложнее чем в 2 раза по сравнению с обычными)