Rendere il nostro sito (WordPress) ottimizzato per i device

Ormai 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:

<!-- per una corretta visualizzazione su iphone --><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" ><!-- fine --><link herf="iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width:0px) and (max-width:320px)" ><link herf="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" ><link herf="screen.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" >

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:

<div class="wrapper pc-mac"> Box con dimensione del tuo browser superiore a 900px.<div><div class="wrapper mini"> Box con dimensione del tuo browser tra 600px e 900px.<div><div class="wrapper tablet"> Box con dimensione del tuo browser inferiore a 600px.<div><div class="wrapper smart-iphone"> Box con dimensione del tuo browser di 480px.<div>

Ed ecco le regole CSS:

@media screen and (min-width: 900px) { 
 .pc-mac { /* regole css qui */ }
}

@media screen and (min-width: 600px) and (max-width: 900px) {        
 .mini { /* regole css qui */ }
}

@media screen and (max-width: 600px) {        
 .tablet { /* regole css qui */ }
}

@media screen and (max-device-width: 480px) {        
 .smart-iphone { /* regole css qui */ }
}

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:

function check_wp_is_mobile() {
    
    // prima verifica che sia esistente la funzione nativa wp_is_mobile
    if ( function_exists( 'wp_is_mobile' ) )
        return wp_is_mobile();

    //code from wp_is_mobile function, wp_is_mobile() is located in wp-includes/vars.php version 3.4
    static $is_mobile;

    if ( isset($is_mobile) )
        return $is_mobile;

    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;

}

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

function wp_enqueue_assets() {
    // caricamento di altri fogli css e foglio css principale ...
    // caricamento del foglio di stile device.css
    if ( check_wp_is_mobile()) :
         wp_enqueue_script( 'my-device', INDIRIZZO_TUO_FOGLIO_DI_STILE_DEVICE );
    endif;
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_assets' );

Questo è tutto.