La soluzione vincente per un sito compatibile con i dispositivi mobili è avere una singola struttura HTML per qualunque visitatore, e scegliere semplicemente quale foglio di stile far caricare al browser per visualizzare la pagina nel modo migliore; non sto quindi parlando di usare una sottocartella /mobile/ nella struttura del sito, né di parametri nella stringa query come ?mobile, ma mi riferisco all’utilizzare lo stesso medesimo URL per tutti, che visualizzerà ricami e fiocchetti ai browser da desktop, mentre caricherà la versione compatta e rapida per i browser degli smartphone.

Come si fa?

Prima di tutto, scrivete due differenti fogli di stile per i browser desktop e mobili, o piuttosto, come faccio io, preparate un set di CSS, dove c’è un file “common.css” che viene sempre caricato, e poi dei file “desktop.csss” e “mobile.css” che sono caricati quando opportuno. Inoltre, scaricate e installate minify per comprimere i fogli di stile e definire un gruppo “desk” e uno “mobi” da caricare con un semplice URL (la procedura che uso in un altro sito).

Quindi aggiungete nel vostro file .htaccess, abbastanza presto dopo le righe che avviano il RewriteEngine:

RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240x320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_user_agent} !^(w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-).* [NC]
RewriteRule ^stylesheets\.css$ /min/index.php?g=cssdesk [L]
RewriteRule ^stylesheets\.css$ /min/index.php?g=cssmobi [L]

Prima cosa, queste righe non considerano l’iPad un dispositivo mobile, perché secondo me ha abbastanza spazio su schermo per visualizzare la normale versione desktop; se la pensate diversamente, basta aggiungere la stringa “ipad” in mezzo alle varie definizioni.

Ed ora qualche spiegazione: prima di tutto i riconoscimenti per le direttive RewriteCond vanno agli sviluppatori di WP Supercache, che è un modello che sto usando per scrivere il mio sistema di caching privato (il prossimo articolo infatti parlerà proprio di questo).

Quelle righe RewriteCond fanno eseguire la direttiva RewriteRule subito successiva solo se il visitatore usa un pc (perché escludono tutti gli user agent associati a dispositivi mobili), per cui la prima RewriteRule che leggete redirige a /min/index.php?g=cssdesk cioè il gruppo dei CSS compresso per i desktop (cambiate questo URL in base alle vostre necessità). La [L] alla fine della riga dice a .htaccess di ignorare qualunque cosa venga dopo. Quando le condizioni delle RewriteCond non sono verificate, e cioè se il browser è un dispositivo mobile, la prima regola RewriteRule è ignorata, e viene usata la successiva, che invece redirige ai fogli di stile mobile.

Come vedete, reindirizzo le richieste che arrivano al file “stylesheets.css”. Sorpresa delle sorprese, questo file non esiste da nessuna parte sul sito, ed è semplicemente un riferimento posto all’interno del template HTML, mentre è .htaccess che si occupa di intercettare queste richieste e fornire i dati corretti. In questo caso, nel vostro codice HTML dovrete richiamare i fogli di stile in questo modo:

<link rel="stylesheet" href="/stylesheets.css" type="text/css" media="screen" />

I vantaggi? Il sistema è più veloce. Una operazione simile fatta da PHP (esiste un codice apposito anche via PHP) vi costerebbe sicuramente l’esecuzione di codice più lento (l’interpretazione delle direttive .htaccess è più rapida della compilazione del PHP) ed eventualmente l’inclusione di un file PHP esterno che a sua volta brucia del tempo. Inoltre questo approccio è indispensabile se volete implementare un sistema di caching che salta del tutto il PHP, perché in quel caso appunto non potreste avvalervi di codice PHP per indirizzare le richieste ai fogli di stile.