Баннеры для сайтов – это не просто картинки, а функциональная часть интерфейса, отвечающая за привлечение внимания посетителей и целевые действия.

Один из самых распространенных примеров баннера приведен выше: фоновое изображение, на которое отдельно накладываются остальные элементы – логотип (это также может быть изображение товара), текст и кнопка призыва к действию (CTA – call to action). Баннер может занимать всю ширину страницы или даже весь экран или какую-либо его часть. Это не так важно, главное – качественно представленная информация.

Фон, текст и изображения, наложенные сверху, лучше всего разделять – то есть располагать в разных div-блоках. Причин сразу несколько:

1. Текст может и должен индексироваться отдельно. Если на баннере присутствуют заголовки H1, H2 и т.д., поисковые системы будут индексировать их в первую очередь. Если же текст объединен с изображением – это, само собой, невозможно.
2. Изображениям на баннере, в том числе фоновому, также можно задать отдельные теги alt, title и description – это будет полезно для ранжирования в поиске по картинкам.
3. Фоновое изображение может не подгрузиться при медленном соединении. В таком случае посетитель увидит хотя бы текст и кнопки, а не пустое место.
4. Это позволит сделать баннер отзывчивым – элементы на фоне могут менять свое расположение в зависимости от ширины дисплея.
5. Наконец, мы будем иметь возможность редактировать отдельно текст, фон и остальные изображения, по-разному их располагать и добавлять другие элементы.

Варианты баннеров на сайте

Одну из вариаций вы уже видели в начале страницы, теперь перейдем к другим возможным видам баннеров. Большой популярностью пользуются слайдеры-карусели. На примере ниже показан вариант без фонового изображения — в угоду более быстрой загрузке.

Управление перехода между слайдами может осуществляться стрелками, маркерами и миниатюрами, на мобильных — перелистыванием. Любой элемент баннера может работать как ссылка на отдельную страницу, к ним также можно привязывать JS-функции, задавать эффекты при наведении.

Еще один традиционный вариант — HTML5 баннеры. Чаще всего они встречаются на рекламных площадках или сайтах, использующих рекламу в качестве дополнительного источника дохода. Это более простой вариант, не требующий особых навыков при размещении — достаточно использовать iframe. Их достоинство — более широкие возможности анимации, которая будет работать вне зависимости от функциональных возможностей CMS. Код HTML5 баннера вообще может никак не относиться к коду сайта и подгружаться с другого FTP-сервера.

Но есть недостатки:

1. HTML5 баннеры блокируются плагинами AdBlock и подобными. Пользователям банально надоедает реклама, поэтому размещение таких баннеров на собственном сайте — не лучший вариант.
2. Более долгая загрузка за счет лишних обращений к серверу (если баннер не встроен непосредственно в код страницы, а подгружается через iframe).
3. Отсутствие возможности легкого редактирования через CMS — требуются специальные программы вроде Google Web Designer или Adobe Edge Animate.
4. Наблюдаются проблемы с совместимостью в старых браузерах.

Тем не менее, их также можно адаптировать под мобильные устройства, создавать расширенные анимации, привязывать к ним JS-функции: модальные окна, слайд-шоу и даже игровой контент. Простейший же пример такого отзывчивого баннера без фона представлен ниже (убедитесь, что отключены плагины, блокирующие показ рекламы).

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

Flash-баннеры, пожалуй, даже не стоит упоминать — эти технологии уже давно и безнадежно устарели.

Существуют также анимированные GIF-баннеры, но это то же самое, что и просто изображение, лишь с покадровой анимацией. Редактированию онлайн оно опять же не подлежит. Тем не менее, приведем такой пример. Возможно, вам понадобится нечто похожее: