Створення адаптивних HTML5 банерів FullScreen

1. Створення банерів в різних програмах з функцією адаптивності і прорахунку кліків Привіт, значить...

Створення банерів в різних програмах з функцією адаптивності і прорахунку кліків

Наша взаимовыгодная связь https://banwar.org/

Привіт, значить завдання стоїть таке: «Створити адаптивний HTML банер, який буде підлаштовуватися під різні розміри екрану, у нього буде лічильник часу, що залишився і кнопка закрити і все це повинно ще й кліки вважати, щоб збирати статистику про переходах по ТТ Adriver».

Спочатку розберемося, які власне самі затребувані формати є при створенні таких банерів:

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

1. FullScreen банери - банери, які ви могли бачити в метро або на сайті wifi , Дані банери розкриваються на весь екран, мають лічильник і кнопку закриття. Для створення таких банерів ми просто готуємо статичну картинку або просту gif анімацію (не більше 600КБ) і далі верстаємо все на HTML.

   FullScreen Банер

2. FullWidth банери - вже цікавіше, але насправді це просто звичайний HTML5 банер, тільки розтягується на 100% ширини екрану, але має при цьому фіксовану висоту. У таких банерах часто використовується анімація і вони вже створюються в таких програмах, як google web designer , Adobe Edge Animate , Adobe Animate CC . Особисто я активно юзаю Edge Animate, він зручніше, швидше і є можливість швидкої вивантаження в HTML5. При створенні таких банерів, спочатку робиться розкадровка з варіантами того, як цей банер буде виглядати при різних розмірах екрану, виглядає все це справа приблизно так:

   Розкадрування банера на 100% ширини

3. Банер з фіксованим розміром або статичний - ну це зовсім просто. Тут створюється просто креатив або розкадровка і все, що залишається зробити - це прописати код для рахунку кліків. Для створення таких банерів я часто використовую Adobe Photoshop або Edge Animate - якщо це анміація. Ніколи не використовуйте тут GIF! Ви ніколи не зможете вивантажити gif анімацію в розмірі до 600КБ, а якщо анімація важить більше, то її не пропустять. Звичайний HTML банер не дотягне за вагою і до 200Кб, а значить, що тут можна творити по повній.

Розкадрування банера з фіксованими розмірами

Гайд по створенню FullScreen банера за всіма правилами

Створення такого банера на увазі, що його розмір буде змінюватися при змінити розмір екрану, а значить він буде займати всю його площу, приблизно так:

Широкий екран Вузький екран

Це означає, що зображення повинно одіаново добре виглядати на всіх пристроях, від сюди висновок, що воно повинно бути досить хорошої якості і розмір наближений до квадрату (фіксованих розмірів немає, тут все досить лояльно). В даний момент ми орінтіруемся на мобільнуе пристрої (mobile) і планшети (tablet), тому беремо прямокутник, для перегляду в портретному режимі (portrait). Заходимо в Photoshop і створюємо документ необхідного розміру, в даному випадку це 536х714:

Gif исходник для створення FullScreen банера

Я створив гифку з двох кадрів, вага у неї 242КБ, вага у нас завжди повинен бути до 600КБ, пам'ятаємо це. Тепер нам необхідно перетворити це в власне банер на HTML. Відкриваємо інструкцію по створенню FullScreen банерів , Беремо з неї технічні вимоги та закриваємо, вона написана дуже коряво. Забудьте про Flash, він загинув смертю хоробрих, у нас тільки HTML5, тому нам потрібні технічні вимоги для створення банерів на коді Ajax.

Обмежень по верстці немає, тут ми вільні творити все, що нам заманеться, головне, щоб були присутні основні атрибути, а саме: читати клік з банера, був лічильник і хрестик для закриття. Для коддінга я використовую безкоштовну програм Sublime Text .

Відкриваємо HTML файл з мого шаблону і бачимо:

Стандартний код банера FullScreen

1. Стандартна шапка документа, завжди незмінна.
2. У властивостях стилю Body у нас зазначено height 100%, що означає, що документ буде підлаштовуватися під висоту вікна браузера. В даному документі створений контейнер, який буде змінювати розміри при зміні розмірів екрану і в стилі цього контейнера ми бачимо посилання на фон (background: url), адже наш банер і буде фоном для цього контейнера, таким чином адаптивним у нас є контейнер, а наш банер лише є його фоном і ми просто змінюємо сам банер або посилання на нього і все автоматично замінюється і ми отримуємо вже новий fullscreen банер. Отже, в даному випадку сам банер - це файл bg1.jpg, а фон позаду банера - bg2.jpg, фоном у нас може бути патерн або єдина картинка або взагалі нічого - залежить від дизайну.

   Готовий FullScreen банер

3. Тут у нас настройки стилю лічильника зворотного відліку, якщо необхідно - змінюється шрифт, кольори, положення, коротше раджу прочитати про стилі css, тут нічого важкого.
4. Ось тут ми бачимо <div id = "content">, власне для нього ми і прописували стилі вище - це і є наш банер.
5. Кнопка закрити. У більшості випадків я роблю її просто акуратним хрестиком в правому верхньому куті екрану, якщо нічого міняти тут не збираєтеся, просто замініть посилання на картинку і її розмір.

кнопка закрити

Як же читається сам клік з банера? І чому ми не прописували ніакіх посилань на сторінки, на які повинен вести банер? Так ось ... Система Adriver дозволяє прописувати посилання для переходу на сайт, після завантаження банерів в систему, виходить у нас в исходнике ми лише прописуємо змінну, яка замінюється при завантаженні в систему сама, вже не наша робота. В даному випадку у нас клік прописується для всього контейнера, в якому знаходиться наш банер, в загальному все, що ми помещаяем в <div id = "content"> у нас є банером і з цього зчитуються кліки. Для інших банерів, інші технічні тредованія і там клік зчитується по-іншому, сечас ми розглядаємо конкретний приклад.

Контейнер з банером

В інших уроках я розповім, як створити банер на 100% ширини екрану з анімацією і як за всіма правилами створити і підготувати макет для верстки сайту.

Файли з уроку:

1. Готові банери FullScreen: клік

Дякуємо за увагу.