Prima di implementare praticamente un layout, ci sono alcuni concetti fondamentali da chiarire. Dovreste decidere innanzitutto il tipo di layout. In linea di principio, ci sono tre possibilità.
• Fisso
• Flessibile
• Elastico
Il CSS permette di creare layout con dimensioni fisse o flessibili. Nei layout fissi si usa di solito misure in pixel. I layout flessibili invece si basano su valori percentuali. Entrambe le varianti di layout presentano certamente i loro vantaggi e svantaggi.
Di solito si utilizzano i layout fissi quando le immagini sono utilizzate in modo determinante per il layout. (Anche qui ci sono eccezioni grazie all'uso di immagini di sfondo CSS). Se nei layout è importante posizionare gli elementi con precisione ai pixel, allora quasi sempre si utilizza il posizionamento fisso. In questo tipo di layout di solito si imposta almeno la larghezza del layout su un numero fisso di pixel. Questa larghezza solitamente mira a determinate risoluzioni dello schermo.
La questione cambia invece nei layout flessibili. Qui non si specifica una larghezza fissa. Il layout si adatta in questo caso alla larghezza della finestra del browser.
In tali layout, ad esempio, la larghezza viene espressa in valori percentuali. Se un utente regola le dimensioni della finestra del browser, anche le dimensioni del layout si modificano.
Grazie alle moderne proprietà CSS esiste un'altra variante di layout, ovvero il cosiddetto layout responsivo. In questo caso il layout si adatta in modo che ad esempio su uno smartphone sia completamente diverso rispetto a un desktop. Qui su PSD-Tutorials.de ad esempio è stato utilizzato un layout del genere. Se si visita la pagina su desktop con una dimensione di finestra del browser "normale", si ottiene l'immagine seguente.
Se si riduce la finestra, cambia effettivamente anche l'organizzazione degli elementi presenti sulla pagina web.
Lo sforzo per creare un layout responsivo è relativamente elevato. Infatti è necessario determinare le dimensioni dello schermo del visitatore e presentargli un layout appropriato. E dovrete sviluppare effettivamente questo layout adatto alle diverse dimensioni dello schermo. Ad esempio, un visitatore che accede al vostro sito web con un grande monitor visualizzerà un layout a tre colonne. Se invece un altro visitatore accede al vostro sito da uno smartphone, vedrà un layout a una colonna.
Vantaggi e svantaggi delle varianti
Prima di implementare un layout, dovreste decidere quale delle forme di layout menzionate volete utilizzare. Vorrei mostrarvi brevemente quali sono i vantaggi e gli svantaggi dei layout fissi.
• Le bozze di design possono essere realizzate sicuramente in modo più semplice qui.
• Se ci si orienta sulle risoluzioni standard, non ci sono quasi problemi nella visualizzazione del sito web.
• I layout sono facili da spiegare. (Questo vantaggio vi è ovviamente utile se, come sviluppatori web, volete spiegare un layout a un cliente).
I layout fissi hanno però anche dei svantaggi.
• A causa delle dimensioni fisse, sono poco flessibili e quindi non si adattano ad esempio a schermi molto piccoli o grandi. Spesso si spreca molto spazio.
• Presentano alcune limitazioni per quanto riguarda l'accessibilità.
Anche i layout flessibili hanno punti di forza e debolezze. Iniziamo con i vantaggi.
• I layout si adattano automaticamente alle dimensioni delle finestre del browser.
• I visitatori possono quindi influenzare in modo significativo la visualizzazione del sito web.
Ci sono però anche svantaggi.
• Come sviluppatori, è difficile controllare i risultati. Le specifiche del layout possono essere quindi implementate solo in misura limitata.
• I contenuti delle pagine devono essere adattati in modo complesso.
• Con schermi grandi, la visualizzazione di testi brevi può diventare "non gradevole", poiché spesso saranno su una sola riga. (CSS offre comunque proprietà appropriate come min-width).
Un'altra forma di layout rappresenta un compromesso tra layout fissi e flessibili. Si tratta dei cosiddetti layout elastici. Il loro principale attributo è l'unità di misura em. (Negli ultimi tempi è diventato sempre più popolare anche il rem. A differenza di em, rem fa riferimento all'elemento radice, non come em all'elemento genitore).
In questi layout, larghezza e altezza sono flessibili. Il design della pagina si ridimensiona proporzionalmente alle dimensioni della finestra del browser. Questo tipo di layout è certamente il più complesso da implementare dal punto di vista pratico. Questo è dovuto al fatto che è necessario sapere molto bene in anticipo come si comporteranno gli elementi in una finestra del browser in evoluzione. I layout elastici vengono utilizzati soprattutto per i siti web che offrono molte foto e video.
I vantaggi dei layout elastici:
• Lo spazio disponibile viene sfruttato in modo ottimale.
• I contenuti vengono mostrati il più grande possibile in modo proporzionale.
Ma ovviamente anche i layout elastici hanno i loro svantaggi.
• La progettazione di questi layout è molto complessa.
• Anche l'implementazione è tutto tranne che semplice.
Qualcosa da scegliere
Dovete quindi decidere quale delle varianti menzionate desiderate utilizzare. Se siete ancora all'inizio dello sviluppo di HTML/CSS, vi consiglio di iniziare con un layout fisso. Chi ha già conoscenze avanzate nel campo dello sviluppo web dovrebbe invece lavorare direttamente con i layout responsivi. In questo modo sarete dalla parte giusta, indipendentemente dal dispositivo con cui verrà visualizzato il vostro sito web alla fine.
