Come sviluppatori web, quasi tutti i clienti con cui lavoriamo si aspettano che il loro sito abbia una versione mobile del proprio sito web. E con il crescente numero di variazioni di dimensioni e risoluzioni dello schermo, sarà impossibile o almeno poco pratico trovare un sito Web per ogni dispositivo e risoluzione dello schermo esistente.
In questo post, inizieremo a un livello base definendo innanzitutto il design web reattivo, perché è importante e alcune brevi considerazioni da fare quando si crea un brainstorming di un sito Web WordPress reattivo.
Wikipedia definisce RWD come:
Approccio di Web design finalizzato alla creazione di siti per offrire un'esperienza visiva ottimale: facile lettura e navigazione con un minimo di ridimensionamento, panning e scorrimento su un'ampia gamma di dispositivi (dai telefoni cellulari ai monitor dei computer desktop).
Il responsive web design prevede l'applicazione di query multimediali CSS con un mix di griglie e layout flessibili. Sono sicuro che hai sentito parlare di framework CSS come Bootstrap, Foundation e così via. Tutti utilizzano le query multimediali con un mix di layout per rendere una pagina in base alle dimensioni dello schermo, alla piattaforma e all'orientamento.
Ad esempio, quando usi Bootstrap, puoi semplicemente abilitare il tuo progetto ad essere reattivo inserendo la seguente riga di codice su etichetta
In Bootstrap, le query multimediali consentono CSS personalizzati in base a un numero di condizioni: rapporti, larghezze, tipo di visualizzazione ma in genere si concentra su min-width
e larghezza massima
a
Fai attenzione a un'intera serie pratica dedicata all'insegnamento su come costruire un web design reattivo utilizzando questo particolare framework
Finora nella nostra discussione abbiamo identificato che una cosa significativa di un sito web reattivo è la capacità del sito di adattarsi a qualsiasi dimensione o orientamento dello schermo quando un utente sta visualizzando il sito web. Oltre a ciò, vi sono altri importanti motivi per cui dovresti passare a un sito web reattivo
Oggi un numero significativo di persone ha accesso ai telefoni cellulari. Questo si traduce in un certo numero di questa gente che accede a Internet tramite i telefoni. Le statistiche mostrano che oggi quasi il 20% delle ricerche di Google proviene da telefoni cellulari: questo dovrebbe dirvi quanto sia importante per gli utenti poter accedere al tuo sito web e interagire facilmente con esso.
Poiché l'utilizzo di Internet mobile supera le statistiche sull'utilizzo del desktop, dobbiamo assicurarci che gli utenti siano in grado di identificarsi con i nostri siti Web indipendentemente dai dispositivi che utilizzano senza sentire che stanno accedendo a una versione diversa o limitata del sito principale.
Il tasso di conversione è un termine che viene utilizzato principalmente nei siti di e-commerce, si riferisce a dove si arriva a trasformare un normale visitatore Web in cliente pagante. In un tipico caso di una soluzione di e-commerce, pensa a quante persone stanno facendo shopping sui loro telefoni cellulari.
Se un utente Web regolare sarà costretto a utilizzare una versione desktop del tuo sito per effettuare un checkout semplice, è molto probabile che scelga sicuramente di utilizzare altri mezzi per acquistare lo stesso prodotto. Con un sito reattivo ben progettato, gli utenti non dovrebbero notare la differenza quando effettuano transazioni sul tuo sito a parte il fatto che stanno utilizzando uno schermo più piccolo.
Un motore di ricerca come Google difende apertamente il responsive web design per una serie di motivi:
Eseguire più siti per lo stesso contenuto può essere costoso, è necessario raddoppiare le risorse per poter mantenere i due siti. Avere un sito Web reattivo è molto più semplice in quanto potrai dedicare tutte le risorse e il tempo necessario per dare agli utenti ciò che realmente si aspettano.
Ci sono un certo numero di considerazioni che è necessario fare prima di creare un web design reattivo in WordPress. Il fatto è che WordPress viene ora utilizzato per creare blog, siti, persino applicazioni che probabilmente avranno bisogno di un'implementazione reattiva.
Nel prossimo post, daremo un'occhiata a una strategia di implementazione su come ottenere questo risultato nello sviluppo di WordPress. In particolare, copriremo
La ricerca di questi tre fattori critici richiede un'analisi approfondita al fine di mostrare perché il design reattivo non riguarda solo il design e dove esattamente WordPress entra nell'equazione.
In questo articolo, abbiamo brevemente introdotto il concetto di responsive web design, definito di cosa si tratta, perché è importante e perché dovremmo considerarlo nei nostri progetti futuri.
Sentiti libero di lasciare qualsiasi domanda o commento qui sotto!