Come mettere insieme un dispositivo mobile, tema WordPress orientato alle prestazioni [Parte 2]

Se hai fatto scorrere verso il basso per vedere cosa c’è in negozio qui, potresti chiederti cosa è successo ai punti 1-5.


Ah, giusto, per trovare la risposta, dovresti dare un’occhiata alla prima parte di questa mini-serie.

In breve, quello che stiamo cercando qui è darti una guida come creare un tema mobile ad alte prestazioni per WordPress. All’inizio potrebbe non sembrare, ma la sfida è in realtà più grande di quanto la maggior parte della gente pensi.

Dopo tutto, la convinzione generale è che devi solo rendere il tema reattivo e, voilà, è ottimizzato per dispositivi mobili, giusto? Bene, non proprio. Quindi, senza ulteriori indugi, torniamo all’argomento.

Per la parte 1, vedi qui: Come mettere insieme un cellulare, Tema WordPress orientato alle prestazioni [Parte 1]

6. Design per tutti i browser mobili

È davvero sorprendente come diversamente un codice HTML possa comportarsi in base al browser web su cui viene eseguito. E questo vale sia per i computer portatili che per quelli desktop. Probabilmente di più per i dispositivi mobili, tuttavia, poiché abbiamo a disposizione centinaia di dispositivi e specifiche dello schermo diversi.

Pertanto, quando si lavora sul tema, assicurarsi di ricordare quanto segue:

  • testa il tuo lavoro su tutti i principali browser man mano che procedi: farlo presto renderà la risoluzione dei problemi molto più semplice, invece di iniziare i test del browser quando hai già fatto tutto il tema,
  • metti le mani su tutti i dispositivi che puoi e vedi come si comporta il tema su di essi (prova diverse dimensioni dello schermo, risoluzioni e rapporti se possibile).

7. La UX è importante

Sui dispositivi mobili, le persone interagiscono con i siti Web in modo molto diverso rispetto al desktop.

Sembra semplice, ma lascia che ti dia un semplice esempio. Quando qualcuno è alla ricerca di una pizzeria sul proprio desktop, è probabilmente interessato a una serie di dettagli sul ristorante che sta visitando. Ad esempio, cose come il menu, la galleria, i dettagli di contatto e così via.

Tuttavia, se visitano lo stesso sito Web su dispositivi mobili, probabilmente si preoccupano solo di una cosa: come raggiungere il luogo e quale numero chiamare per effettuare una prenotazione.

In sostanza, quando si sviluppa un tema per dispositivi mobili, il design dovrebbe consentire al proprietario del sito di concentrarsi ulteriormente su elementi specifici che possono essere cruciali per i visitatori mobili.

Il modo più semplice per farlo è tramite aree widget ben progettate che appaiono sulla homepage e rimangono nella parte superiore dell’area visibile dello schermo (ovvero tenendole sopra la piega).

Mentre sono su dispositivi mobili, le persone hanno pochissimo tempo per cercare le informazioni di cui hanno bisogno. Questo è il motivo per cui un buon design mobile dovrebbe essere efficace nel rendere accessibili queste informazioni.

8. Meno è di più

Meno è, più il concetto può essere facilmente applicato alla maggior parte degli scenari nello sviluppo del tema, e quando si tratta di temi mobili, significa la differenza tra un grande tema e un tema così.

Ecco cosa puoi fare per ottenere di più con meno:

  • Lascia meno spazio per gli elementi del marchio. Un po ‘di spazio per il logo del sito è importante, questo è ovvio. Tuttavia, non è ancora importante quanto il contenuto reale, quindi assicurati di non lasciare che il logo occupi la maggior parte dello spazio sopra la piega.
  • Introdurre menu accessibili. I menu sono sempre stati un problema sui dispositivi mobili. Da un lato, i siti Web necessitano di menu. Dall’altro, anche un breve menu (con solo quattro elementi o giù di lì) può facilmente utilizzare due righe di testo sulla maggior parte dei dispositivi mobili, il che spinge il contenuto più in basso nella pagina. Ecco cosa puoi fare per risolvere questo: (1) visualizza il menu normalmente se si adatta a una singola riga di testo, (2) rendilo un menu a discesa se non lo fa.
  • Sbarazzarsi di menu non importanti. Rischiare di dire che la maggior parte delle volte, il menu a piè di pagina non apporta alcun valore al visitatore mobile. Sul desktop, serve come una sorta di menu a tutto tondo in cui i visitatori possono trovare collegamenti a tutte le altre pagine, ma sui dispositivi mobili non c’è quasi motivo per cui qualcuno lo utilizzi. Prendi in considerazione l’idea di liberartene completamente quando il tuo tema viene visualizzato su dispositivi mobili.
  • Fai attenzione con le funzionalità extra del sito web. Ci sono innumerevoli possibilità quando si tratta di introdurre funzionalità personalizzate in un nuovo tema WordPress. Puoi implementare elementi come cursori di immagini, integrazione con i social media, gallerie personalizzate e molti altri. Ma dovresti? Sebbene queste idee di funzionalità siano tutte fantastiche, possono causare alcuni problemi agli utenti di dispositivi mobili. Se vuoi assicurarti che il tuo tema funzioni correttamente sulla maggior parte delle piattaforme, utilizza il nativo wp_is_mobile () funzione. Ti consentirà di distinguere tra visitatori mobili e desktop, in modo da poter semplificare l’interfaccia per i primi per evitare problemi.

9. Carica solo i file necessari

Al giorno d’oggi, le persone possono accedere al Web da una vasta gamma di dispositivi mobili, quindi inevitabilmente alcuni di questi dispositivi saranno molto obsoleti e non saranno in grado di supportare le moderne funzionalità web. Per questo motivo, dovresti sempre verificare quale libreria o modulo è necessario per eseguire una determinata funzionalità.

Uno dei modi migliori per farlo è attraverso una soluzione simile Modernizr. In breve, è una libreria JavaScript che rileva le funzioni HTML5 e CSS3 nel browser dell’utente. Ti consente di scrivere un codice condizionale in base al fatto che una determinata funzionalità sia inclusa nel browser per impostazione predefinita o meno. Quindi, se necessario, è possibile importare le librerie richieste.

Modernizr

Ma Modernizr non sarà la soluzione per tutto. Ecco alcune altre linee guida da tenere a mente:

  • Come regola generale, ricorda di non importare le librerie se non sono assolutamente essenziali per la funzionalità del tema. Più librerie e script esterni ci sono, più tempo ci vorrà per caricare il sito finale (soprattutto su dispositivi mobili).
  • Cerca sempre di caricare i file JavaScript alla fine della struttura HTML anziché all’inizio.
  • Prova a minimizzare il numero di elementi DOM la tua struttura HTML utilizza.
  • Carica file CSS e JavaScript per ogni pagina singolarmente. Ad esempio, se si dispone di un file CSS richiesto solo su una pagina specifica, utilizzare la funzione is_page () all’interno di un’istruzione condizionale e accodare lo stile solo su quella pagina.

10. Eseguire test di velocità su un server di prova

Avere un server di test locale sarà abbastanza buono nelle fasi iniziali dello sviluppo, ma sarà necessario introdurre rapidamente una configurazione di test più avanzata.

Il fatto è che non saprai mai con certezza quanto è ottimizzato il tuo tema fino a quando non lo installi in una manciata di ambienti di test e vedi come si comporta nella vita reale.

Pur mantenendo bassi i costi, puoi farlo installando il tuo tema su un paio di account di hosting condiviso a basso costo (dal momento che la maggior parte degli utenti finali probabilmente li utilizzerà comunque). Quindi, è possibile eseguire vari test utilizzando i seguenti strumenti:

  • Page Speed ​​Insights. Uno strumento creato da Google. Ti fornirà buoni dati sulle prestazioni di entrambi i dispositivi mobili e desktop, insieme ad alcuni suggerimenti su come migliorare le cose.
  • Test di velocità del sito Web Pingdom. Questo strumento ti fornirà un’analisi completa del tempo necessario per caricare ogni singolo script / file richiesto dal tuo sito.
  • Ghostlab. Strumento molto utile per testare i browser sincronizzati per web e mobile contemporaneamente.
  • Test delle prestazioni mobili di Mobitest. Ti consente di testare il tuo sito su dispositivi mobili reali e non solo su un ambiente mobile generale, emulato.
  • BrowserStack. Ti dà accesso immediato a tutte le versioni di tutti i browser desktop e mobili più diffusi. Con questo strumento, non devi chiederti come sarà il tuo tema su un browser obsoleto, puoi generare uno screenshot con solo un paio di clic.

Page Speed

Questo riassume la nostra guida in 10 passaggi per la creazione di un primo tema WordPress orientato alle prestazioni. Spero che tu possa trarne alcune fantastiche idee e che ti aiuterà a trasformare il tuo prossimo tema in un vero mostro delle prestazioni!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map