Когда видеофон уместен и повышает продажи и наоборот. Стоит ли использовать видеофон на своём сайте? Расскажем в статье.
Видеофон на сайте добавляют шарм и красоту, не так ли? У вас есть посадочная страница, хотите добавить на неё красивую видеоподложку? Советуем не спешить. Как обычно бывает с новинками в веб-дизайне — все стремятся использовать новую технологию без понимания того, как она влияет на деньги в кассе клиента. Видеофон — один из любимых инструментов маркетологов. Много копий поломали по этому поводу. Мы в своём агентстве тоже озадачились не на шутку. С одной стороны динамичные подложки выглядят красиво, с другой практика показывает — они могут быть слишком навязчивыми. Это приводит к снижению конверсии сайта или посадочной страницы.
Преимущества и недостатки видеофона
Это снижение конверсии сайта и повышение стоимость заявки. Видеофон может отвлекать посетителей от рекламного предложения на вашем сайте. Он также может сделать страницу тяжелей и увеличить время загрузки. Цель посадочной страницы — конверсия в звонок или заявку. Мы, например, у себя в студии используем видеофон, а не статичную картинку. Когда обычной картинки не достаточно, чтобы раскрыть суть продукта или подчеркнуть его пользу, такой приём чертовски хорош.
Целевая посадочная страница поэтому так и называется, что имеет конечную цель. Ничто не должно отвлекать от рекламного предложения. Видеофон должен поддерживать главную цель посадочной страницы — получение контакта. Если видео демонстрирует продукт или услугу в действии, а также показывает результат для клиента — используйте смело. Видео подложки отлично работают на целевых страницах, которые продвигают атмосферу — конференции, искусство, ресторан или род занятий. Посмотрите пример использования видеофона на сайте, посвященном серфингу Isurfbecause. Видео бэкграунд поможет продемонстрировать опыт.
Если вы на посадочной странице или сайте делаете комплексное предложение. Например, услуга в B2B в несколько этапов или на сайте много важного текста — в этом случае видео бэкграунд отвлекает от сути. Рекламное предложение требует объяснения? Используйте текст и постарайтесь не отвлекать посетителей на знакомство с лишними деталями.
Если захотите добавить видеофон на сайт — действуйте, если решите добавлять на посадочную страницу — не спешите. Во-первых, загрузка страницы станет медленней. Во-вторых, динамика на заднем фоне будет отвлекать посетителя от целевого действия. Цель посадочной страницы — конверсия. Если конверсия отсутствует, зачем тогда видеофон? Риторический вопрос для дизайнеров 🙂
Как установить видео фон на сайт или лендинг
Установить видеофон на свой сайт можно разными способами, с помощью html или с помощью Javascript. Но все же лучше разобраться с этим вопросом без сторонних скриптов, которые будут лишний раз подгружать ваш сайт или лендинг. Итак, как установить видеофон с помощью html 5.
Ковыряем HTML
На сайте есть тег </body>, вот сразу после этого тега нужно добавить видео, которое будет фоном в таком виде:
1 2 3 4 5 6 7 | <video autoplay loop> <source src= "video/video2.mp4" type= "video/mp4" > <source src= "video/video1.webm" type= "video/webm" > <source src= "video/video3.ogv" type= "video/ogg" /> </video> <p>Smartlanding</p> |
Допиливаем CSS
Если вы хотите сделать видео по ширине экрана, а сам видео-бекграунд был на всех страницах веб-сайта, то нужно добавить стили:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | video{ position : fixed ; z-index : -1 ; min-width : 100% ; min-height : 100% ; overflow : hidden ; } p{ font-family : 'courgette' ; color : #fff ; font-size : 80px ; text-align : center ; padding-top : 20% ; text-shadow : 0 1px 1px #000a33 ; } |
В случае, если вам нужно сделать видеофон на 1-й блок сайта, то нужно изменить параметр position на absolute. Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute.Вот такой нехитрой манипуляцией можно поставить на главный экран своего сайта видеоподложку.
Где скачать видеофон
Мы рекомендуем ресурс Rowpost. Здесь вы найдёте гигабайты разных фоновых видео. На сайте есть удобный поиск, а все видео разбиты на категории.
Каждый элемент дизайна на сайте открывает посетителю доступ к нужной информации. Это фундаментальный принцип веб-дизайна. Если вы чувствуете, что видеофон будет уместен — тестируйте сайт на посетителях как минимум месяц. Определенный вывод можно сделать после накопления статистики хотя бы в 500 уникальных визитов на ваш сайт. Лично у нас есть как положительный так и печальный опыт использования видео бэкграундов. Поэтому А/Б тесты решают. А если вам нужен сайт с видеофоном — напишите нам.
Спасибо! Убрали видеофон с сайта, конверсия выросла 🙂