L'evoluzione dei siti web reattivi

I siti web sviluppati negli ultimi anni, benché realizzati con il ricorso alle più attuali tecniche di sviluppo e codifica e nel rispetto degli standard del momento (XHTML 1.0/HTML 4.01 - CSS2) sono resi in parte obsoleti dall’adozione di nuove specifiche (HTML5 e CSS3). L’impaginazione, come da prassi diffusa, veniva impostata prendendo come riferimento le caratteristiche dei monitor per computer allora più diffusi.

Nel frattempo però il progresso (per lo più mobile) e la crescita esponenziale di dispositivi di dimensioni e caratteristiche differenti, hanno modificato radicalmente le modalità di accesso ad internet e di fruizione di contenuti web.
Un sito quindi oggi potrà essere visitato non solo con il computer - dotato di uno schermo dalla risoluzione prevedibile, di mouse e tastiera e connesso a banda larga - ma anche da dispositivi di dimensioni e caratteristiche completamente differenti (netbook, smartphone, tablet, lettori di e-book, MP3 e TV) con cui, ad esempio, si interagisce al tatto o con un telecomando, connessi alla rete 3G e dotati di tecnologie anch’esse differenti rispetto a quelle di un pc.
Come se ciò non bastasse, dimensione e risoluzione degli schermi possono differire anche tra modelli successivi dello stesso prodotto e la visualizzazione cambia - e non di poco - a seconda se si orienta il dispositivo in orizzontale o in verticale. L’accesso mobile costringe poi spesso l’utente a fare i conti con soglie mensili di traffico e a rinunciare a siti lenti, pesanti o difficili da consultare se non seduti al computer.

In sintesi, ciò che appare (ed era molto prevedibile che fosse visto dalla maggioranza degli utenti) in un certo modo su di un dato tipo di schermo, può scoraggiare la navigazione, limitandola a o addirittura rendendola impossibile, a chi si colleghi al sito “in mobilità” o con altri dispositivi (si pensi allo zoom e allo scorrimento continui necessari per leggere il contenuto di certi siti con uno smartphone o all’impossibilità di visitarli per mancanza di un componente essenziale disponibile solo per PC).
In generale il fatto è che non è più dato prevedere che la maggior parte dei visitatori accederanno con una determinata strumentazione e comportarsi di conseguenza. Non è proprio dato sapere in anticipo con quale dispositivo un sito verrà visitato.
Il risultato che ne deriva è il rischio che una consistente percentuale di utenti non sarà in grado di accedere alle informazioni (o, nella migliore ipotesi, con difficoltà) e di interagire con i moduli di invio dati.

In tempi recenti, di pari passo con l’affermarsi dei nuovi standard di codifica e di nuove regole per migliorare l’accessibilità (ad esempio anche per dispositivi utilizzati da soggetti portatori di handicap), si è quindi abbandonato l’approccio “a dimensione fissa” per uno relativo: ma non si tratta solo di disporre gli elementi sulla pagina ricorrendo a misure relative alla dimensione della “finestra sul sito”, immaginando ogni schermo e ogni dispositivo dalle gigantesche TV, attraverso lettori di e-book con schermo in bianco e nero e da dispositivi che leggono ad alta voce fino a piccoli smartphone o lettori MP3 con accesso ad internet.
Si tratta anche di fornire menu di navigazione, contenuti, qualità e dimensione di immagini e del testo in modo differente in base alle caratteristiche del dispositivo, all’esatta dimensione e l’orientamento dello schermo che sta visitando il sito, al fine di fornire un’esperienza di navigazione, una fruibilità dei contenuti ed un’interattività sempre adeguate.
Esempi di questo approccio (ISO, Microsoft, aids.gov) possono essere verificati da un pc, meglio se dotato di monitor HD, mettendo a tutto schermo la finestra del sito e restringendola progressivamente in larghezza fino a dimensioni minime: si noterà un adattamento a qualunque risoluzione e spesso dei “punti di rottura” oltre i quali avviene una modifica nell’impaginazione o nel menu per migliorare l’esperienza su dispositivi più piccoli e molto probabilmente tattili. 

L’insieme delle tecniche oggi disponibili allo scopo indicato, unificate sotto la definizione di “responsive web design”, consente di distribuire contenuti in modo adeguato indipendentemente dal dispositivo utilizzato per la visualizzazione delle pagine.
Ciò che mi capita di proporre a clienti vecchi e nuovi è il rinnovo della veste grafica del sito, per le pagine pubbliche così come per l’area privata, in modo da rinnovarne l’aspetto ma soprattutto per garantire una comoda fruizione dei contenuti ed un più semplice riempimento dei moduli di informazioni non solo a datati PC ma anche a dispositivi nuovi e futuri.
Ciò riprogettando il layout del sito, pur mantenendone inalterati i validi contenuti, migliorando l’accessibilità e la navigabilità per tutti i dispositivi, per i portatori di handicap ed ottenendo una migliore comprensione semantica dei contenuti da parte dei motori di ricerca (con il non trascurabile effetto di una migliore catalogazione del sito ed un verosimile miglioramento della reperibilità nelle ricerche degli utenti).
Il tutto avendo riguardo che la navigazione non ne risulti compromessa per i dispositivi meno aggiornati e precedenti all’introduzione dei nuovi standard.

Dal punto di vista strettamente tecnico si passa ad HTML5 per il markup delle introducendo i nuovi elementi “semantici” delle specifiche e dei ruoli WAI ARIA per l’accessibilità.
Si passa ad un layout “a griglia fluida”, con immagini “flessibili” e con il riconoscimento della risoluzione del dispositivo tramite le Media Queries CSS3, con la previsione di almeno 3 breakpoint (1024+ pixel, 768-1023px; 320-767px), accorgimenti volti a garantire la migliore fruibilità possibile per computer, netbook, tablet e cellulari.
Si fa infine ricorso ad accorgimenti specifici per consentire la fruizione anche a versioni di Internet Explorer precedenti alla 9 senza un uso compromettente delle nuove funzioni CSS3 non supportate da vecchi dispositivi.