1. Що таке тягнеться банер?
2. Навіщо потрібен тягнеться (гумовий) банер?
3. Способи реалізації (як виготовити).
4. Особливі вимоги.
5. Як розшифрувати ці незрозумілі цифри в описі банера?
6. Один за всіх. Тягнеться банер замість фіксованих.
7. Так що мені замовити? Тягнеться (гумовий) HTML5-банер або звичайний, фіксованого розміру?

Тягнеться банер HTML5

від 2 299 руб.

Все частіше рекламні майданчики пропонують до розміщення місця для тягнуться HTML5-банерів. Зазвичай такий формат банерів використовується у вигляді широкої горизонтальної перетяжки в шапці головної сторінки сайту.

Тягнеться банер - сучасний формат банера, який привертає додаткову увагу користувача і пропонує більше простору для візуалізації вашого рекламного креативу.

Що таке тягнеться банер?

Тягнеться банер в HTML5 (він же "Гумовий HTML5-Банер", "перетяжка", "адаптивний банер") - це банер, який не має фіксованої ширини. Такий банер вміє підлаштовуватися під ширину сайту, заповнюючи весь доступний простір. Банер однаково добре виглядає і на маленькому екрані смартфона, і на великому настільному моніторі, без пустот або обрізів по краях.

Розглянемо на прикладах:

Так виглядає гумовий HTML5-банер і фіксований банер.

Навіщо потрібен тягнеться (гумовий) банер?

Головний плюс використання такого банера - більше простору для вашої реклами. Банер, що займає всю ширину сайту, стає візуально головним на сторінці і привертає увагу користувача.

А додатковий простір в макеті правильно виготовленого тягнеться HTML5-банера дозволяє піднести рекламний креатив найбільш вигідним чином. Такі банери виглядають дійсно розкішно і яскраво виділяються серед інших графічних елементів на сторінці. Приклади банерів HTML5.

Способи реалізації (як виготовити).

Розробка тягнеться банера HTML5 дещо складніше, ніж виготовлення банера з фіксованими межами, так як вимагає від дизайнера приділити особливу увагу питанню: як розмістити значиму інформацію на банері за умови відсутності чітких меж?

спосіб 1
Банер з розтягується фоном.

У такому варіанті виконання, значна інформаційна частина банера залишається в рамках фіксованих меж, а розтягується тільки фон з боків банера (так звані "крила", "вуха"). Як тягнеться фону можна використовувати як зображення, так і однорідну заливку відповідним кольором.

спосіб 2
Пропорційне розтягнення.

В цьому випадку елементи банера (логотип, тексти, кнопка) позиціонуються пропорційно ширині банера. Фактично при зменшенні або збільшенні ширини банера змінюється і відстань між елементами банера.

Уявіть собі гумову мотузку для білизни, на якій, як на прищіпках розвішані елементи нашого банера. Якщо розтягнути мотузку в кілька разів, то відстань між прищіпками збільшиться по всій довжині мотузки.

спосіб 3
Адаптивна верстка.

Іноді ширина тягнеться банера може змінюватися в кілька разів залежно від ширини призначеного для користувача екрану. На смартфоні банер може бути майже квадратним, а на настільному моніторі розтягуватися до широкої смуги.

Для збереження цілісності дизайну і легкості сприйняття інформації використовується адаптивна верстка макета тягнеться банера. Тобто до позиції і виду елементів банера застосовуються особливі правила з урахуванням поточної ширини банера. Логотип, кнопка, зображення можуть займати різні місця і форми в залежності від застосовуваної для даної ширини верстки. А текст може змінювати форматування, розмір і кількість рядків.

Даний варіант виготовлення, що тягнеться HTML5-банера найбільш копітка, але в той же час найбільш коректний з точки зору акуратності дизайну і його відповідності брендбуку і фірмовому стилю замовника.

В одному банері можуть застосовуватися різні варіанти написання логотипу, розмірів зображень і кнопок.

Вибір способу виготовлення, що тягнеться HTML5-банера, залежить від умов розміщення та утримання банера. Спираючись на досвід, ми завжди запропонуємо оптимальне рішення і детально пояснюємо - чому обрано саме такий спосіб.

Особливі вимоги.

До тягнеться HTML5-банерів пред'являється ряд спеціальних вимог рекламних мереж і майданчиків.

Такі вимоги включають:

• обмеження у вазі банера в кілобайтах;
• вимоги до коду банера і використовуваних бібліотек;
• вимоги до оформлення обробника кліка по банеру.

Обмеження по вазі банера, головним чином, накладає обмеження на розмір і кількість використовуваних зображень. Вимоги до коду банера важливі для успішного проходження модерації на рекламних майданчиках.

Ми робимо банери для більшості провідних банерних мереж і популярних сайтів. А значить, добре знаємо технічні вимоги та ретельно готуємо банери для безпроблемного проходження модерації, яка не загальмує старт вашої рекламної кампанії.

Як розшифрувати ці незрозумілі цифри в описі банера?

При описі формату тягнеться банера зазвичай використовується такий запис: Банер 100% х90 (min 768px)

Це означає, що майданчик приймає до розміщення банер шириною в 100 відсотків (що тягнеться на все вікно браузера), висотою в 90 пікселів. При цьому мінімальна ширина області, в межах якої повинна вміститися вся значима інформація - 768 пікселів.

Мінімальна ширина - значимий для виготовлення банера параметр, тому бажано завжди уточнювати його розміри у рекламного майданчика.

Один за всіх. Тягнеться банер замість фіксованих.

Чи правда, що тягнеться банер здатний замінити кілька фіксованих банерів близького формату?

Так. Наприклад, правильно виготовлений тягнеться банер 100% х90 може бути розміщений на місцях фіксованих банерів: 728x90px, 760x90px, 960x90px, 1200x90px і подібних розмірів тієї ж висоти. Адже він "гумовий" і буде коректно відображатися при будь-якій ширині.

Так що мені замовити? Тягнеться (гумовий) HTML5-банер або звичайний, фіксованого розміру?

В даний момент, найбільш популярні формати для рекламних мереж (Google adWords, РСЯ Яндекс, Адфокс, Адрівер) - це банери фіксованого розміру (768х90px, 300х250px, 160х600px і т.д). Тому, для проведення рекламної кампанії в цих мережах, краще замовити комплект анімованих банерів HTML5 стандартних фіксованих розмірів. Вартість і умови дивіться тут.

Однак, якщо відомо, що майданчик розміщення пропонує до розміщення тягнуться адаптивні банери, ми рекомендуємо обов'язково скористатися такою можливістю і замовити розробку цього сучасного, зручного і преміального формату.