Внимание! Любой из приведенных ниже примеров неадаптированных баннеров можно сделать по запросу покупателя адаптивным.
Сравнение разных типов баннеров смотрите ниже.
БАННЕР В ВИДЕ ПРОСТОЙ СТАТИЧНОЙ КАРТИНКИ (файлы PNG, JPG, GIF).
Плюсы: небольшой размер файла, быстрая загрузка на странице сайта, невысокая стоимость выполнения.
Минусы: не адаптирован под разные устройства, нет возможности вставить слайд-шоу, видео и аудио контент, нет возможности вставить активные ссылки на телефон, емэйл, мессенджеры, геопозицию, редактирование данных после сдачи заказа проблематично и могут быть дополнительные затраты. Для отслеживания статистики ссылки могут быть с меткой (UTM в Яндексе).
БАННЕР В ВИДЕ АНИМИРОВАННОЙ КАРТИНКИ ИЗ НЕСКОЛЬКИХ КАДРОВ, можно сделать в виде слайд-шоу (файл GIF).
Плюсы: не очень большой размер файла при нескольких кадрах (до 10), быстрая загрузка на странице сайта.
Минусы: не адаптирован под разные устройства, большой размер файла при большом количестве кадров, нет возможности вставить видео и аудио контент, нет возможности вставить активные ссылки на телефон, емэйл, мессенджеры, геопозицию, повышенная стоимость выполнения, редактирование данных после сдачи заказа проблематично и могут быть дополнительные затраты.
БАННЕР В ВИДЕ ВИДЕО ИЛИ АУДИО ФАЙЛА (файл MP4).
Плюсы: есть возможность вставить видео и аудио контент.
Минусы: не адаптирован под разные устройства, большой размер файла, медленная загрузка на странице сайта, нет возможности вставить активные ссылки на телефон, емэйл, мессенджеры, геопозицию, высокая стоимость выполнения, редактирование данных после сдачи заказа проблематично и могут быть дополнительные затраты.
https://www.youtube.com/watch?v=Js55SP0GjMg — здесь показаны несколько примеров баннеров, которые были ранее свёрстаны по флеш технологии, а сейчас переделаны в видео. Видео подготовлено для просмотра на вертикальных экранах. Но так как флеш сейчас браузерами не поддерживается, то такого рода баннеры верстаются на HTML5.
НЕСОМНЕННЫМ ПРЕИМУЩЕСТВОМ HTML5-БАННЕРОВ является то, что при их установке на страницу сайта донора ссылка на другой сайт репициент не передаёт вес сайта донора. Это достигается тем, что в ссылках баннера устанавливается запрет на их индексацию. Также такой баннер можно сделать многостраничным. Это очень продвинутая функция! Пример с описанием смотрите ниже на этой странице под №3.
Также можно сделать баннер с самостоятельно изменяемым его владельцем текстом и контентом. Подробнее об этом функционале читайте здесь >>>.
Баннеры могут не показываться в компьютере и в мобильных устройствах при включенной в браузере пользователя блокировке рекламы. Отключите блокировку в своём устройстве и все баннеры будут показываться.
Статью с примерами об адаптивных HTML5-баннерах читайте здесь: Адаптивные баннеры. Примеры HTML5-баннеров.
Примечание: эта страница специально выполнена без адаптивности, чтобы была возможность смотреть баннеры с фиксированной шириной.
Дополнительная важная информация по HTML5-банерам. Рекомендую перед заказом ознакомиться с требованиями к сайтам и к HTML5-баннерам главных рекламных сетей. Обратите внимание, что у Гугла кроме жёстких требований к сайтам и баннерам есть ещё условие по общей сумме потраченных средств за всё время существования аккаунта. И она должна быть не менее 1000 долларов США. Если это условие не выполнено, то и нет смысла под Гугл заказывать баннер.
Требования 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://beskonechnost8.ru/programma-dlya-sozdaniya-html5-bannerov-sozdanie-adaptivnyh-html5-bannerov.html — интересна обычному пользователю только верхняя часть статьи, остальное предназначено для разрабочиков и верстальщикоа.
Правила размещения и размеры баннеров для Яндекса в новой вкладке смотрите здесь: https://yandex.ru/legal/banner_adv_rules/.
ВАЖНО! Я не выполняю креативный дизайн баннеров, а работаю только по предоставленным в заказе шаблонам или примерам. Связано это с тем, что затрачивается очень много времени на согласование макетов баннеров при их копеечной стоимости. Как говорится, овчинка выделки не стоит. Поэтому проще сделать недорогой баннер по предоставленному заказчиком примеру. При этом при адекватной стоимости баннера работа выполняется значительно быстрее. Однако возможен вариант придумывания дизайна баннера во время выполнения заказа, если будет задан хотя бы какой-то вектор сценария.
Работа нормально будет выполняться только при полном плотном участии покупателя в процессе создания баннера. А именно, совместно разрабатываются элементы дизайна, текст и утверждается сценарий их взаимодействия между собой. И только после согласования элементов и сценария я приступлю к вёрстке баннера. Если не готовы потратить на это время, то просьба не заказывать баннер у меня. Если оплатили кворк, написали пару пожеланий по баннеру и исчезли на неделю, то "это не наш метод" и я так не работаю.
АДАПТИВНЫЕ БАННЕРЫ Я ТОЖЕ ВЕРСТАЮ, но только после предварительного согласования задания. Кворк по адаптивным баннерам отключен и будет активирован для заказа только после того, как будет достигнута согласованность по параметрам баннера: макет и возможность квалифицированной установки баннера на странице.
Это необходимо выполнить для того, чтобы понять, сможет ли заказчик сам или его программист правильно установить баннер на сайте. Установка адаптивного HTML5-баннера сложнее и несколько отличается от установки обычного баннера и для этого нужны определённые навыки. Практика показывает, что часто неопытный вебмастер не может это сделать правильно.
В предварительной переписке я высылаю заказчику файлы своего проверенного адаптивного баннера и прошу установить его на любой тестовой странице. Если всё получится правильно, тогда можно продолжить. Если вебмастер не может корректно установить HTML5-баннер, тогда и нет смысла продолжать работу.
Ниже показаны примеры простых HTML5-баннеров со ссылкой (одиночный клик мышкой). Для некоторых примеров представлены GIF версии, для которых имеются исходники в FLA (это формат программы Adobe Animate, в которой верстаются HTML5-баннеры).
Это пример №6. С каждого слайда можно перейти на соответствующую изображению услугу на Кворке.
Это пример №7. Большой баннер со слайдами и с активными функциями. При нажатии на номер телефона и на кнопку подключаются соответствующие приложения для выполнения нужных действий.
Это пример №8. Адаптивный баннер со слайдами. При просмотре на вертикальных экранах с различной шириной элементы баннера располагаются один под другим и выполняется вертикальная прокрутка. При этом первоначальный сценарий баннера может сильно исказиться. К примеру, выполнен адаптивный баннер, в котором слева направо движется автомобиль в сторону магазина. Автомобиль и магазин — это разные объекты в баннере. При просмоте на горизонтальном экране сценарий полностью выполняется, а вот в вертикальном экране объекты располагаются друг под другом. И получается, что автомобиль едет вверху сам по себе, а под ним расположился магазин, который тоже сам по себе. И это не совсем то, что задумано в сценарии. Так что не каждый сценарий может подойти под адаптивный баннер. Как уже было написано, нужно выбирать — или умный или красивый.
Это пример №9. Широкий неадаптивный баннер для косметического салона. Показаны только услуги без каких либо ссылок. Можно в отдельном слайде вставить логотип с контактами.
Это пример №10. Такой себе костёрчик :-)
Это пример №11. Можно разместить изображения, текст, видео, ссылки, аудио и т. п. То есть, практически всё, что можно разместить на html странице.
Это примеры №12 — 16. Простые макеты адаптивных баннеров.
Это примеры №17 — 18.
Это примеры №19 — 22.
Это примеры №23 — 25 (с "живым" озером и морем). Пример №26 — имитация тротуарного билборда.
Это пример №41 с возможностью самому в любое время изменять текст в баннере. Рядом №42 справа многостраничная адаптивная интерактивная мультимедийная открытка презентация анимационных возможностей HTML5. В ней собраны примеры различных эффектов анимации, звука, видео.
Это пример №44.
Это пример №45. Большой баннер с 13 ссылками и с рамкой.
Это пример №46. Стандартный маленький баннер без ссылки.
Это пример №47. Это даже не баннер, а, скорее всего, презентация акции. Адаптивный.
№48. Простой баннер строительной компании и №52. Баннер фармацевтической компании.
Баннеры свёрстаны в HTML5, но здесь они показаны в гиф. №49. Баннер с минимальной анимацией кнопки. №54. Баннер для магазина одежды. №55 Баннер для сайта по продаже автомобилей. №57. Баннер об инвестициях. №58. Баннер трендовый. №59. Баннер акционный.
№60. О заказе пиццы. №61. О 8 видах пиццы. №62 О зарабатывании денег.
№50. Пример адаптивного анимированного баннера.
№56. Пример анимированного баннера. Здесь он в GIF, а свёрстан как HTML5.
№63. Пример анимированного баннера. Здесь он в GIF, а свёрстан как HTML5.
Любой анимированный HTML5-баннер можно конвертировать в гиф с фиксированными размерами изображения и в видеофайл формата mp4 или другого. Хотя при этом размер файла будет достаточно большим. Но знаю из практики, что некоторым заказчикам не так уж важен размер файла баннера как важна лёгкость его размещения на страницах сайтов — достаточно самой гифки и кода её размещения, что очень просто могут сделать даже начинающие вебмастеры.
Статью с примерами об адаптивных HTML5-баннерах читайте здесь: Адаптивные баннеры. Примеры HTML5-баннеров.
Статью с примерами об адаптивных блоковых division HTML5-баннерах читайте здесь: Блоковые адаптивные division HTML5-баннеры
Обращайтесь, задавайте вопросы. Не пожалеете. Отвечу всем. Работаю в рабочее время без выходных и праздников.
С уважением, Валерий. Моя страница профиля в Кворке: https://kwork.ru/user/ovalery.
Может это также будет Вам интересно:
Слайдеры для сайта, для визиток и для баннеров.
Электронные открытки и поздравления.
Расширенные возможности QR кода.
*****************************************
Для просмотра в Примере №2 окончания анекдота нажмите в любой последовательности цифры 1703.
Для просмотра в Примере №3 окончания анекдота нажмите в любой последовательности на голубую, зелёную и оранжевую кнопки.