Back to home page
Il Jester
My little dream is in developing

Rendere il nostro sito (WordPress) ottimizzato per i device

cssOrmai siti e blog sanno perfettamente che molti dei loro visitatori utilizzano device come iphone, smartphone o tablet per navigare sul web. E non sempre i template utilizzati e predisposti per i pc o per mac sono adatti per essere visualizzati in schermi molto piccoli. Quando si visualizza un template disegnato per schermi grandi, il rischio della illeggibilità è dietro l’angolo, e con la illeggibilità anche una possibile diminuzione delle visite degli utenti.

Per aggirare il problema, il web offre molte opportunità. Dalle applicazioni dedicate da scaricare sul proprio smartphone o iphone, ai plugins (mi riferisco in particolar modo a WordPress), che di fatto servono un template alternativo se l’utente/visitatore accede tramite un device.

È però possibile provvedere anche direttamente, sistemando il proprio template, affinché sia device-ready o, più precisamente, dotato di un responsive layout. Le possibilità sono fondamentalmente due (ma potrebbero essercene anche altre).

Utilizzo dei Media Query offerti dal CSS3. Non sono altro che delle dichiarazioni che permettono al webmaster di impostare delle regole CSS differenti a seconda dei dispositivi di destinazione. Sono molto facili da implementare.

Il primo metodo CSS è richiamare la regola nel tag head:

Il secondo metodo CSS consiste nello stabilire le regole direttamente sul foglio CSS, magari richiamato a parte rispetto al foglio principale.

Ecco l’output html:

Ed ecco le regole CSS:

Naturalmente potete utilizzare @media screen and (max-device-with: XXXpx) anche per abbracciare più regole CSS.

Una seconda possibilità, sconsigliata perché meno affidabile, ce la offre php, grazie a un piccolo snippet. Per quanto riguarda WordPress, potete inserire questa funzione in functions.php e poi richiamarla come un normale tag condizionale:

A questo punto possiamo anche predisporre un foglio CSS a parte per i nostri visitatori da device utilizzando la funzione:

Questo è tutto.