Come creare widget reattivi: 6 consigli con esempi
I widget reattivi stanno diventando sempre più essenziali. Considerando che quasi il 58% del traffico web proviene da dispositivi mobili, è importante che tutti gli elementi del tuo sito web, inclusi i popup, si adattino facilmente ai diversi schermi. In questo articolo, condivideremo consigli su come creare widget che appaiono perfetti sia su desktop che su schermi mobili. Inoltre, analizzeremo diversi widget compatibili con dispositivi mobili su siti web reali e dimostreremo quanto sia facile creare simili nel nostro editor.
Cos'è un Widget Reattivo
I widget o i popup reattivi sono elementi web che si adattano automaticamente al layout e alle dimensioni dei diversi schermi. Questo garantisce un'esperienza utente fluida su vari dispositivi, inclusi desktop, tablet e telefoni cellulari. Un'altra opzione è il design adattivo del widget, che comporta la creazione di più versioni di un pop-up, ognuna ottimizzata per uno specifico schermo. Anche se questo concede un controllo più fine sul design per ciascun tipo di dispositivo, implica anche la gestione e la manutenzione di queste diverse versioni.
In Claspo, è possibile utilizzare entrambi gli approcci. Con gli elementi reattivi, puoi creare rapidamente e facilmente versioni web e mobili di un widget contemporaneamente. Utilizzando elementi adattivi, puoi apportare modifiche a ciascuna versione separatamente se necessario.
Creare Widget Reattivi: 6 Consigli con Esempi
La nostra ampia libreria contiene oltre 700 modelli, tutti ottimizzati per schermi mobili. Puoi facilmente sostituire immagini, cambiare stili di testo, aggiungere sfondi e altro per garantire che tutto funzioni perfettamente. Inoltre, creare un nuovo widget reattivo è semplice, poiché forniamo tutti gli strumenti necessari.
1. Usa le Colonne per Creare Widget Reattivi
Il nostro editor ha il componente colonne, che puoi utilizzare per assicurarti che il tuo modulo di iscrizione abbia un buon aspetto sui dispositivi mobili. Diamo un'occhiata più da vicino alle sue caratteristiche.
Posizionamento Automatico del Contenuto dall'Alto verso il Basso
Posiziona automaticamente tutti gli elementi del widget in verticale. Questo perché gli utenti visualizzano il contenuto sui dispositivi mobili dall'alto verso il basso. Quindi puoi essere sicuro che il tuo widget sarà visualizzato correttamente su uno schermo piccolo.
Tuttavia, se necessario, puoi disabilitare questa opzione quando le colonne sono piccole. Ad esempio, abbiamo posizionato una piccola icona in una colonna e un breve testo nell'altra. Per un aspetto più compatto del widget mobile, è meglio disporli orizzontalmente piuttosto che verticalmente.
Regolare la Lunghezza dei Widget Reattivi
Se un'immagine occupa molto spazio nella versione desktop, il sistema riduce le sue dimensioni a 150px nella versione mobile. Questo è possibile perché le colonne hanno proporzioni di visualizzazione speciali che vengono ricalcolate quando si passa alla versione mobile. L'ottimizzazione si concentra sull'immagine, quindi non devi preoccuparti che campi importanti scompaiano nella versione mobile.
Inoltre, puoi nascondere facilmente qualsiasi colonna nella versione mobile e mantenerla nella versione desktop.
2. Realizzare Widget Responsive e Puliti
I widget mobili devono essere di dimensioni adeguate per garantire che non impediscano agli utenti di accedere al contenuto principale. Questo è specificamente indicato nei requisiti di Google per i popup. Per ridurre le dimensioni di un widget responsive, è possibile minimizzare il suo componente visivo. Nell'editor di Claspo, nascondere le immagini è semplice. Passa semplicemente alla modalità di modifica mobile e clicca sul pulsante corrispondente. Questo terrà l'immagine nel widget desktop ma la rimuoverà dalla versione per display più piccoli.
In Claspo, di default, quando si modifica un modulo di iscrizione, tutti i font vengono automaticamente cambiati nei modelli di stato della sottoscrizione: Successo, Già Iscritto, Errore. La dimensione del font è sincronizzata in entrambe le versioni. Tuttavia, è possibile ridurla separatamente in modalità mobile per rendere il testo più piccolo e più armonioso su uno schermo piccolo. Nelle impostazioni, clicca sulla lista a discesa accanto a 'Stile del testo' e seleziona 'Rimuovi stile dall'elemento.'
Per la versione mobile, consigliamo di utilizzare font 2-4 punti più piccoli rispetto a quelli utilizzati sul desktop. Tuttavia, non dovresti ridurre il testo principale al di sotto di 14-16 punti o le note a piè di pagina e i suggerimenti al di sotto di 10-12 punti.
Si prega di notare che rimuovere lo stile del testo richiederà anche la modifica della dimensione del font nei modelli aggiuntivi se stai creando un modulo di sottoscrizione.
Puoi modificare contemporaneamente le impostazioni sia per la versione desktop che per quella mobile di un widget responsive. Il sistema sincronizza impostazioni come sfondo, contorno, ombra e angoli arrotondati. Ad esempio, puoi modificare l'aspetto dei campi email e nome dell'utente arrotondando gli angoli e aggiungendo uno sfondo. Lo stesso accade istantaneamente nella versione mobile.
3. Utilizzare il Launcher per Eseguire un Widget Responsive
Se hai bisogno di aggiungere un modulo di iscrizione grande o un altro widget responsive di dimensioni considerevoli, puoi utilizzare il launcher. Questo elemento occupa uno spazio minimo sullo schermo pur essendo ben visibile. Scopri come questo approccio viene utilizzato sul sito web di U.S. Art Supply.
In Claspo, tutti i template di iscrizione alla newsletter dispongono di launcher che possono essere rapidamente personalizzati. Con la stessa facilità, puoi crearne uno da zero e collegarlo a un popup specifico. Scegli un'animazione di entrata per far apparire l'elemento a sinistra, destra, in basso o in alto. Se vuoi rendere il launcher più visibile, impostalo su animazione Loop. Questo aiuterà a evidenziarlo se c'è un pulsante di chat accanto a esso, ecc.
4. Considerare Alternative al Launcher
Il launcher è un elemento molto utile, ma alcuni utenti possono trovarlo invasivo perché non può essere chiuso. Se temi una tale reazione dai visitatori del tuo sito, prova a creare un piccolo widget responsivo che si aprirà in un altro popup a grandezza naturale quando ci cliccheranno sopra. Ecco come appare sul sito di Handicraft:
Visivamente, l'unica differenza rispetto a un launcher sarà la presenza di un pulsante di chiusura.
Per impostare una regola affinché chiami un altro popup, apri l'opzione 'Azione al clic' nelle impostazioni e allega il widget predefinito.
Puoi anche impostare una barra fluttuante in modo simile. Ad esempio, la compagnia Makers Market ha creato un widget laconico con un solo pulsante che attiva un modulo di iscrizione a grandezza naturale.
Nel nostro editor, puoi creare un widget responsivo simile e personalizzarlo cambiando il colore del pulsante CTA, aggiungendo uno sfondo che si abbina al design del tuo sito web, ecc.
5. Esegui Widget Responsivi con Elementi di Conversione
Puoi aggiungere componenti speciali ai widget responsivi per catturare l'attenzione degli utenti e incoraggiare la conversione. Ad esempio, Wine.com offre ai nuovi visitatori un codice promozionale per il loro primo acquisto:
E indovina un po'? Nell'editor di Claspo, puoi aggiungere un codice promozionale incorporato nel widget che l'utente può facilmente copiare e correre a fare acquisti da te. Ad esempio, usa questo approccio nei popup di uscita-intento per catturare i visitatori che stanno per andarsene. Ecco come appare in uno dei nostri template di widget responsivi:
Puoi anche incoraggiare gli utenti a iscriversi alla tua newsletter offrendo loro uno sconto immediato sui loro acquisti. A tal fine, aggiungi il componente del codice promozionale incorporato al template di Successo. Questo aumenterà le probabilità che il visitatore si converta in acquirente e, allo stesso tempo, aumenterà la tua base di contatti.
Un timer del conto alla rovescia può aumentare l'effetto FOMO del tuo sconto. Il marchio Fragrance Outlet lo utilizza in un pop-up a uscita intenzionale.
Il componente timer relativo di Claspo inizia il conto alla rovescia quando il widget appare davanti all'utente specifico. Oltre al rilevamento dell'uscita, può essere aggiunto a qualsiasi widget promozionale reattivo per aumentare l'urgenza. La caratteristica unica del timer relativo è di adattare il periodo di tempo per ciascun visitatore. Questo ti permette di gestire una 'promozione eterna' e attirare un pubblico più ampio senza suscitare sospetti di disonestà. Il tempo di decisione di una persona scade, ma altri visitatori potranno approfittare dell'offerta prima che il timer raggiunga lo zero per loro.
6. Evita Errori di Posizionamento dei Widget Reattivi
A volte, il posizionamento dei widget reattivi può essere problematico quando un pop-up o un launcher si sovrappone ad altri contenuti su uno schermo mobile. Ad esempio, nella versione mobile del blog di Ten Thousand Villages, gli utenti hanno poche probabilità di raggiungere la pagina del prodotto perché il pulsante della chat blocca il pulsante CTA.
Allo stesso modo, il marchio Jubilee rischia di perdere potenziali iscritti a causa della piccola distanza tra il pulsante 'invia email' e il pulsante della chat. Quando si preme lo schermo con il pollice destro, è facile mancare il pulsante 'invia email'.
Per prevenire tali problemi con un launcher, è possibile regolarne facilmente la posizione. Semplicemente, posizionalo sul lato opposto dello schermo rispetto agli altri elementi importanti del sito. Inoltre, puoi impostare una distanza personalizzata dal launcher ai bordi dello schermo se necessario.
Se desideri aggiungere più widget al tuo sito web per scopi diversi, è importante evitare l'errore di eseguirli contemporaneamente, come è successo sul sito di Burke Decor:
Claspo ti protegge da schermi disordinati con le sue funzionalità intelligenti — intervallo di silenzio e protezione da sovrapposizione.
Imposta l'intervallo di silenzio per creare un buffer tra le visualizzazioni dei widget. L'intervallo predefinito di 3 minuti garantisce un'esperienza di navigazione fluida, ma puoi facilmente personalizzarlo in base al tempo medio di permanenza dei visitatori sul tuo sito o ai tempi di permanenza su pagine specifiche.
Inoltre, Claspo ti solleva dalla pressione, impedendo automaticamente la sovrapposizione dei widget, anche quando hai regole di visualizzazione duplicate. Questo significa che puoi concentrarti sulla creazione di contenuti coinvolgenti senza preoccuparti di gestire configurazioni popup complesse.
Migliorare l'UX con Widget Responsivi
I widget responsivi sono elementi chiave del sito web per una positiva esperienza utente. Essi garantiscono che il tuo contenuto rimanga accessibile e coinvolgente, indipendentemente dalla dimensione dello schermo. Claspo semplifica il processo offrendo modelli pre-costruiti ottimizzati per dispositivi mobili e strumenti di editing intuitivi.
Prima della pubblicazione, testa i popup pronti sul sito. La nostra piattaforma rende facile farlo. In questo modo vedrai la loro posizione effettiva e potrai rapidamente apportare le modifiche necessarie.
Dopo averli lanciati, inizia con i test A/B. Questo può essere fatto direttamente in Claspo. Gradualmente prova tutti gli elementi essenziali: design, CTA, testo e altro. Questo ti aiuterà a capire meglio il tuo pubblico e aumentare le conversioni. La parte migliore è che otterrai tutte le funzionalità descritte in questo articolo, inclusi i test, con il nostro piano gratuito a vita. Quindi, iscriviti e crea widget responsivi senza alcun problema.
