Il web si evolve, in un’unica parola: adattabilità

Le pagine web non sono mai state come le pagine di una brochure. Come web designer dobbiamo creare strutture che ci permettono di contenere testi e immagini di volta in volta diversi. Più complesso è il layout, maggiore dovrà essere l’adattabilità alla varie situazioni.

Gran parte dei designer tende a progettare il web design delle pagine web come per la stampa, con contenuti fissi. Come sei il testo e le immagini fossero già decisi a priori. Questo approccio può funzionare per un sito vetrina, dove i contenuti sono sempre gli stessi; ma per un portale, per un sito leggermente più complesso dobbiamo affrontare il problema in modo diverso.

Dobbiamo pensare a come vengono fruite le informazioni, su quanti dispositivi, da quante persone e da che tipo. Solo parte delle informazioni possiamo conoscerle in anticipo, parte del lavoro dovrà essere fatto in un secondo momento in base al reale utilizzo.

Per progettare strutture astratte utilizziamo tutti i giorni tecnologie come il CSS (Cascading Style Sheets o Fogli di Stile), che si occupa di renderizzare la parte grafica di un sito.

Nell’ultima sua versione il CSS3 ci aiuta a progettare siti sempre più complessi ed adattabili. Sfortunatamente non tutte le proprietà dei CSS3 sono supportati da tutti i browser. Meetweb rilascia siti che sfruttano queste tecnologie per i browser che le supportano, lasciando comunque le informazioni visibili ai browser che non le supportano (Progressive Enhancement).

Oltre alle media queries, argomento già trattato in precedenza (Il web design reattivo), ecco una carrellata di funzionalità relative all’adattabilità di un sito. Queste proprietà vanno dal particolare al generale. Dal controllo della singola parola, del testo fino al controllo del layout. Vengono prese in considerazione quelle più comuni senza scendere nel particolare.

Text-overflow
Per controllare il testo in eccesso.
text-overflow
Word-wrap
Per gestire parole troppo lunghe.word-wrap
Text-wrap
Per decidere quando a andare a capo, impostando delle regole a priori.
Il seguente codice text-wrap
può essere visualizzato in questo modo text-wrap
e mai in questo (andando a capo all’interno della data) text-wrap
Text-rendering
Per abilitare le legature e il kerning (crenatura).
Anche se è una proprietà SVG e non CSS.
legature e kerning
Transforms
Per ruotare, aumentare, diminuire, ecc.
Multi Column Layout Module
Possiamo controllare un unico flusso di testo e disporlo in colonne.
Multi Column Layout
Hyphenation
Controlla la sillabazione dei testi lunghi, permettendoci di migliorare la formattazione del testo sia nel caso di testo allineato in una direzione sia nel testo giustificato (poco utilizzato sul web a causa dei problemi dei canaletti).
CSS3 regions: Rich page layout with HTML and CSS3
Ultima proposta della adobe, molto interessante permette di far fluire il testo in colonne, tra elementi grafici, all’interno di forme predefinite.
CSS3 regions

Vuoi un nuovo sito web? Richiedi subito un preventivo gratuito

Se stai pensando che ci vuole un nuovo design per il tuo sito web, compila la form per ricevere un preventivo gratuito.

Articoli correlati

Scrivi un commento

* I campi con l'asterisco sono obbligatori