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