Share
Oggigiorno il responsive web design è un must. Dato il numero crescente di persone che utilizzano i loro dispositivi mobili per fare ricerche prima di acquistare un prodotto e per aggiornarsi sulle ultime notizie, la tua azienda non può permettersi di avere un sito web non reattivo.
Quando si aggiunge che il fatto che Google preferisca i siti web sensibili ai dispositivi mobili nel loro algoritmo di ricerca, diventa chiaro che il design reattivo è qui per rimanere. Se stai solo facendo decollare il tuo sito, i suggerimenti per il web design reattivo descritti in questo articolo ti aiuteranno a progettare un sito attraente e reattivo. E se stai ridisegnando un sito esistente, gli stessi consigli ti torneranno utili.
I seguenti suggerimenti per la progettazione di siti web per dispositivi mobili e il design reattivo ti aiuteranno a verificare che il tuo sito sia reattivo e ottimizzato per i dispositivi mobili. Ecco alcuni dei nostri migliori consigli per il web design reattivo:
Comprendere che le persone utilizzeranno i siti Web in modo diverso sui computer desktop rispetto ai dispositivi mobili. Prendi in considerazione il rilevamento dei visitatori del tuo sito web o l'utilizzo di analisi per capire perché stanno accedendo al tuo sito con un dispositivo mobile e su quali pagine e elementi accedono di più. Queste informazioni ti aiuteranno a capire quali pagine e altri elementi del tuo sito web devono essere prontamente disponibili su schermi più piccoli.
Ad esempio, se stanno facendo una rapida ricerca del tuo sito per accedere alle tue informazioni di contatto, assicurarti che la tua pagina Contatti sia visibile sulla navigazione mobile è una scelta intelligente.
Prima di progettare il tuo sito, è utile pianificare prima il layout. Infatti, la maggior parte dei web designer inizia creando un wireframe e quindi il design visivo del sito Web prima di passare alla parte di codifica. Questo non solo ti aiuterà a creare l'esatto aspetto che desideri, ma renderà anche più semplice per te o per il tuo designer personalizzare il modello e integrarlo perfettamente con il tuo marchio.
Assicurati di creare diversi prototipi del tuo sito Web e testarli su varie dimensioni dello schermo per garantire che il design finale sia reattivo. Ecco alcuni strumenti che utilizzi per creare prototipi reattivi:
La navigazione è la parte più importante di qualsiasi sito web. Serve come una tabella di marcia per i tuoi visitatori e consente loro di accedere facilmente ad altre pagine del tuo sito. Sulle versioni desktop del tuo sito, la tua navigazione avrà solitamente collegamenti visibili a tutte le pagine importanti. Sui dispositivi mobili, la pratica regolare è usare un'icona di hamburger e nascondere i collegamenti dietro di esso.
Tuttavia, questo non è sempre l'approccio migliore in quanto alcuni utenti potrebbero non rendersi conto di dover fare clic sull'icona per rivelare il menu e lasciare frustrati perché non possono visitare altre pagine. Un approccio migliore sarebbe quello di lasciare le voci di menu più importanti visibili anche su schermi più piccoli e utilizzare il menu di hamburger per il resto dei collegamenti. Puoi anche includere collegamenti ad altre pagine nel testo sulla tua home page per facilitare la navigazione.
Le immagini svolgono un ruolo importante nel design del tuo sito web. Possono aiutarti a creare una connessione emotiva con i tuoi visitatori e consentire loro di visualizzare il prodotto che sono interessati all'acquisto. In quanto tale, è fondamentale per le tue immagini essere ottimizzate per il web.
Ciò significa che le immagini devono essere salvate nel formato appropriato: JPG per immagini fotografiche o panoramiche e PNG-8 per icone e loghi che richiedono uno sfondo trasparente. Oltre a questo, è necessario ridurre le dimensioni dell'immagine utilizzando uno strumento come TinyJPG e considerare l'utilizzo di immagini ottimizzate per vari punti di interruzione mobili per ridurre i problemi di ridimensionamento e larghezza di banda.
Un altro modo per approcciare il design reattivo è progettare prima una versione mobile del tuo sito web. Questo ti permette di vedere come le immagini, il testo, i loghi e altri elementi appariranno su schermi più piccoli. Se vengono visualizzati senza problemi, non dovresti avere problemi ad adattare il tuo design agli schermi più grandi.
Le query sui media sono state inizialmente disegnate come parte della proposta iniziale per i CSS, ma non sono diventate una realtà fino a quando i browser non hanno aggiunto il supporto ufficiale per loro nel 2012. Il ruolo principale delle query multimediali è che consentono di ottimizzare il layout del sito Web per varie larghezze dello schermo.
Quando si utilizzano le query multimediali, il contenuto risponderà a condizioni diverse su dispositivi specifici. In breve, una query multimediale controllerà la risoluzione, la larghezza e l'orientamento del dispositivo e visualizzerà l'insieme appropriato di regole CSS. Un esempio di query multimediale si presenta così:
@media screen e (min-width: 500px) le tue regole CSS qui
Inutile dire che i moduli sul tuo sito dovrebbero adattarsi alla larghezza e alle dimensioni dello schermo. Tuttavia, puoi fare un ulteriore passo avanti e assicurarti che i campi di input attivino il tipo corretto di tastiera. Puoi farlo facilmente aggiungendo elementi di input nei campi del modulo.
I campi che richiedono l'immissione del testo come nome, indirizzo email, e altri devono attivare una tastiera testuale mentre qualsiasi campo di input che richiede un numero deve attivare immediatamente la tastiera numerica. Ciò migliora la compatibilità generale del tuo sito web e l'esperienza dell'utente.
Non dimenticare di prestare particolare attenzione ai pulsanti sul tuo sito web. Poiché lo schermo immobiliare è così prezioso, è facile cadere nella trappola e rendere i pulsanti più piccoli in modo che si adattino allo schermo. Tuttavia, questo rende anche più difficile fare clic.
Assicurati che i tuoi pulsanti siano facili da riconoscere:
Per quanto riguarda le dimensioni, considera l'utilizzo del pad sul pulsante per aumentare l'area cliccabile. Puoi anche seguire la raccomandazione sul design dei materiali per l'accessibilità dei pulsanti e assicurarti che siano alti 36dp. (1dp = 1px).
Quando si tratta di testo, si vuole essere sicuri che il testo sia leggibile su schermi più piccoli. Una buona dimensione per la tua copia del corpo è 16px o 1em e quindi aggiusta la dimensione delle intestazioni di conseguenza. Allo stesso tempo, ti consigliamo di regolare l'altezza della linea del testo su 1.5em per garantire che le linee dei paragrafi abbiano abbastanza spazio per respirare.
Un altro suggerimento per la progettazione di siti Web mobili consiste nell'utilizzare un font leggibile. Evita i caratteri decorativi o di script per la copia del corpo o nelle voci di menu perché sono difficili da leggere, specialmente su schermi più piccoli.
Una delle più grandi tendenze che si sta lentamente facendo strada nel web design è l'uso di microinterazioni. Negli anni precedenti, animazioni e funzionalità interattive potevano essere considerate "belle da avere" per la maggior parte dei siti Web aziendali. Tuttavia, poiché i designer sono diventati iper-incentrati sull'esperienza utente, l'uso delle animazioni è balzato al centro dell'attenzione, in particolare nelle forme.
Forniscono agli utenti feedback rapidi, che sono particolarmente utili sui dispositivi mobili, anziché ricaricare la pagina, il che può aumentare l'utilizzo della larghezza di banda. Considera questo esempio da un'azienda australiana di pulizie di fine locazione. Ho contattato loro il loro uso delle microinterazioni. Ecco cosa hanno da dire:
Il nostro modulo di verifica è stato progettato per aiutare Sydneysiders a ottenere facilmente una quota di pulizia del contratto di locazione. Volevamo davvero sottolineare il fatto che era veramente istantaneo e nulla lo faceva più che attraverso l'uso di una microinterazione. Quando richiedi un preventivo, una ricevuta si anima da dietro il modulo, rivelando il prezzo totale della tua obbligazione pulita. Riteniamo che questo piccolo momento di "ta-da" abbia davvero aumentato le nostre percentuali di completamento durante il processo di checkout.
Un altro grande esempio di microinterazioni proviene dal sito web di Le Cafe Noir Studio. Il loro negozio online presenta cuori animati che attraversano lo schermo quando aggiungi un articolo al tuo carrello, infondendo un senso di apprezzamento immediato da parte del cliente:
Puoi risparmiare molto tempo nella progettazione di un sito Web reattivo se aggiungi un framework reattivo al tuo flusso di lavoro. Un framework HTML come Bootstrap utilizzato in un modello HTML è un buon punto di partenza se si desidera progettare siti Web statici e semplici.
Puoi anche sfruttare i temi WordPress premed responsive se vuoi creare un sito Web più complesso e incorporare un blog nella tua strategia di marketing. Strutture come queste sono anche un'ottima scelta se non sei un programmatore esperto ma vuoi fare tutto da solo.
Il design minimalista è cresciuto in popolarità negli ultimi anni e con buone ragioni. Elimina tutto il disordine, rende più facile per i visitatori concentrarsi sui contenuti, migliorando così i tassi di conversione e aiuta il tuo sito web a caricarsi più velocemente perché utilizza meno elementi. Va anche bene con il responsive web design perché può aiutarti a evidenziare le aree importanti del sito web e attirare l'attenzione sui tuoi inviti all'azione.
L'inclusione dei pulsanti di condivisione sul tuo sito web può aiutare i tuoi contenuti a ottenere maggiore visibilità e a generare più traffico. Tuttavia, i pulsanti di condivisione possono spesso bloccare i tuoi contenuti, rendendo difficile la lettura su schermi più piccoli. Assicurati che i pulsanti di condivisione si adattino bene agli schermi più piccoli testandoli su un dispositivo mobile o prendi in considerazione la possibilità di disattivarli su schermi inferiori a 768 px.
Una volta implementati i suggerimenti per il responsive web design sopra, è utile verificare se il tuo sito è ora reattivo. Ci sono molti strumenti online che ti permetteranno di testare la reattività del tuo sito. Ecco i tre migliori strumenti che ti consigliamo di utilizzare:
Google ha la sua versione del test ottimizzato per i dispositivi mobili ed è piuttosto semplice. Inserisci l'URL del tuo sito Web e fai clic Analizzare, e quindi attendere i risultati. Se il tuo sito è ottimizzato per i dispositivi mobili, verrà visualizzato un messaggio di conferma verde. In caso contrario, il test mostrerà i motivi per cui il tuo sito Web non ha superato il test e ti indirizza verso risorse che aiutano a risolvere i problemi.
Screenfly di QuirkTools ti mostrerà come apparirà il tuo sito su diverse dimensioni dello schermo. Questo strumento non ti aiuterà con l'aggiunta di suggerimenti e suggerimenti utili, tuttavia puoi vedere come appare il tuo sito web su smartphone, desktop e persino schermi TV di grandi dimensioni.
Infine, MobileTest.me ti consente di scegliere un particolare dispositivo mobile, inserire il tuo URL e interagire con il tuo sito come se ti trovassi sul dispositivo specificato. Questo strumento è particolarmente utile perché puoi vedere come funziona il tuo sito web su un dispositivo mobile, moduli di test e pulsanti e capire se i tuoi visitatori avranno una buona esperienza utente. Puoi usarlo da solo o in combinazione con i due strumenti di cui sopra per assicurarti che il tuo sito web sia veramente reattivo.
La creazione di un web design reattivo non è più opzionale. È una necessità. Il web design reattivo rende più facile per chiunque visualizzare il tuo sito senza problemi e può influire sulla reputazione del tuo brand e sui tassi di conversione. Con i suggerimenti e i trucchi del web design reattivo di cui sopra, sarai in grado di rendere il tuo sito web aziendale di grande effetto, indipendentemente dal dispositivo utilizzato dai tuoi visitatori e assicurarti anche loro un'esperienza utente ottimale.
Accentsconagua