Come rendere mobile qualsiasi sito WordPress reattivo prima di tutto

Questa volta ti spiegheremo come rendere mobile qualsiasi sito WordPress reattivo prima e perché devi farlo.

Con la massiccia crescita dei dispositivi mobili e di altri dispositivi portatili, nonché dei giochi, delle app, delle piattaforme di social media, ecc., il responsive web design è diventato qualcosa di necessario e non di lusso per far risaltare il tuo sito tra gli altri.

Sono finiti i giorni in cui il design reattivo o mobile friendly era percepito come una qualità premium rilevante per siti Web costosi e ben sviluppati.

Oggi, il repository di template di WordPress è ricco di tali temi: sia gratuiti che premium. Tutti i modelli creati da noi di SKT Themes condividono anche quelle qualità che consentono a qualsiasi lato basato su di esso di essere visualizzato accuratamente su diversi cellulari e piattaforme.

Quindi, se il design responsive o mobile friendly è ampiamente utilizzato e sembra funzionare senza intoppi, che senso ha provare a rendere mobile qualsiasi sito WordPress reattivo e quali sono i vantaggi?

Per chiarirti tutte le cose, discutiamo alcuni punti uno dopo l'altro in modo da poter vedere le differenze tra questi due approcci di progettazione.

Che cos'è il design web reattivo?

In poche parole, il responsive web design è una tecnica moderna per creare un sito web adatto a funzionare ugualmente bene su ogni dispositivo e adattarsi a qualsiasi risoluzione dello schermo. Significa che non sei obbligato a creare una versione mobile separata del tuo sito per soddisfare le esigenze dei tuoi utenti mobili in movimento o in movimento. Il design reattivo del tuo sito si adatterà automaticamente e si adatterà a qualsiasi dispositivo mobile o dispositivo per l'aspetto perfetto del tuo sito.
Con milioni di persone in tutto il mondo che utilizzano Internet mobile e ci trascorrono ore, avere un sito Web reattivo e compatibile con dispositivi mobili è un must.

Cos'è il mobile first design?

Fondamentalmente, il mobile first è un approccio utilizzato nel web design moderno e implica la progettazione per gli schermi mobili prima di tutto, per poi passare allo sviluppo di altri schermi, browser e risoluzioni.

Affinché tu possa comprendere la differenza tra gli approcci di progettazione responsive e mobile first, affermiamo che il responsive design inizia con tutti i tipi di complessità necessari per prestazioni desktop impeccabili e le rompe in seguito per dispositivi mobili e dispositivi più piccoli.

Per quanto riguarda il design mobile first, suggerisce che il design reattivo per cellulari e dispositivi più piccoli dovrebbe essere fatto prima.

Perché devi prima rendere mobile qualsiasi sito WordPress reattivo?

Ti chiedi perché devi iniziare il progetto con considerazioni sui dispositivi mobili o rendere prima mobile qualsiasi sito WordPress reattivo? Diamo un'occhiata alle statistiche per il consumo mobile.

Se non indovini molto, cerca in Internet le percentuali esatte e i rapporti che dimostrano l'imbattibile prevalenza degli utenti Internet mobili rispetto a quelli desktop.

Attualmente, le persone trascorrono sempre più tempo a navigare in Internet per le informazioni richieste da dispositivi mobili e terminali. E, naturalmente, questo passaggio dall'utilizzo desktop a quello mobile continuerà nel prossimo futuro.

Quindi, non vuoi deludere la maggior parte degli ospiti del tuo sito web e far sentire la minoranza degli utenti desktop a proprio agio nel tuo sito, giusto?

In aggiunta a ciò, una volta adottata la pratica dell'approccio mobile first, vedrai che ti sporcherai le mani nel programmare meno e sarai in grado di progettare web design più accurati e compatti che saranno più facili da espandere insieme.

Garantire la perfetta corrispondenza dei pixel con schermi più piccoli prima e poi prendersi cura di quelli desktop può essere un modo definitivo per aumentare le prestazioni mobili del tuo sito e un migliore ambiente utente per i tuoi clienti mobili.

Come faccio a rendere mobile prima qualsiasi sito WordPress reattivo?

Se il tuo sito è già responsive e vuoi prima convertirlo in mobile, ci sono 2 passaggi fondamentali da seguire. Prima di tutto, devi scrivere e creare uno stile predefinito per i piccoli schermi.

Quindi, devi aggiungere una query multimediale mentre usi la larghezza minima e copiare lo stile predefinito del tuo modello reattivo su quello.

In base al layout del tuo sito, lo stile del layout può essere qualcosa di simile:

intestazione,
.principale,
piè di pagina {
  larghezza: 96%;
  larghezza massima: 1000px;
  margine: 10px automatico;
  chiaro: entrambi;
}
.contenuto {
  larghezza: 60%;
  margine-destra: 5%;
  galleggiante: sinistra;
}
.barra laterale {
  larghezza: 35%;
  galleggiante: a destra;
}

E poiché il tuo sito è reattivo, questo stile dovrebbe includere anche le query multimediali per schermi più piccoli:

@schermo multimediale e (larghezza massima: 500px) {

  intestazione,
  .principale,
  piè di pagina,
  .contenuto,
  .barra laterale {
    larghezza: 98%;
  }
  
  .contenuto,
  .barra laterale {
    galleggiante: nessuno;
    margine: 0 automatico;
  }

}

Come vedi, ci sono due blocchi: uno per desktop e uno per dispositivi mobili.
Per sostituirlo prima con mobile, elimina entrambi e inizia con un layout definito per schermi piccoli:

intestazione,
.principale,
piè di pagina {
  margine: 10px 1%;
}

Ora è il momento di creare la query multimediale utilizzando min-width.

@schermo multimediale e (larghezza minima: 500px) {

  intestazione,
  .principale,
  piè di pagina {
    larghezza: 96%;
    larghezza massima: 1000px;
    margine: 10px automatico;
    chiaro: entrambi;
  }
 
  .contenuto {
    larghezza: 60%;
    margine-destra: 5%;
    galleggiante: sinistra;
  }
  .barra laterale {
    larghezza: 35%;
    galleggiante: a destra;
  }
  
}

Come puoi vedere, è fondamentalmente lo stesso stile che avevi nel foglio di stile reattivo del tuo sito. Tuttavia, questa riscrittura e riorganizzazione dello stile ha a che fare con prestazioni mobili migliori poiché i dispositivi più piccoli ora lo trascureranno invece di esaminarlo e quindi passarci sopra con gli elementi che sono stati aggiunti alla query multimediale reattiva.

Teoricamente, abbiamo finito con il passaggio al design mobile first. In casi specifici, potrebbero essere necessarie ulteriori regolazioni e configurazioni per mantenere le cose senza intoppi.

Tuttavia, l'intero processo per rendere mobile il tuo sito WordPress non sarà una strada impraticabile per te, anche se non sei un web designer o uno sviluppatore esperto.