JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Questa è la traduzione dell'articolo Dynamic resolution dependent layouts di Kevin Hale, pubblicato originariamente su Particletree il 16 novembre 2005. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.

In un mio precedente articolo dedicato ai layout con i CSS, ho parlato dei diversi metodi che un web designer ha a disposizione nella realizzazione dei suoi siti web. In questo vorrei soffermarmi sull'implementazione di un layout dinamico in base alla risoluzione dello schermo: penso che possa offrire un'alternativa valida a quelli che vanno alla ricerca di un punto di equilibrio tra layout a larghezza fissa e layout liquidi.

Con i layout dinamici le possibilità sono davvero infinite. Possiamo cambiare layout a 3 colonne in layout a 2 colonne, fornire una dimensione del testo adeguata per favorire la leggibilità, possiamo anche premiare i visitatori che hanno schermi a larga o larghissima risoluzione con dei contenuti extra e con immagini più grandi. Tutto senza dover mettere PHP all'interno nei CSS o perdere i benefici in termini di cache offerti dall'uso di fogli di stile esterni.

Prima di passare a parlare del JavaScript, devo dire quanto sia stato a volte frustrante il constatare come un layout liquido non si presenti nel modo giusto alle diverse risoluzioni che gli utenti di un mio sito usano. Le colonne non si sono mai davvero adattate nel modo in cui volevo e dimensioni del testo troppo piccole alle alte risoluzioni, e che andavano bene su risoluzioni inferiori, rovinavano irrimediabilmente la leggibilità del contenuto. Quando ho provato a sacrificare i layout ottimizzati per la risoluzione 800x600, ho finito con il dare problemi a quegli utenti che non massimizzavano la finestra del loro browser.

Prima di leggere l'articolo di Man in Blue sui Layout dipendenti dalla risoluzione, pensavo che i layout fissi non sfruttassero i vantaggi del web come medium dinamico e che quelli liquidi fallissero nell'adattarsi al meglio alla varietà dei modi di visualizzaizone possibili. L'implementazione di Man in Blue è certamente un capolavoro, ma penso che possiamo creare una versione più modulare e facile da sviluppare, sia per gli sviluppatori che per i designer.

Vediamoli in azione

Ho realizzato una piccola pagina demo che mostra come un layout dinamico in base alla risoluzione possa fornire ottime soluzioni in termini di adattabilità con una struttura XHTML molto essenziale. Ecco la demo.

Provate a ridimensionare la finestra del vostro browser per vedere il layout adeguarsi di conseguenza in base alle dimensioni. La cosa positiva di questo metodo è che non bisogna ricaricare un nuovo CSS per ciascun layout. Ho solo bisogno di caricare le regole necessarie per adattare il layout di default alla larghezza della finestra del browser. Più che uno style switcher è uno style adapter.

Altri articoli

Altre guide

Altre newsletter