Come mettere insieme un cellulare, tema WordPress orientato alle prestazioni [Parte 1]

Come mettere insieme un cellulare, tema WordPress orientato alle prestazioni [Parte 1]

Come mettere insieme un cellulare, tema WordPress orientato alle prestazioni [Parte 1]
СОДЕРЖАНИЕ
02 июня 2020

Nel suo nucleo, mettere insieme un tema WordPress è un compito piuttosto semplice. WordPress offre un ambiente davvero amichevole e chiarisce quali funzioni PHP utilizzare per quale scopo lungo il percorso.


Però. Anche se è semplice, è tutt’altro che facile, e soprattutto se desideri che il tuo tema sia ottimizzato per dispositivi mobili.

C’è una serie di problemi unici che dovresti superare se vuoi finire con un prodotto di qualità che si carica velocemente, funziona in modo prevedibile e (qual è la cosa più importante) è facile da usare e accessibile a persone che usano dispositivi diversi e dimensioni dello schermo.

Questa guida in due parti ti guiderà attraverso il processo in 10 passaggi, elencando le cose più importanti di cui occuparsi quando si costruisce per prima cosa un tema WordPress orientato alle prestazioni.

Per la parte 2, vedi qui: Come mettere insieme un dispositivo mobile, Tema WordPress orientato alle prestazioni [Parte 2]

1. Il contenuto viene prima di tutto

Non c’è davvero molto spazio sul cellulare per mostrare molti dettagli di design o per utilizzare elementi di bell’aspetto solo per il gusto di farlo.

Anche se i dispositivi moderni sono in grado di visualizzare grafica fino a 1136 × 640 pixel (iPhone 5s), non dimentichiamo che lo schermo è ancora solo di quattro pollici. Questo non è un sacco di immobili con cui lavorare.

Cose che vale la pena fare:

  • sbarazzarsi di tutti gli elementi di design extra che non sono essenziali per la presentazione dei contenuti,
  • assicurati che il blocco di contenuti principale sia il più in alto possibile nell’area di disegno (a causa delle diverse dimensioni dello schermo dei dispositivi mobili non possiamo prevedere dove "piegare" arriverà esattamente),
  • concentrarsi sulla tipografia e rendere il contenuto leggibile (aumentare la dimensione del carattere, ma fare attenzione a non rendere una singola riga di testo troppo corta e quindi illeggibile),
  • introdurre un buon contrasto: testo e sfondo (questo è fondamentale per i dispositivi mobili, specialmente se qualcuno tenta di leggere la pagina mentre si trova in una zona soleggiata).

2. Ottimizza le immagini

L’ottimizzazione delle immagini è ancora più importante per i dispositivi mobili che per qualsiasi altro scenario. Il fatto è che quando qualcuno tenta di accedere a un sito tramite dispositivo mobile, è probabilmente su una connessione 3G lenta. Pertanto, è necessario assicurarsi che il tema renda possibile il caricamento relativamente rapido delle immagini indipendentemente da questo fatto.

Cose specifiche che puoi fare:

  • Prendi in considerazione l’integrazione della funzionalità di caricamento lento. Di per sé, il caricamento lento è eccezionale (caricamento delle immagini solo quando il visitatore scorre verso di loro). Ma il problema è che gli utenti finali potrebbero finire con l’installazione di alcuni plugin di caricamento lento sul sito finale stesso. Ciò potrebbe interferire con qualsiasi cosa tu abbia già integrato nel tema. Se vuoi correre il rischio, tuttavia, sarebbe meglio rendere possibile la funzionalità attraverso una soluzione come jQuery e suoi Plug-in Lazy Load. Anche i plug-in di WordPress usano questa libreria, quindi stai minimizzando la probabilità che qualcosa vada storto quando ci sono due diversi script che cercano entrambi di ottenere lo stesso risultato. Inoltre, rendi possibile disattivare il caricamento lento nelle impostazioni del tuo tema.
  • Ottimizza le immagini per dimensioni e qualità. Le immagini di solito rappresentano la maggior parte del consumo di larghezza di banda per il sito medio, quindi come creatore del tema, è necessario assicurarsi che le immagini siano ottimizzate il più possibile. Puoi fare due cose per far sì che ciò accada: (1) assicurati che le immagini non abbiano dimensioni maggiori di quelle che devono essere (vedi # 3) – un pixel in più qua e là può sommarsi abbastanza rapidamente, (2) ottimizza tutte le immagini tramite uno strumento simile Optimole o TinyPNG prima di rilasciare il tema al pubblico.
  • Usa i caratteri icona quando possibile. La vecchia scuola di includere le icone in qualsiasi progetto era semplicemente costruirle in Photoshop, convertire tutto in PNG o GIF e distribuirlo. Oggi, tuttavia, non è la soluzione più ottimizzata. Con strumenti come Carattere fantastico, possiamo arricchire i nostri progetti con centinaia di caratteri dal design accattivante, mantenendo allo stesso tempo prestazioni decenti.

3. Rendi pronto il design Retina (ottimizzato per schermi ad alto DPI)

Al giorno d’oggi quasi tutti i nuovi dispositivi sono dotati di display a DPI elevato. Questi schermi rendono tutto molto nitido, ma solo se la cosa in questione è stata ottimizzata per la visualizzazione ad alto DPI. Altrimenti, l’utente vedrà molta pixelazione e questo renderà l’esperienza nel complesso poco attraente.

Esistono due scorciatoie principali che puoi prendere per l’ottimizzazione dei DPI elevati:

  • Usa caratteri immagine – menzionati sopra; i caratteri delle immagini si ridimensionano automaticamente e sembrano grandi su ogni dispositivo.
  • Crea versioni alternative di tutte le altre immagini, a dimensioni due volte superiori, e scambiale con CSS ogni volta che si utilizza un dispositivo DPI elevato per visualizzare il contenuto. Ecco una guida su come puoi farlo.

Infine, dovresti anche occuparti delle favicon nel tuo tema (e probabilmente consentire anche all’utente di cambiarle, ma questa è un’altra cosa).

In passato, avevi solo bisogno di un’immagine 16 × 16 PNG, che poi avresti convertito in ICO, e tutto era pronto. In questo momento è molto più complicato. Ad esempio, i nuovi dispositivi Apple proveranno a cercare icone più grandi e quindi tenteranno di usarli come segnalibri.

Alcune delle dimensioni di favicon che iOS prevede di trovare sono: 76 × 76, 120 × 120, 152 × 152. Ecco un elenco completo su Apple.com.

Puoi creare quelle icone a mano o usare uno strumento simile Generatore di favicon reale. Ha solo bisogno di un’immagine di avvio, che verrà utilizzata come base per generare tutte le altre versioni. Inoltre, ottieni anche il codice HTML corretto per incorporare le icone nel tema.

4. Ottimizza per toccare

Dobbiamo ricordare che la maggior parte dei dispositivi mobili là fuori supportano interfacce touch o sono interamente basati su touch-screen. Ciò significa che dobbiamo rendere ogni elemento toccabile abbastanza grande in modo che l’utente possa accedervi facilmente.

Ad esempio, i link di testo non sono molto ottimizzati per il tocco perché richiedono molta concentrazione da parte dell’utente per toccarli accuratamente. È una scelta di design migliore da utilizzare con i pulsanti per l’interfaccia del tema. Pulsanti che sono relativamente grandi e hanno anche una vasta area touch.

Un’altra cosa da tenere a mente è che gli utenti eseguono la maggior parte dei loro tocchi con i pollici, quindi è una buona idea posizionare il principale "chiamare all’azione" pulsanti sulle zone del pollice facilmente accessibili. Ad esempio, ecco come si svolge su iPhone.

5. Rendere il tema reattivo non è tutto ciò che conta

Concludiamo la prima parte di questa guida con l’errore più comune che le persone commettono durante la progettazione di temi per dispositivi mobili. L’errore sta trattando i design reattivi come l’ultimo gioco finale.

Certo, rendere il tuo tema reattivo è un enorme vantaggio, soprattutto quando si tratta di gestire dispositivi e dimensioni dello schermo non standard, ma è tutt’altro che una soluzione a proiettile magico. Solo perché un design è reattivo non significa che funzionerà bene sui dispositivi mobili. Ad esempio, non risolverà alcun problema di ottimizzazione dell’immagine o il fatto che i pulsanti siano difficili da toccare con precisione, e così via.

Quindi sì, fai tutto il possibile per rendere il tuo tema reattivo, ma allo stesso tempo, prenditi cura degli altri elementi che stiamo attraversando in questa guida per il massimo design ottimizzato per i dispositivi mobili.

Ti invito a sintonizzarti per la seconda parte per ottenere il resto dell’elenco (entreremo in cose come la progettazione di UX, la navigazione, l’utilizzo di JS per ottimizzare i tempi di caricamento, sfruttando alcune delle funzioni meno conosciute di WordPress, e altro). E intanto, qual è la tua più grande sfida nella progettazione per dispositivi mobili?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector