Адаптивным называют баннер, который вписывается в заранее определённые на странице размеры блока (они соответствуют размерам рекламного места на площадке или подбираются пользователем самостоятельно).
ИНТЕРАКТИВНЫЙ ДИНАМИЧЕСКИЙ БАННЕР В HTML5 представляет собой отдельно созданную страницу, которая встраивается на сайт через «iframe» и представляет собой несколько файлов объединённых в один блок на одной или нескольких страницах. Он может просматриваться локально на компьютере и онлайн на сайте. Легко пересылается в виде архивного файла ZIP всеми способами передачи контента: через e-mail и все мессенджеры. Примерный сценарий анимации в баннере и действий на нём заказчик предлагает сам, а я создаю макет и прописываю действия на нём. По желанию в любом месте баннера можно вставить разные плюшки: развевающийся флаг с Вашим логотипом, фото, звёзды, розы, сердечки, мерцающие гифки, счётчики метрики или аналитики и т. п.
Плюсы: адаптирован под разные устройства, есть возможность вставить активные ссылки на телефон, емэйл, мессенджеры, геопозицию, вставить видео (в том числе с ютуба) и аудио контент, можно разместить на любом сайте. При необходимости относительно просто по запросу покупателя выполняется бесплатное редактирование данных (но без фанатизма, конечно).
Минусы: средний общий размер всех файлов и при низкой скорости интернета медленная загрузка на странице сайта, высокая стоимость выполнения.
Также можно встроить в баннер код любого счётчика (метрика, аналитика и т. п.) и отслеживать через него статистику переходов по ссылкам. Если ссылки установить через метки (UTM в Яндексе), то можно просматривать статистику посещения каждой страницы при переходе на каждую с баннера. На таком баннере можно установить много ссылок на разные страницы и даже на разные сайты.
Возможно в таких баннерах встроить один или несколько видеороликов и аудиороликов, на которые переходы будут выполняться вручную при нажатии на кнопку "Далее" или "Назад". Можно встроить анимационные гиф изображения и включение звука.
Несомненным преимуществом HTML5-баннеров является то, что при их установке на страницу сайта донора ссылка на другой сайт репициент не передаёт вес сайта донора. Это достигается тем, что в ссылках баннера устанавливается запрет на их индексацию.
Баннеры могут не показываться в компьютере и в мобильных устройствах при включенной в браузере пользователя блокировке рекламы и отключенном JAVA (сейчас редко кто так работает). Отключите блокировку в своём устройстве, подключите JAVA и все баннеры будут нормально показываться.
АДАПТИВНЫЙ БАННЕР В HTML5 то же самое, что и баннер описанный выше, но только с тем отличием, что он подстраивается под ширину экрана устройства, на котором он просматривается. Но минус в том, что при этом изменяется первоначальное расположение элементов (логотип, текстовый блок, другие надписи). Если в горизонтальном виде они шли слева направо, то в вертикальном экране телефона они размещаются один под другим и первоначальный замысел и сценарий баннера несколько изменяются. Да, конечно же, удобно, что все элементы просматриваются в полном масштабе, но не так как хотелось бы. Отмечу также, что, в принципе, все браузеры в телефонах всё равно подстраивают страницу под ширину своего экрана и горизонтальный баннер, хотя и мелко, но будет просматриваться нормально. Так что в этом случае нужно определиться, хочется быть умным или красивым.
Для проверки баннера на адаптивность можно использовать удобное расширение в хроме Responsive Viewer. Скачиваете его из интернета и устанавливаете на компьютер, далее переходите в хроме на свой сайт и кликаете на иконку Responsive Viewer в строке расширений. Затем добавляете устройства для просмотра. По умолчанию показывается много устройств, но можно оставить только те, которые Вам нужны. И смотрите результат, если горизонтальной прокрутки нет ни в одном устройстве, то всё хорошо и адаптивность баннера выполнена.
К сведению: для баннеров понятия "резиновый" и "адаптивный" разные.
Дополнительная важная информация по HTML5-баннерам. Рекомендую перед заказом ознакомиться с требованиями к сайтам и к HTML5-баннерам главных рекламных сетей. Обратите внимание, что у Гугла кроме жёстких требований к сайтам и баннерам есть ещё условие по общей сумме потраченных средств за всё время существования аккаунта. И она должна быть не менее 1000 долларов США. Если это условие не выполнено, то и нет смысла под Гугл заказывать баннер.
АДАПТИВНЫЕ БАННЕРЫ Я ВЕРСТАЮ только после предварительного согласования задания. Кворк по адаптивным баннерам отключен и будет активирован для заказа только после того, как будет достигнута согласованность по параметрам баннера: макет и возможность квалифицированной установки баннера на странице. При этом нужно понимать, что для адаптивности элементы баннера придётся размещать так, чтобы при изменении размеров экрана они не накладывались друг на друга. Поэтому первоначальный замысел размещения элементов и сценарий их взаимодействия могут быть изменены.
Это необходимо выполнить для того, чтобы понять, сможет ли заказчик сам или его программист (фронтэндер) правильно установить баннер на сайте. Установка адаптивного HTML5-баннера сложнее и несколько отличается от установки обычного баннера и для этого нужны определённые навыки. Практика показывает, что часто вебмастер не может это сделать правильно.
В предварительной переписке я высылаю заказчику файлы своего проверенного адаптивного баннера и прошу установить его на любой тестовой странице. Если всё получится правильно, тогда можно продолжить. Если вебмастер не может корректно установить HTML5-баннер, тогда и нет смысла продолжать работу.
Важно! Адаптивность и доступность для просмотра всего баннера будет выполняться при правильной установке его на страницу вебмастером. Я гарантирую только адаптивность под все размеры экранов моего баннера на отдельно взятой странице, но не дам гарантий, что он будет корректно показываться на сайте покупателя. Для этого вебмастер на своей странице должен правильно прописать CSS и установить размеры окна iframe для баннера. Конечно, если в фрейме он задаст фиксированные ширину и высоту, то баннер нормально работать не будет и часть его будет скрыта от просмотра. Эти моменты нужно обговорить до заказа баннера.
Из вышесказанного следует, что горизонтальный адаптивный баннер предполагает пропорциональное изменение его размеров с горизонтальным размещением элементов. В вертикальном адаптивном баннере элементы размещаются вертикально и такой баннер хорошо адаптируется под мобильные устройства.
Статья о фиксированных HTML5-баннерах здесь: Примеры HTML5-баннеров.
Статья о блочных division HTML5-баннерах здесь: Примеры блочных division 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/.
Это пример №27. "Резиновый" баннер, в котором при изменении ширины экрана пропорционально изменяются все его элементы. Не путайте с адаптивным.
Ниже показаны примеры простых адаптивных примеров и HTML5-баннеров.
№31. Пример пропорционального изменения размеров (резиновость).
По просьбе заказчиков подготовлены примеры анимированных кнопок. Кнопки с анимацией при наведении на них мыши актуальны только для просмотра на компьютерах. На мобильных мыши нет и эта функция не будет востребована. Для мобильных устройств больше подойдут кнопки с постоянной анимацией привлекающие внимание тем, что они мигают, изменяются и т. п. Ссылок на кнопках нет.
№33. По просьбе заказчиков представляю несколько анимированных рамок и эффектов. Пока три приготовил.
№34. Эскиз адаптивного баннера барахолки. Такой размер попросил заказчик.
№35. Эскиз адаптивного баннера на прозрачном фоне. Оказывается, что и такие нужны.
№36. Эскиз адаптивного баннера. Игра с цветом.
№47. Это даже не баннер, а, скорее всего, презентация акции. Адаптивный.
№51. Эскиз адаптивного баннера по продаже шампанского.
Обращайтесь, задавайте вопросы. Не пожалеете. Отвечу всем. Работаю в рабочее время без выходных и праздников.
С уважением, Валерий. Моя страница профиля в Кворке: https://kwork.ru/user/ovalery.