Come possiamo, quindi, fare in modo che una pagina web scritta in un HTML ricco come quello disponibile per i browser PC possa adattarsi elegantemente ai dispositivi mobili?
Innanzitutto dobbiamo considerare come la presenza di codice non appartenente alle specifiche XHTML MP non creerà necessariamente la mancata visualizzazione di tutta la pagina: se un browser per piattaforme mobili non è in grado di rappresentare un dato tag, semplicemente non lo rappresenterà e proseguirà a visualizzare il resto del documento.
Possono però verificarsi alcuni problemi. Il primo fra questi è l'eccessiva pesantezza delle pagine. La presenza di numerosi tag di presentazione o comunque non aderenti alle specifiche di XHTML MP può accrescere eccessivamente le dimensioni dei file a causa di elementi e attributi - di fatto - inutili.
Le criticità che si potrebbero verificare sono relative alla trasmissione dei dati (maggior tempo di scaricamento) e alle capacità di gestione di questi da parte dei dispositivi. Non tutti i dispositivi, infatti, sono in grado di visualizzare pagine di dimensioni elevate, di conseguenza il download potrebbe interrompersi non appena viene raggiunta una determinata soglia. Ad esempio alcuni cellulari di classe I-mode sono pre-impostati per evitare il download di pagine più grandi di 10 KB (a volte all'insaputa degli utenti stessi). Chiaramente non si tratta solo di problematiche tecniche ma si tratta di aspetti che vanno a toccare il cuore dell'esperienza-utente.
Il primo passo per consentire la visualizzazione di un sito web su dispositivi mobili dovrebbe quindi essere quello di ottenere un mark-up leggero rendendo le pagine conformi alle specifiche di XHTML. Sostanzialmente questa operazione consiste nell'utilizzare solo comandi presenti nel linguaggio standard ed eliminare tag e attributi che forniscono al browser delle istruzioni non sul significato dell'informazione ma su come visualizzarlo (per esempio font ). Se è il caso, potrebbe essere anche l'occasione per passare ad un layout gestito totalmente mediante foglio di stile, eliminando quindi anche le tabelle utilizzate per il controllo dell'impaginazione. Per le caratteristiche e i vantaggi di XHTML, rimandiamo alla guida pubblicata su questo sito ( https://www.html.it/xhtml/ ), mentre per agire concretamente questi sono i passi principali da effettuare per convertire un documento da HTML a XHTML:
- ad inizio documento vanno inserite due dichiarazioni:
- l'appartenenza alla famiglia XML: <?xml version="1.0" encoding="UTF-8"?>
- la DTD di XHTML (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd" > per la versione strict, la più rigorosa)
- tutto il codice di marcatura (tag e attributi) va scritto in minuscolo;
- tutti tag devono essere obbligatoriamente chiusi;
- l'ordine di annodamento deve essere rispettato, il che significa che i tag vanno chiusi in ordine inverso rispetto a come sono stati aperti:
- <div><p><h1>testo</div></p></h1> è errato;
- <div><p><h1>testo</h1></p></div> è corretto;
- i valori degli attributi devono essere specificati tra doppi apici (ad esempio, <h1 id="titolo"> );
- i tag vuoti devono essere scritti nella sintassi semplificata (per esempio, il tag <img> diventa <img /> )
Una volta compiute queste operazioni un buon modo per pulire ulteriormente il codice è quello di utilizzare uno strumento di validazione automatica come quello messo a disposizione dal W3C ( http://validator.w3.org ). Grazie a questo strumento sarà semplice identificare i tag e gli attributi non ammessi da questa versione del linguaggio.
Un'altra regola pratica richiederebbe la conversione dei tag usati per il controllo della presentazione in regole CSS. Per esempio, il codice:
<p><b><i><font color="red" size="5">testo di esempio</font></i></b></i>
Può essere trasformato in un semplice:
<p class="evidenzia">testo di esempio</p>
E nella classe CSS:
.evidenzia {
font-weight: bold;
font-size: 5em;
font-style: italic;
color: red;
}
In questo modo sarà possibile applicare il medesimo stile a tutti i punti del sito in cui è necessario ottenere quel particolare effetto, si alleggerirà il codice e si eviterà che i dispositivi mobili ricevano informazioni superflue.
Infine, possiamo elencare alcuni principi empirici derivate dal tema più generale dell'accessibilità dei siti web. Sebbene sia buona regola realizzare siti web conformi alle linee guida della materia, alcuni accorgimenti possono ottimizzare ulteriormente l'XHTML delle pagine in vista di una fruizione da dispositivi mobili. Tra queste consigliamo di:
- inserire sempre testi alternativi per tutte le informazioni non testuali, come immagini (mediante l'attributo alt ), animazioni e filmati (mettendo link a pagine contenenti una descrizione testuale o a un riassunto) e altri oggetti incorporati come script ed applet java (tramite l'elemento <noscript> ): in questo modo gli utenti dei dispositivi che non sono in grado di visualizzare queste tipologie di contenuto potranno comunque accedere ad un informazione equivalente;
- utilizzare il codice di marcatura in modo appropriato, ossia applicare i tag per definire la struttura del testo: titoli, liste, citazioni; si tratta di un accorgimento che - in questo contesto - dovrebbe rendere più semplice la lettura della pagina da parte di interpreti vocali (attualmente nessun browser per dispositivi mobili prevede una simile funzionalità, ma esistono ricerche per ottenerla);
- utilizzare l'attributo acceskey per associare un numero ai link principali del sito, come il ritorno alla homepage o l'accesso alle sotto-sezioni: molti browser consentono di utilizzare il tastierino del cellulare per attivare i link così indicati, rendendo più veloce la navigazione;
- utilizzare l'attributo tabindex nei collegamenti ipertestuali e negli campi dei moduli per forzare uno spostamento lineare all'interno del documento: alcuni dispositivi possiedono joystick o pulsanti che consentono di saltare da un punto all'altro sfruttando questo comando;
- evitare l'uso di frames: come abbiamo visto sono esclusi dalle specifiche di XHTML MP, sebbene alcuni dispositivi (come i PDA) siano comunque in grado di interpretarli;
- se si mantiene un'impaginazione mediante l'uso di tabelle, verificare che queste abbiano larghezze impostate mediante valori percentuali affinché il layout possa adattarsi alle dimensioni del dispositivo in modo più naturale;
- sempre in riferimento alle tabelle, organizzare il contenuto in modo che esso resti coerente e comprensibile anche quando la tabella viene "linearizzata", ossia quando viene a mancare la griglia bidimensionale di righe e colonne e il contenuto viene collocato in un'unica dimensione, come se venisse trascritto una cella dopo l'altra dalla prima all'ultima, riga per riga.
Questi, a nostro avviso, sono i requisiti di accessibilità che vanno considerati nello scrivere codice XHTML per dispositivi mobili: altri verranno presi in considerazione a proposito di altri linguaggi e tecnologie. Una nota appare tuttavia doverosa: realizzare un sito accessibile non significa - automaticamente - avere ottenuto un sito web per dispositivi mobili. Significa, semplicemente, che un sito web non ha barriere all'accesso per varie categorie di utenti, ivi compresi quelli che utilizzano dispositivi mobili. L'esperienza d'uso e il soddisfacimento delle esigenze degli utenti in movimento potrebbe richiedere interventi più di natura progettuale che di ottimizazione del codice.
