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/
C.S.