Non è un segreto che sempre più persone accedono a Internet utilizzando i propri dispositivi mobili in aggiunta o al posto dei computer desktop. In effetti, ci sono quasi 7 miliardi di utenti mobili in tutto il mondo. (Per riferimento, la popolazione mondiale è attualmente di 7,7 miliardi. Questa è molta attività mobile.)
Ma quello che stanno facendo su quei dispositivi mobili è ancora più avvincente per gli esperti di marketing come noi.
Il 40% dei consumatori utilizza il proprio dispositivo mobile per condurre ricerche prima di effettuare un acquisto di persona. Più della metà effettua abitualmente acquisti utilizzando il proprio smartphone e il 55% degli acquirenti effettua acquisti su dispositivi mobili dopo aver trovato prodotti sui social media.
Di conseguenza, le aziende che dispongono di siti Web reattivi generano più lead e mantengono un vantaggio competitivo crescente rispetto alle aziende che non lo fanno.
Ma cos'è esattamente il design responsive del sito Web, come funziona e perché dovresti effettuare il passaggio? Questa guida si propone di rispondere a queste domande, offrire alcune statistiche interessanti e insegnarti le caratteristiche chiave del design reattivo che tutti gli esperti di marketing dovrebbero conoscere. Iniziamo.
Che cos'è il web design reattivo?
Il web design reattivo si riferisce a un sito Web progettato con funzionalità, contenuti e contenuti ottimizzati per dispositivi mobili. I siti Web responsive cambiano e si adattano a qualsiasi dispositivo possa essere utilizzato da un visitatore, inclusi smartphone, tablet e desktop.
Il web design reattivo non è più un suggerimento: è un investimento fondamentale per aumentare la consapevolezza del marchio, diversificare l'esperienza utente (UX) e convertire più visitatori del sito.
Inoltre, fa risparmiare tempo prezioso alla tua azienda. Non è possibile progettare un sito Web separato per ogni potenziale dispositivo che i visitatori possono utilizzare, per non parlare delle tecnologie future. Il responsive web design garantisce che il tuo sito Web sia compatibile con tutti i dispositivi e gli schermi per garantire un'esperienza piacevole … sia i dispositivi moderni che quelli ancora da inventare.
Scaviamo di più perché il design reattivo è così importante al giorno d'oggi.
Perché il responsive web design è importante
Ancora più importante, la mancanza di un design web reattivo può fare il contrario: può alienare il tuo sito Web dai clienti che cercano un'esperienza mobile coinvolgente. In effetti, la ricerca mostra che puoi perdere fino al 90% dei tuoi potenziali clienti a causa di una scarsa esperienza con i dispositivi mobili.
Sono molti i clienti e le entrate.
Disimballiamo tre principali vantaggi del design web reattivo.
1. Il web design reattivo aiuta i consumatori a scoprire il tuo sito web.
Molte persone accedono a Google sui propri dispositivi mobili, in effetti il 63%. Google penalizza anche i siti Web che non offrono un design reattivo. La sua indicizzazione mobile-first può effettivamente influire sul posizionamento del tuo sito Web e può causare il blocco delle pagine dei risultati dei motori di ricerca (SERP) a favore dei siti Web che offrono ai consumatori un design ottimizzato per i dispositivi mobili.
Pertanto, se la maggior parte del tuo pubblico cerca sul proprio smartphone (come dice la statistica sopra) e il tuo sito Web non presenta un design reattivo, i clienti potrebbero non trovare affatto il tuo sito Web.
2. Il web design reattivo mantiene gli acquirenti sul tuo sito Web più a lungo.
Le percentuali di rimbalzo dei siti Web sugli smartphone sono quasi del 40% (rispetto al 27% solo per i tablet). Inoltre, una pagina Web che si carica in cinque secondi o meno garantisce sessioni di visualizzazione più lunghe del 70%.
Gli utenti di dispositivi mobili si aspettano esperienze di siti Web veloci e di alta qualità (così come Google), aspettative che è possibile soddisfare con una progettazione di siti Web reattiva. (Usa il nostro strumento di classificazione dei siti Web per vedere come si comporta il tuo sito.)
3. Il web design reattivo crea un riconoscimento positivo del marchio e la fiducia nei confronti dei consumatori.
Infine, il 57% dei consumatori afferma di non voler raccomandare un'attività commerciale con un sito Web per dispositivi mobili mal progettato. Lo stesso rapporto mostra che più della metà degli acquirenti online che sono delusi dalla presenza online di un'azienda probabilmente pensano negativamente all'azienda stessa.
Il design reattivo del sito Web soddisfa gli acquirenti online, li incoraggia a consigliare la tua attività e li riporta ad acquistare di più.
Come realizzare un Web design reattivo
Un CMS è un software che ti consente di creare il tuo sito Web senza sapere come codificare – e che include sapere come codificare per un design reattivo. I costruttori di siti sono strumenti simili, ma rinunciano ad alcune funzionalità offerte da un CMS in cambio di facilità d'uso e prezzi più bassi.
Il web design responsive può essere realizzato utilizzando un CMS o un site builder che faciliti i design responsive. Ecco alcune scelte comuni.
1. Hub CMS
CMS Hub è un CMS completamente ospitato e completamente integrato. Si collega agli altri strumenti HubSpot in modo da poter offrire un'esperienza di navigazione, vendita, assistenza e navigazione del sito unificata per visitatori, clienti e dipendenti.
In termini di esperienza nella creazione di siti, CMS Hub offre temi di siti Web predefiniti ottimizzati anche per dispositivi mobili per soddisfare i visitatori e i clienti ovunque e comunque stiano navigando.
fonte
2. WordPress
WordPress è il CMS più famoso al mondo e mantiene questo superlativo offrendo uno dei più semplici costruttori di siti Web: l'editor di Gutenberg.
WordPress offre migliaia di temi e modelli per cominciare, inclusi numerosi modelli con design reattivo. (Trova temi Wordpress più reattivi anche qui e qui.)
fonte
Nota: Una volta impostato un tema per il tuo sito Web WordPress, coinvolgi e converti i tuoi visitatori con moduli gratuiti, chat dal vivo, email marketing e analisi aggiungendo il plug-in WordPress di HubSpot.
3. Squarespace
Squarespace è un noto costruttore di siti che offre splendidi design del sito e strumenti creativi.
Squarespace offre 60 modelli ottimizzati per dispositivi mobili da cui puoi scegliere di creare rapidamente il tuo sito. All'interno dell'editor Squarespace, puoi anche passare dalla visualizzazione da desktop a tablet a visualizzazione mobile per garantire che i tuoi progetti rispondano perfettamente a diversi dispositivi.
fonte
4. Wix
Wix è un altro costruttore di siti che offre abbonamenti a siti Web gratuiti ea pagamento. Fornisce un editor drag-and-drop di facile utilizzo, hosting gratuito e funzionalità di sicurezza.
Tutti i modelli Wix offrono un'esperienza ottimizzata per i dispositivi mobili per i visitatori. Come Squarespace, l'editor Wix ti consente di vedere l'aspetto del tuo sito Web su più dispositivi.
fonte
Oltre a creare un web design reattivo utilizzando uno dei suddetti strumenti CMS o creatori di siti, leggi questo post sul blog per scoprire come ottimizzare anche il tuo sito Web per uso mobile.
Best Practices Responsive Web Design
Con un CMS o un site builder intuitivo, la progettazione reattiva è semplice. Ma anche se stai utilizzando il miglior CMS, non è in grado di compensare contenuti e contenuti ottimizzati per i dispositivi mobili: quella parte dipende da te. Parliamo di alcune best practice reattive per il web design per aiutarti a creare l'esperienza web più mobile-friendly per i tuoi visitatori e clienti.
1. Non trascurare i tuoi pulsanti.
Che cosa vuoi che facciano i visitatori del sito quando arrivano sul tuo sito Web? Agisci, vero? Questo potrebbe essere facendo clic su un invito all'azione (CTA) come Per saperne di più, Scarica, o anche Acquistare.
In che modo i visitatori del sito interagiscono con questi pulsanti sul tuo sito desktop? Se questi CTA appaiono, scorrono o si trovano nella parte inferiore della pagina Web, potrebbe essere necessario rivalutare il modo in cui i visitatori mobili possono accedervi.
Ad esempio, supponiamo che tu offra un CTA principale come Ottieni HubSpot gratuitamente nella parte superiore del sito desktop in cui i visitatori possono vedere se da ogni pagina.
Quando visualizzi il tuo sito per dispositivi mobili, tuttavia, non si adatta all'intestazione. Invece di rimuoverlo del tutto, considera di spostare il pulsante o includerlo nel menu del tuo hamburger (le tre linee nell'angolo in alto), dove i visitatori possono ancora vedere e fare clic su di esso.
Inoltre, considera la dimensione delle aree cliccabili sul tuo sito mobile. A differenza di un desktop, in cui i visitatori possono utilizzare un cursore del mouse per fare clic su pulsanti e collegamenti, utilizzano le dita per navigare sul sito Web sul proprio smartphone o tablet.
Si consiglia di fare clic su elementi sui dispositivi mobili essere alto almeno 48 pixel. Ciò include pulsanti, campi modulo, collegamenti incorporati e navigazione nei menu.
2. Usa grafica vettoriale scalabile.
Se il tuo sito Web include illustrazioni o icone, devono essere formattate come grafica vettoriale scalabile (SVG).
fonte
Gli SVG possono essere ridimensionati all'infinito, a differenza di altri formati multimediali come JPG e PNG. Ciò garantisce che il tuo sito Web offra un'esperienza di navigazione di alta qualità per gli utenti su qualsiasi dispositivo. Aiutano anche a caricare il tuo sito più velocemente – di cui abbiamo già discusso è una buona cosa per l'esperienza utente e le classifiche SERP.
3. Assicurati che le tue immagini siano ridimensionate.
Le illustrazioni e le icone non sono l'unico tipo di supporto che cambia dimensione su vari dispositivi. Anche le tue immagini devono ridimensionare.
Ad esempio, i siti Web desktop potrebbero richiedere immagini a 1200 pixel, mentre i siti Web mobili potrebbero aver bisogno di quelli a 400 pixel. L'uso della risoluzione più grande su tutti i dispositivi può rallentare la velocità della tua pagina, quindi l'approccio non è raccomandato.
fonte
Invece, considera di caricare diverse risoluzioni di immagine e di designare quale immagine desideri visualizzare su ciascun dispositivo. Ciò si ottiene in genere assegnando diversi tag "media" a specifici oggetti "sorgente" (ad esempio tablet o dispositivo mobile) nel codice del sito Web.
Nota: HubSpot consente il ridimensionamento automatico delle immagini sui contenuti – un altro motivo per costruire il tuo sito Web reattivo su CMS Hub!
4. Considera la tua tipografia.
Un font che appare stupendo sul tuo sito desktop potrebbe non leggere così bene su un dispositivo mobile delle dimensioni di un quarto. Se i visitatori non riescono a leggere il tuo sito Web, non faranno sicuramente clic o acquisteranno nulla.
fonte
In alternativa, ruotare i caratteri del tuo sito Web attorno all'esperienza mobile può lasciare agli utenti desktop parole brutte che sono troppo grandi e si scontrano con il tuo marchio.
Ecco i nostri migliori consigli per la tipografia sul web design reattivo:
-
Il tipo di corpo 16pt è la regola empirica per il contenuto Web desktop e mobile.
-
Evita i caratteri super sottili che svaniscono su schermi più piccoli.
-
Assicurati che tutte le intestazioni siano chiaramente più grandi del contenuto di corpo e sottotitolo.
-
Usa colori contrastanti per la tua tipografia in modo che non si sbiadisca nei colori di sfondo del tuo sito web.
5. Approfitta delle funzionalità del dispositivo.
Mentre i potenziali clienti e i clienti non possono chiamarti sui loro computer, sicuramente possono farlo sui loro smartphone. Valuta di cambiare il tuo "Chatta adesso!" CTA a "Chiamare ora!" e includi il numero di telefono della tua attività commerciale al posto dell'email.
Inoltre, se la tua azienda ha un'applicazione mobile, chiedi ai visitatori del sito di aprire l'app dal tuo sito Web, cosa che potrebbero non essere in grado di fare sui loro computer.
6. Prova spesso il tuo sito web.
Come sempre, prova il tuo sito Web reattivo su diversi dispositivi e browser. Dai un'occhiata allo strumento di test ottimizzato per dispositivi mobili di Google per vedere il rendimento del tuo sito.
Questo utile strumento di Matt Kersley fornirà anche una sbirciatina al tuo sito Web su dispositivi di dimensioni diverse. Ovviamente puoi anche usare i tuoi dispositivi mobili.
Modelli responsive di web design
Il modo migliore per garantire che il tuo sito Web abbia un design reattivo è iniziare con un modello di web design reattivo. Di seguito sono disponibili cinque splendidi modelli disponibili HubSpot Asset Marketplace che offrirà ai visitatori del tuo sito un'esperienza di navigazione ottimizzata per i dispositivi mobili.
Accedi a migliaia di modelli con HubSpot Marketing Professional.
1. Modello di progettazione reattiva DjanGo
Prezzo: $ 200
Il modello DjanGo è un modello di sito completamente personalizzabile e reattivo. Il suo design moderno e minimalista consente ai visitatori di concentrarsi sul contenuto del sito e sulle informazioni sul prodotto.
2. Prodigy Responsive Design Template
Prezzo: Gratuito
Il modello Prodigy è un modello di sito Web pulito che raggiunge il tuo pubblico con supporti brillanti e CTA multipli. Converte automaticamente il suo design per adattarsi a qualsiasi dispositivo utilizzato dai visitatori del tuo sito.
3. Modello di progettazione reattiva quantistica
Prezzo: $ 75
Il modello Quantum è un tema multiuso che cattura il tuo pubblico con titoli audaci e uno sfondo video. Personalizza il tuo sito con una varietà di layout di pagina e moduli personalizzati.
4. Modello di progettazione reattiva Kalahari
Prezzo: $ 199
Il modello Kalahari è un tema reattivo che offre navigazione dinamica e personalizzazione a livello di pagina. Usa questo modello per convertire il tuo pubblico con CTA brillanti e straordinari.
5. Modello di progettazione reattiva del framework di avvio
Prezzo: Gratuito
Il modello Startup Framework è un modello di sito Web unico con tipografia audace e grafica brillante. Costruiscilo in modo nativo all'interno dell'editor dei contenuti di HubSpot e scegli tra migliaia di icone e decine di moduli personalizzati.
Rispondi al tuo pubblico con Responsive Design
Con così tanti consumatori che acquistano e navigano sui propri dispositivi mobili, il design reattivo è un must assoluto. Senza di essa, potresti perdere i lead, i clienti e le entrate.
Utilizza questi strumenti, modelli e best practice per iniziare oggi stesso con il web design reattivo.
Nota del redattore: questo post è stato originariamente pubblicato a settembre 2014 ed è stato aggiornato per completezza.