Suggerimenti 6 per ottimizzare il design mobile del tuo blog

Il consumo di dati da parte del traffico mobile è aumentato del 74% in 2015, con oltre un miliardo di dispositivi venduti nello stesso periodo e la tendenza sta ancora cambiando. Questo da solo dovrebbe essere sufficiente per sottolineare l'importanza di ottimizzare i tuoi progetti per il traffico mobile.

Alcuni Temi WordPress sono meglio ottimizzati per gestire risoluzioni inferiori, ma ciò non significa compatibilità assoluta di cui ti fiderai completamente. In effetti, ci sono una serie di correzioni da implementare che ti permetteranno di ottimizzare al meglio il tuo sito web per i dispositivi mobili.

In questo tutorial, esploreremo diversi suggerimenti specifici per i dispositivi mobili, l'ottimizzazione delle immagini, la progettazione del layout e altro ancora.

Suggerimento 1: aggiungi icone iOS e schermate iniziali

Nonostante i numerosi progressi fatti da Android, i dispositivi iOS rimangono molto popolare e beneficiare del supporto di una comunità attiva di sviluppatori. Il punto è che molti dei tuoi visitatori probabilmente possiedono un dispositivo Apple e, se probabilmente vorranno goderti ancora di più il tuo sito web, salvando la tua icona nella loro schermata iniziale.

Per prepararti a questa eventualità, ti mostreremo come aggiungere icone iOS da blog WordPress.

Per prima cosa dovrai trovare il file header.php del tuo tema (o tema figlio), poiché dovremo aggiungere del codice nel tag .

Ecco il codice è necessario aggiungere:

Come puoi vedere, il codice menziona icone specifiche per iPhone, iPad e dispositivi Retina, che devono essere tutte precedute dall'attributo rel con il valore "call-touch-icon".

Già che ci sei, puoi anche progettare una nuovissima schermata iniziale iOS per il tuo sito Web con il codice seguente:

Nota: La schermata iniziale è quella che appare quando avvii un'applicazione. È come la schermata di caricamento di un'applicazione.

Suggerimento 2: utilizza diverse dimensioni di immagine in associazione a "media query"

Naturalmente conosci già la nozione di " media-query". Pensa alle regole di progettazione specifiche incorporate nel tuo CSS quando si presenta uno scenario specifico. Nel caso del design mobile, questi scenari sono le diverse risoluzioni, orientamenti del dispositivo e dimensioni del browser. Il problema con " media-query È che oggi molti designer e sviluppatori stanno realizzando siti Web con un approccio mobile secondario, ma dovrebbe essere il contrario.

Questo approccio mobile secondario può essere individuato media-query Quando vedi le dimensioni dei dispositivi più diffusi (ad es. 320 px, 480 px, 768 px) utilizzate come linee guida. Anche se in teoria questo può sembrare un buon approccio, poiché per essere efficace non si può pretendere di utilizzare le dimensioni di tutti i dispositivi che variano tutte le volte che vengono creati.

Quindi la prossima volta che lavorerai su un progetto, rendi la compatibilità mobile una priorità:

• Progetta la tua "Interrogazioni" quindi lavora su piccole risoluzioni.
• Evita di utilizzare i pixel per dichiarare i punti di interruzione. Invece, prova a lavorare con "Ems" e percentuali il più spesso possibile in modo che i tuoi progetti possano regolare lo zoom.
• Ricorda di pagare il tuo " media-query In modo che si adattino ai dispositivi Retina (risoluzione minima: 192 dpi).

Suggerimento # 3: ottimizza le tue immagini

Anche se hai un design fantastico e reattivo, i potenziali visitatori potrebbero scivolare via se si rendono conto che il caricamento del tuo sito web richiede molto tempo e le immagini giocano un ruolo importante in questo aspetto. Gli utenti vogliono vedere belle immagini, che però si caricano molto velocemente, da qui la necessità di ottimizzare le proprie immagini.

Anche se questo può sembrare un enigma, ci sono molti strumenti che possono aiutarti a ottenere questi risultati. In cima alla lista abbiamo EWWW Image Optimizer et WP Smush , che una volta installato, applicherà automaticamente tecniche di compressione senza perdita di qualità per ogni immagine caricata sul tuo sito WordPress e il tuo sito WordPress può persino passare attraverso la tua libreria multimediale per ottimizzare le immagini caricate in precedenza.

Se preferisci non aggiungere ancora un altro plug-in al tuo sito Web, esistono sempre strumenti autonomi come TinyJPG et TinyPNG, che svolgono essenzialmente lo stesso lavoro di EWWW Image Optimizer riducendo selettivamente il numero di colori nelle immagini, oltre a rimuovere i meta (rimuovendo i dati non necessari). Ciò si traduce in una dimensione del file notevolmente inferiore con molte modifiche quasi impercettibili, il che è un compromesso ideale.

Suggerimento # 4: pensa a utilizzare SVG

Scalable Vector Graphics (SVG) sono uno strumento ingegnoso che devi considerare. Nonostante ciò che il nome implicherebbe, usano una qualche forma di linguaggio di markup XML invece di un formato di immagine e sono particolarmente utili per grafici semplici come loghi, icone, infografiche e altre applicazioni.

« Perché SVG così utile?“, Puoi ragionevolmente chiederti. Bene, per cominciare sono espandibili, il che significa che non dovrai preoccuparti di adattarti a finestre diverse. Inoltre, possono anche essere facilmente animati utilizzando CSS.

Dovresti avere familiarità con strumenti come Adobe Illustrator, Inkscape e Sketch, che includono il supporto per questo formato, quindi provali!

5 Suggerimento: scegliere il bene font

Il design mobile non riguarda solo le immagini. La scelta dei caratteri da utilizzare può avere (se non di più) un impatto sui progetti tanto quanto la grafica, poiché la maggior parte dei siti utilizza il testo come metodo principale di trasmissione delle informazioni.

Dal punto di vista di un designer, questo significa scegliere i caratteri giusti, il che implica:

• Non utilizzare caratteri troppo sottili o complicati. Il tuo carattere dovrebbe essere facilmente visibile sui dispositivi mobili, se non desideri che gli utenti regolino lo zoom per leggere meglio.
• Evita i caratteri con troppo poco spazio tra le lettere per una migliore leggibilità.
• Se si utilizza il Media-query Per il tuo testo, usa ems per le dimensioni invece dei pixel.
• Prendi in considerazione l'utilizzo di caratteri sans serif, poiché tendono a funzionare meglio con la maggior parte delle risoluzioni.

Suggerimento 6: considera il testo come parte dell'interfaccia utente

Dato che siamo in tipografia, dovresti sapere che il carattere non è l'unica cosa da considerare e da solo non riguarda la leggibilità. Poiché lavoreremo con un'ampia varietà di finestre, vuoi che il tuo design consideri il testo come parte integrante dell'esperienza utente al fine di massimizzare la leggibilità, questo significa:

• L'impiego di " media-query "Per mantenere un limite gestibile di caratteri per riga (ricordati di usare ems invece di pixel!). L'importo generalmente accettato è impostato tra i caratteri 45-75.
• Ricorda di usare vw, vh e vhmin (questi sono tutti correlati alla percentuale di visualizzazione) Valori CSS3 per mantenere la dimensione del carattere relativa alla dimensione del visualizzatore o su finestre specifiche.

Riassunto

Abbiamo visto in questo articolo che il traffico mobile sta diventando sempre meno trascurabile, il che dovrebbe essere una priorità per ogni sviluppatore nella progettazione di siti web. Quindi hai alcuni suggerimenti che puoi applicare il tuo blog per accedere al tuo attuale sito web « mobile-friendly".