Vediamo come mostrare del contenuto diverso in funzione del device utilizzato dagli utenti per visualizzare il nostro sito web.

Come abbiamo compreso nel precedente articolo dedicato all'usabilità sui device mobile, come smartphone e tablet, in alcuni casi è opportuno nascondere o far visualizzare del contenuto diverso a seconda del dispositivo utilizzato.
Grazie a poche righe di codice è possibile adattare il layout del nostro sito web in funzione delle dimensioni del monitor con cui l'utenza visualizzerà i nostri contenuti, modificare i codici di tracciamento delle campagne sponsorizzante, mostrando un tracking code personalizzato in funzione che la visita arrivi da smartphone o computer desktop, mostrare contenuto decisamente diverso in funzione del device utilizzato o, per evitare di venire penalizzati in caso di interstitial banner sul nostro sito, limitare la loro visualizzazione solamente ai dispositivi desktopt/tablet.

È possibile mostrare contenuto diverso in base al device utilizzato dai visitatori di un sito web Share on X

ll funzionamento delle tecniche descritte a seguire

Le tecniche che andremo a vedere (tranne le media query CSS) lavorano lato server, per cui il processo per cui viene mostrato un determinato contenuto è il seguente:

1. L'utente richiede una pagina web, inviando il proprio user-agent con cui visualizza la pagina;
2. il server interpreta la richiesta e mostra un contenuto piuttosto che un altro a seconda delle regole da noi selezionate sulla base dei diversi user-agent;

Entrambi i metodi che andrò a descrivere funzionano con il linguaggio PHP e per questo richiedono che sia installato l'omonimo motore di interpretazione di questo linguaggio di programmazione sul server in cui è stato posizionato il nostro script. Il secondo metodo, che utilizza una funzione particolare di Wordpress richiede l'utilizzo di questo CMS.

La classe Mobile Detect

Per siti realizzati mediante codice proprietario o per estendere le funzionalità di un CMS OpenSource un utile classe scritta in PHP, dedicato all'ottimizzazione di un sito per smartphone/tablet, è Mobile Detect.

Questo script riesce nel dettaglio ad interpretare, in funzione di una combinazione dell'analisi dello user-agent e degli headers HTTP, quale device viene utilizzato dall'utenza per visualizzare la pagina web richiesta e che browser si sta utilizzando per renderizzare il codice HTML.

Cos'è una funzione PHP

Le funzioni nel linguaggio di programmazione PHP sono degli script utilizzabili più volte all'interno del codice, ogni volta che vengono richiamate. Alle funzioni si possono passare degli argomenti e possono restituire dei valori (stringhe, array, etc).

Cos'è una classe PHP

Anche le classi nel PHP si possono riutilizzare più volte e possono contenere al loro interno una o più funzioni.

Ogni classe può contenere:

• diversi attributi (proprietà), ossia variabili, che possono essere private (che nascono e muoiono solamente all'interno della classe) o globali;
• diversi metodi o funzioni membro;

Le classi sfruttano il concetto dell'ereditarietà, ossia possiamo definire una classe figlio, che eredita le proprietà/metodi della classe padre e nel caso ne aggiunge di nuovi.

Per ottimizzare le risorse allocate da ogni classe possiamo definire un costruttore e un distruttore, che rispettivamente allocano risorse o le liberano.

Cos'è un oggetto in PHP

Un oggetto in PHP è una istanza di una particolare classe. Una volta creato un oggetto potremo utilizzare tutte le classi associate come metodi dell'oggetto stesso.

Come funziona la classe Mobile detect

Questa classe analizza lo user-agent e l'headers HTTP e, grazie a diversi metodi, effettua delle comparazioni e restituisce (in funzione del metodo richiesto):

• il tipo specifico di device utilizzato dall'utenza;
• se il device è di un certo classe (ad esempio se è uno smartphone, un tablet o un desktop) - con variabile booleana;
• di quale piattaforma/sistema operativo è il device (ad es. Android o iOS) - con variabile booleana;

Configurare Mobile Detect sul nostro sito web

Per utilizzare questa classe su un nostro sito web, su server Apache con motore PHP, è sufficiente scaricare il file compresso dal sito ufficiale e, dopo averlo estratto, inserire il file Mobile_Detect.php dentro alla root del nostro sito.

É poi necessario richiamarlo all'interno del codice, prima di poterlo utilizzare, con la funzione require_once 'Mobile_Detect.php';. Attenzione che a differenza della dichiarazione require 'Mobile_Detect.php'; nel caso di errore nell'inclusione del file non viene segnalato. Per cui se siete alle prime armi e volete provare i percorsi per capire se il file viene incluso utilizzate questo ultimo costrutto di linguaggio.

Come ogni classe dobbiamo poi istanziarla, realizzando così l'oggetto che ci accompagnerà nella realizzazione del nostro codice:
$_device = new new Mobile_Detect;

Ora siamo pronti ad utilizzare questo oggetto e le relative classi.

Ad esempio possiamo:

Fare qualcosa se l'utente arriva da un device mobile (smartphone e tablet):
if ( $_device->isMobile() ) {
echo "fai qualcosa";
}

Escludere i tablet e fare robe solo per gli smartphone
if( $_device->isMobile() && !$detect->isTablet() ){
echo "fai robe";
}

Escludere gli smartphone e fare altro solo per i tablet
if( $_device->isMobile() && !$detect->isTablet() ){
echo "fai altro";
}

Far scaricare l'app per Android agli Androidiani
if( $_device->isAndroidOS() ){
echo '<a href="urlAppAndroid">Scarica la nostra APP</a>'
}

Quella per iPhone a chi mangia la mela
if( $_device->isiOS() ){
echo '<a href="urlAppiOS">Scarica la nostra APP</a>'
}

Le funzioni in beta di Mobile Detect

Vi sono poi delle funzioni in beta, che potrebbero smettere di funzionare a causa del controllo su proprietà specifiche che variano nel tempo. Per cui se scegliete di utilizzarle fate attenzione a monitorare i vostri script!

Controlliamo di che tipo è il browser utilizzato dal nostro utente

if( $_device->isEdge() ){
echo 'Ue bob, ma stai usando uno Windows Phone?'
}

Quale versione di device hanno?
if( $_device->isAndroidOS() ){
echo 'Lo so che hai Android alla versione '.$detect->version('Android');
}

Alcuni possibili utilizzi di Mobile Detect

Come avrete capito possiamo utilizzare questa classe in una infinità di situazioni, di mio mi son ritrovato ad usarla per:

• mostrare banner che puntano ad una pagina web quando arrivano da desktop/tablet e che per chi arriva da smarphone puntano a far telefonare automaticamente ad un numero;
• prima che Criteo si potesse configurare da Google Tag Manager impostare il corretto tag in funzione del device utilizzato dall'utenza;
• per delle landing statiche far visualizzare un markup HTML diverso in funzione del device;
• non far comparire video in autoplay quando l'utenza è da mobile (e consumargli banda);
• spegnere banner intrusivi solamente nella versione mobile (attenzione se sono banner/popup generati da un servizio di advertising fate attenzione a comprendere prima se limitarne la visibilità non pregiudica l'inclusione nel servizio);
• altre robe... ma avete capito le potenzialità!

Riferimenti

• Il sito web di riferimento, da cui scaricare il sorgente è mobiledetect.net;
• Una demo la si può trovare all'indirizzo demo.mobiledetect.net;
• La community di sviluppo ha una sezione dedicata su github;

Mobile Detect su Wordpress

Vi sono due modalità per implementare questa classe su Wordpress:

• istanziando "a manina" l'oggetto, richiamandone le singole classi solo nelle pagine in cui effettivamente ci serve, in questo caso viene più complicato lavorare all'interno del contenuto di articoli e pagine;
• utilizzando il plugin dedicato che istanzia per noi la classe e ce ne permette l'uso mediante shortcode;

Analisi del device sui siti Wordpress

Nativamente su ogni sito Wordpress a partire dalla versione 3.4 è stata introdotta una funzione del codex per identificare se il device utilizzato dall'utenza è di tipo mobile.

Questa funzione non identifica il tipo di device nel dettaglio e raggruppa tutti i dispositivi mobili, come smartphone e tablet, in funzione del loro user-agent.

Per cui richiamando la funzione wp_is_mobile() potremo eseguire o meno uno script o del codice HTML/Javascript/CSS nei file che compongono il nostro tema grafico.

Il link di riferimento per comprendere nel dettaglio l'uso di questa funzione è nel codex di Wordpress.

Media Query CSS3

A differenza dei metodi mostrati precedentemente, che intervengono sul codice inviato dal server al client, se dobbiamo solamente ridefinire l'aspetto di alcuni tag HTML, direttamente sul browser utilizzato dall'utenza in funzione delle dimensioni del monitor con cui viene visualizzato il contenuto possiamo utilizzare le Media Query offerte dal CSS3.

Le media query, dato che sono state introdotte nel CSS3, possono funzionare solo con i browser che li supportano. Il funzionamento è semplice: le media query mostrano un blocco di proprietà CSS solamente se una determinata condizione è vera.

Per fare un esempio veloce, il seguente codice:
body{color: #000;}

@media only screen and (max-width: 320px) {
body {
color: #FFF;
}
}

Quando la finestra del browser è di dimensioni massime (nella larghezza) di 320 px farà visualizzare il testo di colore bianco (#FFF), altrimenti lo farà visualizzare nero (#000);

Per comprendere nel dettaglio le possibilità delle media query, nella realizzazione di un layout responsive di un sito web vi rimando agli ottimi tutorial/esempi della w3cschools:

• l'uso delle media query;
• le media rule e le loro potenzialità;