Как создать адаптивные виджеты: 6 советов с примерами
Адаптивные виджеты становятся все более необходимыми. Учитывая, что почти 58% веб-трафика поступает с мобильных устройств, важно, чтобы все элементы вашего сайта, включая всплывающие окна, легко адаптировались к различным дисплеям. В этой статье мы поделимся советами о том, как создавать виджеты, которые выглядят идеально как на десктопных, так и на мобильных экранах. Кроме того, мы проанализируем различные мобильные дружественные виджеты на реальных сайтах и покажем, как легко создать аналогичные в нашем редакторе.
Что такое адаптивный виджет
Адаптивные виджеты или всплывающие окна — это веб-элементы, которые автоматически корректируют свою макет и размер для различных экранов. Это обеспечивает беспрепятственный пользовательский опыт на различных устройствах, включая настольные компьютеры, планшеты и мобильные телефоны. Другой вариант – адаптивный дизайн виджетов, который предполагает создание нескольких версий поп-ап окна, каждая из которых оптимизирована для конкретного экрана. Это позволяет получить более точный контроль над дизайном для каждого типа устройства, но также означает управлением и поддержкой этих различных версий.
В Claspo вы можете использовать оба подхода. С помощью адаптивных элементов вы можете легко и быстро создать веб и мобильные версии виджета одновременно. С помощью адаптивных элементов, вы можете сделать корректировки для каждой версии отдельно, если это необходимо.
Создание адаптивных виджетов: 6 советов с примерами
Наша обширная библиотека содержит более 700 шаблонов, все из которых оптимизированы для мобильных дисплеев. Вы можете легко заменить изображения, изменить стили текста, добавить фоны и многое другое, чтобы убедиться, что все работает идеально. Кроме того, создание совершенно нового адаптивного виджета просто, так как мы предоставляем все необходимые инструменты.
1. Используйте колонки для создания адаптивного виджета
В нашем редакторе есть компонент колонок, который вы можете использовать, чтобы ваша форма подписки выглядела хорошо на мобильных устройствах. Давайте подробнее рассмотрим его особенности.
Автоматическое размещение контента сверху вниз
Он автоматически размещает все элементы виджета вертикально. Это потому, что пользователи просматривают контент на мобильных устройствах сверху вниз. Таким образом, вы можете быть уверены, что ваш виджет будет отображаться правильно на маленьком экране.
Однако, если необходимо, вы можете отключить эту опцию, когда колонки маленькие. Например, мы разместили крошечный значок в одной колонке и короткий текст в другой. Для более компактного вида мобильного виджета лучше разметить их горизонтально, а не вертикально.
Регулировка длины адаптивных виджетов
Если изображение занимает много места в версии для настольных компьютеров, система уменьшает его размер до 150px в мобильной версии. Это возможно, потому что у колонок есть специальные пропорции отображения, которые пересчитываются при переключении на мобильную версию. Оптимизация фокусируется на изображении, так что вам не придется беспокоиться о том, что какие-либо важные поля исчезнут в мобильной версии.
Кроме того, вы можете легко скрыть любую колонку в мобильной версии и оставить ее в настольной версии.
2. Сделайте Чистые Адаптивные Виджеты
Мобильные виджеты должны быть соответствующего размера, чтобы пользователи могли получить доступ к основному контенту. Это конкретно указано в требованиях Google для всплывающих окон. Для уменьшения размера адаптивного виджета можно минимизировать его визуальный компонент. В редакторе Claspo скрытие изображений происходит просто. Переключитесь в режим редактирования для мобильных устройств и нажмите соответствующую кнопку. Это сохранит изображение в десктопной версии виджета, но уберет его из версии для меньших экранов.
В Claspo, по умолчанию, при редактировании формы подписки все шрифты автоматически меняются на шаблонах состояниями подписки: Успех, Уже Подписан, Ошибка. Размер шрифта синхронизируется в обеих версиях. Однако в мобильном режиме можно уменьшить его отдельно, чтобы текст стал меньше и выглядел более органично на маленьком экране. В настройках нажмите на выпадающее меню рядом с "Стиль текста" и выберите "Удалить стиль элемента".
Для мобильной версии рекомендуется использовать шрифты на 2-4 пункта меньше, чем на десктопе. Однако основной текст не должен быть меньше 14-16 пунктов, а сноски и подсказки - меньше 10-12 пунктов.
Обратите внимание, что удаление стиля текста также потребует изменения размера шрифта в дополнительных шаблонах, если вы создаете форму подписки.
Вы можете одновременно изменить настройки как для десктопной, так и для мобильной версии адаптивного виджета. Система синхронизирует такие настройки, как фон, обводка, тень и закругленные углы. Например, вы можете изменить внешний вид полей для электронной почты и имени подписчика, закругляя углы и добавляя фон. То же самое моментально происходит в мобильной версии.
3. Используйте Лаунчер для Запуска Адаптивного Виджета
Если вам нужно добавить большую форму подписки или какой-то другой крупный адаптивный виджет, вы можете использовать лаунчер. Этот элемент занимает минимальное пространство на экране, оставаясь заметным. Посмотрите, как этот подход используется на сайте U.S. Art Supply.
В Claspo все шаблоны подписки на рассылку имеют лаунчеры, которые можно быстро настроить. Также легко, вы можете создать новый с нуля и прикрепить его к определенному всплывающему окну. Выберите анимацию появления, чтобы элемент всплыл слева, справа, снизу или сверху. Если вы хотите сделать лаунчер более заметным, установите анимацию Зациклить. Это поможет выделить его, если рядом есть кнопка чата и т.д.
4. Рассмотрите альтернативы лаунчерам
Лаунчер — это очень удобный элемент, но некоторые пользователи могут посчитать его навязчивым, так как он не может быть закрыт. Если вы боитесь такой реакции от посетителей вашего сайта, попробуйте создать небольшой адаптивный виджет, который откроет другое полноразмерное всплывающее окно при клике на него. Посмотрите, как это выглядит на сайте Handicraft:
Визуально, единственное различие с лаунчером будет наличие кнопки закрытия.
Чтобы установить правило для вызова другого всплывающего окна, откройте опцию 'Действие при клике' в настройках и прикрепите готовый виджет.
Вы также можете настроить плавающую панель аналогичным образом. Например, компания Makers Market создала лаконичный виджет с одной кнопкой, которая активирует полноразмерную форму подписки.
В нашем редакторе вы можете создать подобный адаптивный виджет и настроить его, изменив цвет кнопки призыва к действию, добавив фон, который соответствует дизайну вашего сайта и т.д.
5. Запускайте адаптивные виджеты с конверсионными элементами
Вы можете добавить в адаптивные виджеты специальные компоненты, чтобы привлечь внимание пользователей и стимулировать конверсию. Например, Wine.com предлагает новым посетителям промокод на первую покупку:
И угадайте, что? В редакторе Claspo вы можете добавить промокод, встроенный в виджет, который пользователь может легко скопировать и поспешить совершить покупки у вас. Например, используйте этот подход во всплывающих окнах с намерением покинуть сайт, чтобы поймать посетителей, собирающихся уйти. Вот как это выглядит на одном из наших шаблонов адаптивных виджетов:
Вы также можете побудить пользователей подписаться на вашу рассылку, предложив им мгновенную скидку на покупки. Для этого добавьте компонент встроенного промокода в шаблон Success. Это увеличит шансы на конвертацию посетителя в покупателя и одновременно увеличит вашу контактную базу.
Таймер обратного отсчета может усилить эффект FOMO от вашей скидки. Бренд Fragrance Outlet использует его в поп-апе exit-intent.
Компонент относительного таймера от Claspo начинает отсчет, когда виджет появляется перед конкретным пользователем. Помимо exit-intent, его можно добавить к любому промо-виджету, чтобы увеличить срочность. Уникальная особенность относительного таймера заключается в подстройке времени для каждого посетителя. Это позволяет проводить «вечную акцию» и привлекать большую аудиторию, не вызывая подозрений в нечестности. Время принятия решения одного человека истекает, но другие посетители смогут воспользоваться предложением до того, как таймер достигнет нуля для них.
6. Избегайте ошибок размещения адаптивных виджетов
Иногда размещение адаптивных виджетов может быть проблематичным, когда поп-ап или лаунчер перекрывают другой контент на мобильном экране. Например, в мобильной версии блога Ten Thousand Villages у пользователей низкий шанс попасть на страницу продукта, потому что кнопка чата блокирует кнопку CTA.
Аналогично, бренд Jubilee рискует потерять потенциальных подписчиков из-за малого расстояния между кнопкой «отправить email» и кнопкой чата. При нажатии экрана правым большим пальцем легко промахнуться мимо кнопки «отправить email».
Чтобы избежать подобных проблем с лаунчером, вы можете легко изменить его расположение. Просто разместите его на противоположной стороне экрана от других важных элементов сайта. Кроме того, при необходимости вы можете задать пользовательское расстояние от лаунчера до краев экрана.
Если вы хотите добавить несколько виджетов на ваш сайт для разных целей, важно избежать ошибки их одновременного запуска, как это произошло на сайте Burke Decor:
Claspo защищает вас от перегруженных экранов с помощью своих умных функций — интервала тишины и защиты от наложений.
Настройте интервал тишины, чтобы создать буфер между показами виджетов. Интервал по умолчанию в 3 минуты обеспечивает плавный процесс просмотра, но вы можете легко настроить его, исходя из среднего времени посещения вашего сайта или конкретных времен пребывания на странице.
Кроме того, Claspo облегчает задачу, автоматически предотвращая наложение виджетов, даже если у вас одинаковые правила показа. Это значит, что вы можете сосредоточиться на создании увлекательного контента, не беспокоясь о сложных конфигурациях всплывающих окон.
Улучшение UX с респонсивными виджетами
Респонсивные виджеты являются ключевыми элементами сайта для положительного пользовательского опыта. Они обеспечивают доступность и привлечение внимания вашего контента, независимо от размера экрана. Claspo упрощает процесс, предлагая заранее созданные мобильные оптимизированные шаблоны и интуитивные инструменты редактирования.
Перед публикацией протестируйте готовые всплывающие окна на сайте. Наша платформа делает это просто. Таким образом, вы увидите их фактическое расположение и сможете быстро внести необходимые коррективы.
После их запуска начните A/B тестирование. Это также можно сделать непосредственно в Claspo. Постепенно тестируйте все важные элементы: дизайн, призывы к действию (CTA), текст и многое другое. Это поможет вам лучше понять свою аудиторию и увеличить конверсии. Лучшее в этом то, что вы получите всю функциональность, описанную в этой статье, включая тестирование, с нашим бесплатным планом на всю жизнь. Так что зарегистрируйтесь и создавайте респонсивные виджеты без лишних хлопот.
