Siti web - Layout e design responsivo

(Aggiornamento dell'articolo al 17/02/2010)

Un problema grande e dibattuto in questi ultimi tempi riguarda la rappresentazione dell’informazione sul web. Si è passati dagli inizi degli anni novanta con siti solo ed esclusivamente testuali a rappresentazioni con immagini, filmati ed animazioni che caratterizzano l’attuale web 2.0 dei giorni nostri. L’evoluzione non è dovuta solo all’avvento della connessione veloce (Adsl), una volta infatti una immagine sia pur ridotta nelle dimensioni e nel peso veniva scaricata con tempi decisamente troppo lunghi, ma anche dalla evoluzione continua dei browser dedicati appunto alla visualizzazione delle pagine web. Oltre a quest’ultimi che via, via hanno incominciato a supportare i fogli di stile interni ed esterni (istruzioni particolari a volte racchiuse in files separati che hanno lo scopo di determinare lo stile della pagina) e gli script (istruzioni in particolari linguaggi di solito usate per effetti speciali ecc.), dobbiamo ricordare anche l’avvento di componenti aggiuntivi come flash e silverlight per i filmati e le animazioni e ora anche con Html 5.
 
Devo dire che un dilettante come me che pasticcia sul web fa decisamente fatica nel tenersi aggiornato, tanto è veloce l’evoluzione e l’uscita di nuovi e più sofisticati prodotti, ma chi si ferma è perduto ed io non sono proprio il tipo che fermandosi si guarda indietro non accettando più ciò che viene dopo, ma al contrario, pur avendo iniziato agli albori e già dall’università a pasticciare con il cacciavite, ora, ancora entusiasta, vado avanti e mi aggiorno incominciando con queste poche righe dove evidenzio i naturali problemi che sopraggiungono per una così veloce evoluzione.
 
Vi ricordate, anni fa, quando stupiva una semplice gif animata che rallegrava testi grigi e noiosi ? Ora non ci accontentiamo più e vorremmo veder sbucare dal piccolo schermo fuochi artificiali e quant’altro di più animato e fantastico che ci possa essere o che la fantasia del web-designer possa proporre agli utilizzatori finali. Il problema comunque è sempre quello antico nel quale già Cicerone si dibatteva: la rappresentazione di uno o più contenuti attraverso una forma (abito) che possa accattivare e a far assimilare questi ultimi ad un pubblico e che sia possibilmente il più vasto possibile.
 
Ora tutti vogliono dire qualcosa, esternare ed il mezzo con il quale è possibile farlo in modo semplice è proprio il web (vedi il fiorire di blog, social-network ecc.). Non sto qui a dibattere su questo argomento a cui anch’io comunque a dire la verità non sono estraneo, infatti vi sto annoiando con queste righe, ma semplicemente analizzare il problema da un punto di vista più tecnico alla luce dei più nuovi mezzi di rappresentazione.
 
La rappresentazione anche visiva di un contenuto è sempre avvenuta e la corrispondenza coerente tra ciò che si vuol dire e il modo con il quale si dice c’è sempre stata. Avete forse mai visto dire dalla vostra ragazza/o qualcosa di dolce e romantico con voce dura e con il viso arrabbiato??  Beh, forse può succedere, ma in questo caso il messaggio non era certamente quello sperato o voluto. E’ evidente che anche un viso parla e anche la sola intonazione (forma) della voce può far assumere significati diversi a parole (contenuti) identiche. Analogamente in un libro la forma con la quale si scrive e anche l’accompagnamento di immagini (foto) possono evidenziare e a volte esaltare ciò che effettivamente si vuol dire. E’ chiaro ed evidente che il modo con il quale noi reagiamo di fronte alle forme è anche a volte soggettivo: Tizio può essere affascinato maggiormente da una bella poesia se accanto vi è rappresentata ad esempio una immagine di un bel tramonto, Caio invece, dalla stessa se vi è rappresentata una immagine di un prato fiorito ed ad ognuno il suo …
E’ proprio per questo motivo che c’è sempre stata questa difficoltà nel raggiungere un pubblico vasto nelle proprie argomentazioni non tanto nel comunicare semplici dati e argomenti del tutto razionali ma specialmente nel comunicare col cuore emozioni e sentimenti. Cito qui alcuni versetti presi dal capitolo secondo degli Atti degli Apostoli:

E’evidente che forse a stupirsi maggiormente è proprio chi ci narra l’evento con queste righe. Non è magari che gli apostoli pieni di fervore e di assoluta fede in Dio abbiano parlato con linguaggi e mimica tali da suscitare le stesse emozioni ai loro interlocutori a prescindere dalla nazione e idioma di appartenenza ? Beh, ad ognuno la propria interpretazione …
Tornando a noi, dobbiamo dire che, a differenza di un libro, di un giornale, di un discorso, della radio o della televisione, il web, a richiesta dell’utente fornisce pagine fatte non solo da un testo o immagini fisse ma anche da filmati, suoni e animazioni e il tutto è spesso accompagnato da rimandi (link) che a loro volta aprono altre pagine ecc. sempre tutto su un unico piccolo schermo e a richiesta specifica dell’utente.
 
Il problema grosso per noi, sia professionisti o semplici dilettanti o comunque addetti alla realizzazione delle pagine attraverso un codice, è proprio quello tipico che avviene in un campo in veloce, rapida e inarrestabile evoluzione che spesso poi si traduce purtroppo in una diversa interpretazione di questo codice dai differenti browser in circolazione. Infatti non è mai detto che una pagina progettata per un tipico browser e vista in questo sia visualizzata allo stesso modo in un altro. Ognuno interpreta a suo modo le istruzioni che il webmaster usa per la realizzazioni delle stesse. Spesso le differenze sono minime ma talvolta sostanziali. Ciò capita non solo con browser di case diverse ma anche con diverse versioni di quelli prodotti dalla stessa casa.
 
Urge quindi una regola che valga per tutti e quindi di norme certe e precise a cui riferirsi nella progettazione ma purtroppo è anche evidente la difficoltà a regolamentare un campo che, come ripeto, è in continua e così rapida evoluzione costringendo poi noi sviluppatori a fare opera da funamboli.
In aggiunta a quanto fin qui detto, una pagina web non può essere solo visualizzata da differenti browser ma anche da diversi e più disparati dispositivi: computer con monitor 4/3 a bassa risoluzione, computer più moderni con monitor 16/9 con risoluzioni Hd o full Hd, Smartphone ed iPhone con più basse risoluzioni ecc. ecc. per cui un programmatore deve in ogni caso tener conto di tutto ciò: una pagina web deve trasmettere la stessa informazione e suscitare possibilmente le stesse emozioni, sia visualizzata con un monitor 16/9 di un computer sia con un iPhone o quant’altro.
 
Il moderno web  ci è venuto incontro a risolvere efficacemente alcuni di questi problemi anche se per ora in questo momento in cui scrivo (15 settembre 2010) è tutto ancora in una prima fase sperimentale e non tutti i browser e dispositivi sono compatibili con le nuove regole: l’introduzione delle “Media Query”. Non spaventatevi del termine; si tratta di una semplice sequenza di istruzioni da inserire nel codice della pagina web e naturalmente invisibile all’utente dove viene posta una semplice domanda al dispositivo (computer o telefonino ecc.) che legge la pagina stessa: “Che larghezza di monitor utilizzi ?” Ad esempio se la tua larghezza è inferiore a 480 px (pixel) allora presentami la pagina con uno stile adatto per iPhone altrimenti usa il foglio di stile ordinario. Tenendo conto che gli stili di solito sono istruzioni contenute in files particolari con estensione “.css”, le istruzioni sarebbero le seguenti:

<link rel="stylesheet" type= "text/css"
media = "screen and (max-device-width: 480px)"
href = "StileiPhone.css" />
.....

La query (domanda) posta tra parentesi tonde se verificata, cioè schermo < 480px, allora esegui l’istruzione successiva (utilizza lo stile iPhone) altrimenti ignorala e prosegui …
Già da tempo vi era la possibilità di un parziale adattamento della pagina alla larghezza della finestra del browser con i così detti layout elastici, istruzioni contenute in uno stesso foglio di stile mediante le quali era possibile adattare la larghezza della pagina e dei suoi contenuti, ma il tutto come ben potete pensare poteva funzionare egregiamente per piccole differenze di dimensione, tutt’altra cosa è passare da un monitor 16/9 di rapporto larghezza/altezza (circa 1600 x 900 px) con uno di soli 480 px dell’ iPhone. In questo caso, un testo presentato su quattro colonne deve trasformarsi presentato in solo due colonne o magari una sequenza di fotografie su una riga devono invece essere presentate su telefonino su due o più righe ecc. ecc. In questo caso dunque devono proprio intervenire fogli di stile diversi per diversi media.
 
Solo in quest’ultimo caso si può dire che il design della pagina è responsivo. Una volta era il tipografo a dettare lo stile delle pagine a secondo che il contenuto dovesse essere rappresentato su un foglio A4 piuttosto che su un A3 o A3++; ora sul web ad una query (domanda) il dispositivo risponde, ed ad ognuno il suo stile …!!
 
Chi interessato all’argomento, suggerisco la seguente pagina web :
https://www.alistapart.com/articles/responsive-web-design/