Адаптивным называют баннер, который вписывается в заранее определённые на странице размеры блока (они соответствуют размерам рекламного места на площадке или подбираются пользователем самостоятельно).
Несомненным преимуществом HTML5-баннеров является то, что при их установке на страницу сайта донора ссылка на другой сайт репициент не передаёт вес сайта донора. Это достигается тем, что в ссылках баннера устанавливается запрет на их индексацию. Баннеры могут не показываться в компьютере и в мобильных устройствах при включенной в браузере пользователя блокировке рекламы и отключении Java (сейчас редко кто её отключает). Отключите блокировку в своём устройстве и подключите Java и все баннеры будут показываться.
К сведению: для баннеров понятия "резиновый" и "блочный адаптивный" разные.
Резиновый баннер — тот же фиксированный, но только с учётом того, что он будет просматриваться на всех устройствах. Его обычно делают с размерами близкими к квадрату. При просмотре на мобильниках он просто уменьшается пропорционально со всей страницей, на которой он размещён, и при этом элементы его расположены фиксированно и не перемещаются друг относительно друга.
ИНТЕРАКТИВНЫЙ ДИНАМИЧЕСКИЙ БАННЕР В HTML5 представляет собой отдельно созданную страницу, которая встраивается на сайт через «iframe» и представляет собой несколько файлов объединённых в один блок на одной или нескольких страницах. Он может просматриваться локально на компьютере и онлайн на сайте. Легко пересылается в виде архивного файла ZIP всеми способами передачи контента: через e-mail и все мессенджеры. Примерный сценарий анимации в баннере и действий на нём заказчик предлагает сам, а я создаю макет и прописываю действия на нём. По желанию в любом месте баннера можно вставить разные плюшки: развевающийся флаг с Вашим логотипом, фото, звёзды, розы, сердечки, мерцающие гифки, счётчики метрики или аналитики и т. п.
Плюсы: адаптирован под разные устройства, есть возможность вставить активные ссылки на телефон, емэйл, мессенджеры, геопозицию, вставить видео (в том числе с ютуба) и аудио контент, можно разместить на любом сайте. При необходимости относительно просто по запросу покупателя выполняется бесплатное редактирование данных (но без фанатизма, конечно).
Минусы: средний общий размер всех файлов и при низкой скорости интернета медленная загрузка на странице сайта, высокая стоимость выполнения.
Также можно встроить в баннер код любого счётчика (метрика, аналитика и т. п.) и отслеживать через него статистику переходов по ссылкам. Если ссылки установить через метки (UTM в Яндексе), то можно просматривать статистику посещения каждой страницы при переходе на каждую с баннера. На таком баннере можно установить много ссылок на разные страницы и даже на разные сайты.
Возможно в таких баннерах встроить один или несколько видеороликов и аудиороликов, на которые переходы будут выполняться вручную при нажатии на кнопку "Далее" или "Назад". Можно встроить анимационные гиф изображения и включение звука.
А теперь немного о самих блоковых баннерах. В них для разделения блоков применяется тег div, от английского division — раздел.
Для вертикального размещения такие баннеры не применяются, так как они уже адаптированы под мобильные устройства. А блоковый баннер обычно верстается, если нужно его горизонтальное размещение и в то же время, чтобы он корректно просматривался на мобильных. В этом случае будет 4 блока, которые на мобилках с самым узким экраном разместятся вертикально один под другим. Блоков может быть больше и меньше, но пропорции между шириной баннера и блоков должны быть соблюдены. Но в каждом конкретном случае изготовления баннера количество блоков может быть разным от одного до четырёх или более. Кроме того, алгоритм показа адаптивного баннера зависит от того сколько места на странице будет выделено вебмастером сайта, на котором этот баннер будет размещаться. Если он задаст баннеру на странице ширину 100%, то он будет полностью показываться во всю длину. Если же задаст 17% или другое значение, то элементы баннера будут выстраиваться вертикально друг под другом.
Адаптивный блочный баннер — в нём выполняется перемещение элементов из горизонтальной компоновки в вертикальную. При сужении экрана элементы баннера как бы перескакивают друг под друга и располагаются последовательно один под другим. При этом может измениться первоначальный замысел баннера, если задумано движение элементов по горизонтали. Пример — машина везёт продукты в магазин слева направо, в горизонтальном баннере всё будет нормально, а вот в блочном окажется, что машина едет вверху сама по себе, а магазин находится под ней тоже сам по себе. Эту особенность адаптивных баннеров нужно иметь ввиду при проектировании их сценариев.
Для проверки баннера на адаптивность можно использовать удобное расширение в хроме Responsive Viewer. Скачиваете его из интернета и устанавливаете на компьютер, далее переходите в хроме на свой сайт и кликаете на иконку Responsive Viewer в строке расширений. Затем в этом приложении добавляете устройства для просмотра. По умолчанию показывается много устройств, но можно оставить только те, которые Вам нужны. И смотрите результат, если горизонтальной прокрутки нет ни в одном устройстве, то всё хорошо и адаптивность баннера выполнена.
Дополнительная важная информация по HTML5-баннерам. Рекомендую перед заказом ознакомиться с требованиями к сайтам и к HTML5-баннерам главных рекламных сетей. Обратите внимание, что у Гугла кроме жёстких требований к сайтам и баннерам есть ещё условие по общей сумме потраченных средств за всё время существования аккаунта. И она должна быть не менее 1000 долларов США. Если это условие не выполнено, то и нет смысла под Гугл заказывать баннер.
Важно! Я гарантирую только адаптивность под все размеры экранов моего баннера на отдельно взятой странице, но не дам гарантий, что он будет корректно показываться на сайте покупателя. Для этого вебмастер (фронтендер) на своей странице должен правильно прописать CSS и установить размеры окна iframe для баннера.
Статья о фиксированных HTML5-банерах здесь: Примеры HTML5-баннеров.
Требования Google к HTML5-баннерам:
https://support.google.com/google-ads/contact/html_5_access
У Яндекса нет заморочек по сумме на аккаунте, но достаточно жёсткие требования к баннерам.
Требования Яндекса к HTML5-баннерам (ссылки открываются в новых вкладках):
https://yandex.ru/support/direct/products-cpm-campaign/requirements.html
Стандартные размеры баннеров здесь (откроется в новой вкладке): https://ideasaitov.ru/standartnye-razmery-bannerov-dlya-saytov.html
Полезная статья о баннерах для Гугл, их эффективных размерах и форматах с более чем 200 примерами откроется в новой вкладке: https://www.plerdy.com/ru/blog/best-banner-ads/. Здесь можете подобрать пример, по которому будет сделан баннер для Вашего сайта.
Правила размещения и размеры баннеров для Яндекса в новой вкладке смотрите здесь: https://yandex.ru/legal/banner_adv_rules/.
Ниже показаны примеры простых блочных адаптивных примеров HTML5-баннеров.
Это пример №28. Простейший макет из 4 блоков для понимания адаптивности. В блоках можно разместить изображения, текст, видео, ссылки и т. п., то есть всё, что можно разместить на html странице. При изменении ширины экрана блоки перемещаются по очереди вниз. Здесь задана ширина 100%. Горизонтальной прокрутки нет, а вертикальная в мобильниках предусмотрена прокруткой пальцем страницы вниз.
Это пример №29. Пример блочной (фреймовой) адаптивности и анимированные кнопки. Это не баннер, а наглядный пример. Может вполне сгодиться для показа многих картинок в виде нескольких чередующихся слайдов в одном блоке или для показа видеороликов с выбором конкретного из предоставленных в превью. Также можно такой способ применить, если есть много пунктов меню, нажав на один из которых откроется рядом картинка, видео или модальное окно с текстом и изображением. Вариантов применения такой схемы адаптивности достаточно много.
Этот пример показывает адаптивность выполненную на отдельных независимых блоках контента (текст, изображения, видео — всё можно анимировать) шириной от 236 пикселей (меньше не гарантируется). При уменьшении ширины экрана его элементы (блоки) перемещаются вниз. Таким образом, вся информация размещается вертикально без горизонтальной прокрутки. Особенность такого метода состоит в том, что размеры блоков ограничены фиксированным значением и блоки размещаются последовательно не взаимодействуя между собой.
Важно! Адаптивность и доступность для просмотра всего баннера будет выполняться при правильной установке его на страницу вебмастером. Конечно, если в фрейме он задаст фиксированные ширину и высоту, то баннер нормально работать не будет и часть его будет скрыта от просмотра. Эти моменты нужно обговорить до заказа баннера.
Но, тем не менее, этот метод хорошо работает при ширине экрана устройства от 240 до 990 пикселей. И баннеры выполненные по такой методике вполне подходят для рекламных целей. Проверяйте его в Responsive Viewer — плагин браузера Google Chrome. При размещении текста в блоках их границы хотя и не видны, но угадываются. Если же будут размещены графические элементы (логотип, картинки и т. п.), то эти границы не будут видны явно, но блочная структура несколько ограничивает полёт фантазии графического дизайнера и верстальщика баннера. Для просмотра на мобильных телефонах это вполне приемлемый вариант.
№30. Это пример размещения контента в блоках. Не очень, конечно, но адаптивно. Может подойти, если нужно показать в одном из блоков много картинок товара, недвижимости и т.д. Слева логотип, далее картинки, потом ещё картинки и справа меню со ссылками. Где-то так.
№32. Пример блочной адаптивности (не баннер). Сначала показывается первый блок, а после нажатия на кнопку показываются остальные. Будьте внимательны — после нажатия на кнопку включается автоматически звук, но его можно отключить. Согласен, что такого типа баннер — не фонтан, конечно. Но на сегодняшний день так и нет толковой технологии создания адаптивных (не резиновых и масштабируемых) баннеров. Да и в Кворке никто не предлагает такую услугу. Если где-то увидите настоящий адаптивный баннер, то просьба прислать мне адрес страницы с его примером.
В баннерах на основе этой технологии можно показывать много кадров в различных блоках. Вполне подходит для показа объектов недвижимости, отрывков из фильмов, товаров, туристических объектов, брендовых новостей (сами их сможете изменять при необходимости) и много много чего другого.
Внимание! Ещё раз напоминаю, что баннеры свёрстанные по такой технологии ни Яндекс ни Гугл, скорее всего, не примут в свои рекламные сети. А партнёрские сайты возьмут, если Вы с ними согласуете такой формат баннера. При согласовании отошлите им ссылку на эту страницу, чтобы они посмотрели примеры размещённые на этой странице.
Обращайтесь, задавайте вопросы. Не пожалеете. Отвечу всем. Работаю в рабочее время без выходных и праздников.
С уважением, Валерий. Моя страница профиля в Кворке: https://kwork.ru/user/ovalery.
Может это также будет Вам интересно:
Слайдеры для сайта, для визиток и для баннеров.