Мастер-класс: верстаем интерактивный баннер | Медиа Нетологии
Сегодня я расскажу как создать красивый экран, реагирующий на движение мышки пользователя.
Вот то, что получится у нас в результате: Заповедники России.
Очень эффектно выглядит на большом экране
1. Разметка
Для начала создадим html-разметку для нашего красивого баннера-навигации.
Как видите, разметка очень простая. Есть общий родитель с классом .container, в него будут вложены наши плашки — блоки .section.
В каждом из блоков есть место под заголовок и описание.
Нам остается скопировать и вставить блоки еще 4 раза и внести нужные нам данные.
Посмотреть готовую html-разметку
2. Стили
Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!
Для начала пропишем общие стили для страницы и нашего родительского блока с классом .container
Как вы можете заметить, мы будем строить нашу страницу при помощи технологии flexbox.
Обязательно убедитесь, что все нужные вам браузеры поддерживают ее. Проверить поддержку разных версий браузера можно по ссылке.
Если вы еще не знакомы с единицами измерения vh и vw, то я советую вам почитать о них подробнее. Если коротко, то 1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В отличии от процентов, эти единицы измерения всегда рассчитываются от размеров окна браузера.
Исходя из этой логики наш баннер всегда будет во всю ширину и высоту браузера.
Двигаемся дальше и зададим стили для каждой из наших плашек.
В этой части кода хочу обратить ваше внимание на то, как мы записываем свойство flex-grow. Мы не пишем его отдельно, а задаем значение в рамках шортката flex. Это связано с тем, что дальше мы будем менять его по наведению курсора, а свойство flex-grow напрямую не поддается изменениям при помощи transition.
Также мы задаем выключку по центру для текста, по центру же выравниваем наши элементы на странице.
Теперь оформим наши текстовые блоки.
Размер текста тоже зададим в относительных единицах измерения. Таким образом наш текст будет изменяться пропорционально размеру экрана и всегда будет отлично выглядеть.
А теперь начнем творить магию и вносить интерактив в нашу пока неподвижную страницу.
Реагировать на наведение курсора мыши мы можем при помощи псевдокласса :hover.
Добавляем правило для каждого блока .section и «говорим», что при наведении курсора он должен менять значение свойства flex-grow с 1 на 1.8. Также добавим свойство transition и укажем, что меняться значение должно равномерно, на протяжении 4 десятых секунды. Это позволит сделать движение плавным, без рывка.
Далее зададим подобные свойства нашим текстовым блокам и укажем, что размер текста тоже должен меняться по наведению мыши.
Теперь давайте спрячем нижней текст в секции и будем показывать его только по наведению.
Для этого в изначальные стили добавим свойство opacity со значением 0 и напишем инструкцию по поведению текста когда курсор находится над соответствующей секцией.
Свойство transition-delay задает небольшую задержку перед началом анимации для того, чтобы текст начал проявляться когда блок уже немного «вырастет».
Теперь займемся украшением. Для начала зададим фон каждой из наших секций.
Чтобы не задавать дополнительные классы мы воспользуемся псевдоклассами :nth-child (n) и напишем правила с фоновыми картинками. В изначальные правила для плашек добавим повторяющимся свойства background-position, background-size и background-repeat.
Становится очевидно, что черный текст на фоне красочных фотографий почти не читается. Изменим цвет текста на белый и подключим другой шрифт.
Для подключения шрифта мы воспользуемся css-правилом @font-face. Я выбрала красивый и поддерживающий русский язык шрифт Roboto Condenced.
Вот мы почти и закончили! Финишная прямая.
Добавим эффект затемнения для всех плашек кроме той, над которой сейчас находится курсор. Для этого воспользуемся свойством filter со значением brightness.
Обратите внимание, что это свойство может не поддерживаться некоторыми браузерами.
Не забудем про transition для .section — чтобы затемнение происходило плавно.
Поздравляю! Вы только что создали свой первый интерактивный баннер. При этом мы использовали только HTML и CSS. Никакого JavaScript.
Вы можете так же использовать этот код для создания навигации, просто добавьте ссылку или кнопку для перехода на другую страницу.
Если вы хотите научится создавать html-страницы самостоятельно, то я жду вас на нашей программе «HTML-верстка: с нуля до первого макета».
Напишите в комментариях, какие еще элементы интерфейса вам было бы интересно изучить и я сделаю соответствующий мастер-класс.
Удачи всем солдатам оберточных войск!
По мотивам работы Simone Bernabè
Оцените статью
Средняя оценка 5 / 5. Всего проголосовало 4
Реклама с чтением: как работают интерактивные инлайны и зачем они нужны вашей компании
Разобраться
Нативная реклама набирает обороты. В США в этом году расходы на нативную рекламу выросли на 30%, а объем этого сегмента занял половину рынка интернет-рекламы. Желание рекламодателей использовать именно этот формат объяснимо. Согласно исследованиям, потребители на 53% больше внимания обращают на нативную рекламу, чем на баннеры. К тому же она на 18% чаще вызывает у людей желание сделать покупку. Один из инструментов нативной рекламы — интерактивные инлайны — поможет вам продвинуть бренд, развлечь аудиторию и одновременно собрать о ней нужную информацию.
По сути интерактивный инлайн — это баннер, в который встраиваются различные дополнительные виджеты, например поле, в котором клиент может оставить свой телефон или адрес почты. Читателю не приходится кликать на баннер и переходить на сайт рекламодателя — и взаимодействовать с рекламой проще.
Инлайн стимулирует интерес и, как следствие, увеличивает конверсию.
Интерактивный инлайн может выполнять сразу несколько функций: рассказывать о продукте или услуге, привлекать дополнительное внимание необычным форматом, получать контактные данные пользователей и даже собирать обратную связь.
Тинькофф Банк встроил в подобные инлайны персонализированный тест, по итогам которого пользователи узнавали о различных продуктах банка. Участвовать в этом опросе каждый клиент мог прямо внутри баннера, не уходя с того сайта, на котором находился. Тест размещали внутри статей на схожую тематику, он становился логичным продолжением материалов про финансы, бизнес или путешествия — в зависимости от рекламируемого продукта — и не вызывал отторжения у пользователей. В то время как аудитория воспринимала подобный опрос скорее как игру и развлечение, банк решал сразу несколько задач: информировал потенциальных клиентов о своих продуктах, а также собирал от них обратную связь.
Аналогичным образом с помощью интерактивных инлайнов компании могут собирать адреса электронной почты и номера телефонов потенциальных клиентов, предлагая им, например, скидку на первый заказ или бесплатное пробное занятие. Такую рекламную кампанию провела клининговая фирма Helpstar. Чтобы получить 25% на первую уборку, в интерактивном инлайне пользователям предлагали оставить свой номер телефона или адрес электронной почты. Переходить для этого на другую страницу не требовалось.
Быстрый заказ
Интерактив в своей рекламе некоторое время назад внедрил и издательский дом Hearst. Одним из первых брендов, попробовавших новинку, стала Pandora. Компания зафиксировала, что интерес пользователей к такого рода контенту в 2,5 раза выше, чем к обычной рекламе.
Интерактивные инлайны — популярный вид нативной рекламы на многих зарубежных площадках. Например, международный поисковик дешевых авиабилетов Skyscanner размещает их у себя в выдаче. На баннерах с активными кнопками и формами быстрого заказа рекламируются преимущественно авиакомпании и отели, что полностью соответствует тематике самого поисковика и не вызывает отторжения у пользователей. Напротив, активные кнопки прямо на инлайнах позволяют быстрее оформить нужный заказ.
Сервис для бронирования туров Level.Travel размещает в своем блоге виджеты, похожие на интерактивные инлайны, и с помощью нативной рекламы к ним перенаправляются пользователи, которые интересуются путешествиями.
По прогнозам BI Intelligence Forecast, уже через 3 года нативная реклама будет занимать 74% рынка интернет-рекламы. А вместе с ростом ее популярности увеличится и распространение интерактивных инлайнов. Ведь наряду с другими форматами — игры или тесты — они предполагают активное взаимодействие с пользователем и способны не только рассказать о товаре или услуге, но и развлечь человека или принести ему практическую пользу.
Правила идеального инлайна
Инлайн должен вписываться в площадку, на которой размещен. Если планируете опубликовать инлайн на нескольких ресурсах, лучше сделать его дизайн максимально универсальным, лаконичным. Ширина баннера должна соответствовать текстовому блоку сайта.
В любом случае лучше отказаться от слишком ярких и мерцающих элементов, исследования показали, что люди обращают меньше внимания на такого рода рекламу.
Инлайн позволяет вкратце рассказать о вашей компании и дополнительно получить какие-либо сведения от пользователей — телефоны, адреса почты или же ответы на интересующий вас вопрос.
Инлайн хорошо работает лишь в том случае, если размещен в релевантном ему контенте.
Интерактивный контент | Баннерная реклама
Что такое интерактивные баннеры?
Интерактивные баннеры — это любой вид цифрового дисплея, который позволяет пользователю быть активным участником, а не просто пассивным потребителем в цифровой среде.
Например, пользователь может выбрать, прокрутить или ввести текст, чтобы ответить на вопросы или вызвать определенное взаимодействие с рекламой. Если все сделано правильно, взаимодействие пользователя фактически изменит опыт потребления рекламы, обычно делая ее более персонализированной и, следовательно, более интересной для потребителя.
Благодаря этой дополнительной персонализации неудивительно, что интерактивные баннеры с большей вероятностью привлекут внимание пользователя и публики и помогут вам максимизировать рентабельность ваших баннерных кампаний.
Метрики интерактивных баннеров
Эти единицы выходят за рамки CTA и кликов. Они распространяются на платформы социальных сетей бренда, фирменные опросы, игры, 360-градусное видео и многое другое. Сообщается, что интерактивные баннеры увеличивают время, затрачиваемое на рекламу, на 47%, что делает их в девять раз более эффективными при принятии решения о покупке. 88% маркетологов считают, что использование этого формата медийной рекламы помогает выделить их бренд среди конкурентов.
Они также могут похвастаться 9Уровень завершения 0%, время просмотра увеличено более чем на 47%, а CTR выше на 300%.
Пользователи так же любят интерактивные баннеры! Instapage сообщает, что эта реклама показалась им забавной (91%), привлекательной (70%), стимулирующей (66%) и креативной (52%).
Нужна помощь с интерактивной кампанией? Свяжитесь с нами>
Вот некоторые из наших любимых примеров интерактивных баннеров
Первое объявление «HotSpot» слева позволяет пользователю наводить курсор на различные «горячие точки» на автомобиле, чтобы подробно изучить различные функции. Умело, баннер создает впечатление, мало чем отличающееся от личного посещения дилерского центра.
Второй баннер справа позволяет пользователю щелкнуть или перетащить круглую полосу прокрутки, чтобы продемонстрировать потребителю, какой автомобиль BMW соответствует их бюджету.
Стоит отметить, что обе эти рекламы BMW были полностью динамичными. То есть они были разработаны таким образом, чтобы в ходе кампании автомобиль, цены и характеристики можно было переключать и обновлять на лету.
Поскольку интерактивные баннеры могут быть несколько более дорогими и трудоемкими в производстве, введение динамического элемента может гарантировать, что вы и ваш клиент получите максимальную отдачу от затраченных средств. Щелкните здесь для получения дополнительной информации о кампаниях с динамическими баннерами.
Эти устройства Sainsbury также были умным способом побудить пользователя взаимодействовать с баннером, чтобы выбрать свой любимый ингредиент. В зависимости от предложения пользователя баннер будет отображать блюдо, основанное на этом ингредиенте, создавая персонализированную единицу, которую пользователь не сможет игнорировать.
Какие преимущества интерактивные баннеры могут дать вашему бизнесу?
Интерактивные баннеры могут помочь вам рассказать более сложную историю или показать продукт не так, как это позволяют статические или даже насыщенные баннеры. Этот формат рекламы является одним из решений, к которому пришли рекламодатели после того, как им представили все меньше и меньше места на экране и все меньше внимания.
Есть еще одна важная причина, по которой бренды используют интерактивные баннеры для нужных продуктов: результаты.
Почему стоит выбрать Bannermen? 042 мы обучаем вашу команду
подробнее о нас
Посмотрите некоторые из наших работ
Свяжитесь с нами
Вас заинтересовала интерактивная реклама? Мы будем рады помочь вам добавить немного дополнительной активности в вашу цифровую рекламу! Позвоните нам сегодня.
Свяжитесь с нами
Свяжитесь с нами
Вас заинтересовала интерактивная реклама? Мы будем рады помочь вам добавить немного дополнительной активности в вашу цифровую рекламу! Позвоните нам сегодня.
Свяжитесь с нами
Почему интерактивные баннеры так эффективны для повышения вовлеченности?
Современные потребители ежедневно сталкиваются с гораздо большим количеством рекламы, чем они могут обработать.
В результате их умы придумывают способы справиться с потенциальной сенсорной перегрузкой и в конечном итоге достигают места, где они инстинктивно отключают рекламу при просмотре веб-страниц.
Опытные маркетологи реагируют на подобные явления, придумывая все больше инновационных способов привлечения внимания потребителей, таких как интерактивный контент .
Интерактивные баннеры могут быть особенно эффективны, когда речь идет о привлечении вашей аудитории к вашему бренду. Вот что вам нужно знать, чтобы использовать их с умом.
Загрузите этот пост, введя свой адрес электронной почты ниже
Что такое интерактивные баннеры?
Большинство людей настолько привыкли к традиционным рекламным баннерам, что фактически разработали механизм преодоления, называемый баннерной слепотой, чтобы помочь своему разуму отфильтровать их.
В результате они почти не замечают их, и брендам становится все труднее, чем когда-либо, привлекать внимание с помощью таких методов.
Интерактивные баннеры, напротив, сложны и динамичны. Они используют цвет, движение и визуальный интерес, чтобы привлечь внимание потребителей, прежде чем пригласить их к реальному взаимодействию с ними.
В результате баннер гораздо меньше похож на рекламу, а гораздо больше похож на впечатление, которое понравится вашей аудитории. Таким образом, они не только будут видеть вашу рекламу и взаимодействовать с ней, но и получать от этого активное удовольствие.
Как интерактивные баннеры максимизируют результаты взаимодействия
Баннерная реклама — это простой и экономичный способ продвижения продукта, услуги или торговой марки там, где они, скорее всего, будут замечены на веб-сайте. (Области с высокой видимостью, такие как верхняя, нижняя и боковые панели.)
Как правило, они имеют узкую форму, чтобы идеально вписываться в эти места.
Создание интерактивного рекламного баннера повышает шансы того, что его не только увидят, но и взаимодействуют с ним.
Вот некоторые из многих способов, которыми интерактивные баннеры помогают повысить уровень вовлеченности бренда до небес.
Поощрение привлечения большего числа посетителей
Привлечение трафика на ваш веб-сайт — это только часть того, что необходимо для того, чтобы ваши маркетинговые усилия привели к увеличению прибыли.
Вам нужно, чтобы люди взаимодействовали с вашим контентом, как только они его получили. Интерактивный контент — вплоть до интерактивных баннеров — отличный способ сделать это.
Чем больше различных способов взаимодействия с вами вы предложите людям, , тем больше вероятность, что они найдут то, что их заинтересует.
Чем уникальнее и инновационнее баннер, тем больше вовлеченности пользователей он в конечном итоге вызовет.
Поддержите целостный имидж бренда
Потребители цифрового века имеют почти безграничный выбор при покупке продуктов и услуг.
Таким образом, если компании цифровой эпохи хотят выделиться, им нужны убийственные стратегии брендинга, которые привлекут к ним внимание и создадут знакомство с брендом среди целевой аудитории.
Однако потребители не запомнят ваш бренд и не узнают о нем все больше и больше с течением времени, если они не смогут постоянно узнавать его, когда видят.
Хорошо организованные интерактивные баннеры, соответствующие вашему бренду, помогают поддерживать этот процесс.
Помните, что не все ваши будущие клиенты будут готовы совершить конверсию, когда впервые увидят ваш бренд.
Сплоченный имидж бренда может повысить узнаваемость бренда — вероятность того, что потребитель предпочтет вас вашим конкурентам, когда они будут готовы совершить конверсию.
Сбор и систематизация подробных данных
Несмотря на то, что все кликабельные объявления предлагают маркетологам полезные данные и идеи, которые можно использовать для улучшения будущих кампаний, интерактивные варианты предоставляют намного больше деталей.
Среди других типов данных ваши интерактивные баннеры могут сообщить вам:
- Сколько времени посетитель мог потратить на просмотр вашего объявления.
- Как именно они взаимодействовали с вашей рекламой, пока были там.
- Решили ли они делиться контентом с кем-либо еще.
- Повторно ли они взаимодействовали с контентом после того, как закончили.
Чем больше вы знаете о том, как посетители взаимодействуют с вашими интерактивными баннерами и другим маркетинговым контентом, тем лучше будет подготовлена ваша маркетинговая команда, чтобы сделать вашу следующую кампанию позитивной.
Показать больше различных продуктов
Традиционные статические баннеры действительно не оставляют много места для возможностей, когда речь идет о продуктах, которые вы можете отображать.
Вам более или менее необходимо решить заранее, какие варианты вы хотите продвигать, и надеяться на лучшее, как только ваше объявление будет запущено.
С другой стороны, интерактивные баннеры связаны с бесконечными вариантами, когда речь идет о том, как вы показываете свою продукцию.
Используйте галереи или карусели изображений для демонстрации целых коллекций. Интегрируйте определенные продукты в свои объявления уникальными способами. Будь креативным!
Повышение рейтинга кликов
Чем привлекательнее объявление, тем выше будет ваш рейтинг кликов (CTR).
Статические, тусклые объявления, как и миллион других, которые точно такие же, легко не заметить и игнорировать.
Интерактивные баннеры обращаются к потребителям на совершенно другом уровне. Они предлагают людям возможность поиграть в игру, ответить на интересные вопросы или иным образом поучаствовать в чем-то веселом и обогащающем.
На самом деле, люди легко забывают, что их рекламируют вообще.
Когда это происходит, CTR повышается. Потребители также с большей вероятностью будут участвовать другими способами, такими как подписка на списки рассылки или выполнение других призывов к действию.
Обеспечьте эстетическое удовольствие
Хотя, безусловно, можно создать классический баннер, чтобы он был гладким, современным и приятным для глаз, он все же рискует торчать, как больной палец.
С другой стороны, хорошо продуманные интерактивные баннеры действительно могут улучшить внешний вид веб-сайта. Помимо прочего, они могут:
- Быть спроектированы таким образом, чтобы органично вписываться в окружающий контент для создания цельного ощущения (аналогично нативной рекламе).
- Больше похоже на игры, видео и другие ключевые элементы веб-страницы, чем на рекламу.
- Добавьте движения, цвета, красоты и индивидуальности на свою страницу.
Чем эстетичнее реклама и чем лучше она сочетается с окружающим контентом, тем позитивнее ваши посетители будут реагировать на ее присутствие.
Обеспечьте более высокую отдачу от инвестиций
Большинство вариантов цифрового маркетинга довольно рентабельны, но интерактивные рекламные баннеры обеспечивают особенно высокую потенциальную отдачу от ваших первоначальных инвестиций.
Их изготовление ненамного дороже традиционных баннеров. Однако они значительно эффективнее.
Интерактивные баннеры побуждают пользователей к участию, обеспечивая более привлекательный и менее навязчивый опыт.
Вместо того, чтобы просить посетителя пассивно сидеть и получать рекламу, они пригласите их принять участие в веселом, стимулирующем опыте (например, в игре или викторине).
Чем позитивнее пользовательский опыт, тем выше уровень вовлеченности и связанная с этим прибыль — на это вы всегда можете рассчитывать, имея интерактивный контент всех типов в своем уголке.
3 примера эффективных интерактивных баннеров
Теперь вы знаете, что отличает интерактивные баннеры от своих стандартных собратьев. Вы также знаете о преимуществах, которые они могут принести вашему бренду, если вы решите сделать их частью своей рекламной стратегии.
Теперь пришло время вдохновиться примерами интерактивных рекламных баннеров в действии. Ниже приведены лишь некоторые из них, на которые стоит обратить внимание.
1. Рок-контент
Интерактивные баннеры могут сделать гораздо больше, чем просто помочь покупателю вспомнить физический продукт, когда он в следующий раз столкнется с решением о покупке в магазине.
Это прекрасный способ побудить вашу аудиторию выполнить другие призывы к действию, например, подписаться на информационный бюллетень компании.
В этом элегантном интерактивном объявлении от Rock Content (созданном совместно с Ion ) используются цвет, анимация и удобство для рекламы официального информационного бюллетеня The Beat , который предлагает подписчикам новости о текущих маркетинговых тенденциях, мнения экспертов, и более.
Это объявление не только привлекает пользователя и удерживает его на странице достаточно долго, чтобы впитать информацию, но и делает мгновенную регистрацию очень простой, позволяя пользователям сделать это в самом объявлении.
2. McDonald’s
Источник: Digital иБренд McDonald’s хорошо известен своим вниманием к краскам, веселью, традициям и способности заставить людей любого возраста снова почувствовать себя детьми.
McDonald’s также любит ностальгию — отличный способ вдохновить взрослых, выросших в McDonald’s, на то, чтобы их дети делали то же самое.
Интерактивность идеально подходит для такого бренда, как McDonald’s , и эта реклама культового сэндвича Filet-O-Fish — отличный тому пример.
Игрок должен избегать препятствий, чтобы получить в награду Рыбное филе.
Стоит также отметить, что эта реклама была рассчитана на ограниченный рынок — людей, которые жили в районах, где сэндвич с филе-о-фиш уже был суперпопулярен.
Реклама, в том числе интерактивные, работает лучше всего, когда нацелена на правильную аудиторию.
3. Wheat Thins
Источник: DigitalandПризнают они это открыто или нет, но люди всех возрастов любят играть в игры, поэтому неудивительно, что некоторые из самых успешных интерактивных баннеров в Интернете предлагают зрителям этот опыт. .
Этот простой, но забавный рекламный баннер от Wheat Thins предлагал пользователям наполнить виртуальную чашу для вечеринки как можно большим количеством чипсов Wheat Thins.
Для игры пользователь двигал чашу, пока фишки «падали» с вершины баннера с нарастающей скоростью.
