RWD non solo di design - WordPress può aiutare

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.

Cos'è il responsive web design?

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-widthlarghezza massima a

  • ridimensionare le intestazioni e il testo per essere più appropriato per i dispositivi
  • impilare gli elementi invece di galleggiare dove necessario
  • modificare la larghezza della griglia

Fai attenzione a un'intera serie pratica dedicata all'insegnamento su come costruire un web design reattivo utilizzando questo particolare framework

Perché è importante RWD?

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

Aumento dell'utilizzo dei dispositivi mobili

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.

Aumenta notevolmente il tasso di conversione 

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.

Migliore posizionamento nei motori di ricerca

Un motore di ricerca come Google difende apertamente il responsive web design per una serie di motivi:

  1. È molto più facile eseguire la scansione di un sito Web reattivo, indicizzarlo e organizzare il contenuto del sito in un modo più semplice. Ciò è reso possibile dal fatto che un sito Web reattivo utilizza un solo URL su tutte le piattaforme anziché in uno scenario in cui esistono diverse versioni dello stesso sito su URL diversi.
  2. L'esperienza utente può essere valutata facilmente osservando la frequenza di rimbalzo di un sito. Un sito che ha una bassa frequenza di rimbalzo significa che gli utenti restano su di esso per un periodo di tempo quindi un ranking di ricerca più elevato.

Costo effettivo

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.

Considerazioni per un sito WordPress reattivo

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

  1. Prestazione
  2. Contesto
  3. Miglioramenti progressivi

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.

Sommario

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!