Layout web: fissi, liquidi, adattivi e responsivi
Per ottimizzare la navigazione al variare delle dimensioni dei dispositivi di navigazione (smartphone, tablet e PC desktop) si sono affermati diversi approcci nello sviluppo dei layout per siti web.
Layout fissi
I layout fissi hanno una larghezza fissa impostata; risultano poco adatti alla navigazione su smartphone e dispositivi di dimensioni ridotte poichè si vedono in un formato scalato e ridotto.; ciò impone il costante utilizzo dello zoom-in per riuscire a leggere i testi e dello zoom-out per tornare alla visione d'insieme della pagina.
Layout Liquidi
I layout liquidi si adattano alla larghezza del browser e, conseguentemente, anche i contenuti si allargano o si restringono in base a questa dimensione.
Con questo tipo di layout si ha un ridotto controllo sul risultato della visualizzazione: su monitor di ampie dimensioni, ad esempio, i contenuti possono diventare così "allungati" da mostrare interi paragrafi di testo su un’unica riga rendendo scomoda la lettura oltre ad ottenere un effetto antiestetico.
Layout Adattivo
Il layout adattivo è un'evoluzione del layout fisso; si basa su diverse larghezze fisse che vengono utilizzate a seconda dell'ampiezza della finestra del browser.
La varietà dei dispositivi di navigazione, e quindi delle dimensioni dei browser, fa sì che l'insieme di dimensioni fisse previste dal layout adattivo sia insufficiente, provocando sprechi di spazio o eccessiva "compressione" dei contenuti.
Layout Responsivo
Il layout responsivo (responsive) rappresenta oggi l'approccio più evoluto per lo sviluppo di siti web. Questo tipo di layout consente di ottenere una visualizzazione ottimale su tutti i dispositivi poiché oltre ad adattare le dimensioni degli elementi della pagina in base alla risoluzione e alle dimensioni dello schermo, è in grado di servire immagini ‘meno pesanti’ ai dispositivi che non possono sempre sfruttare la banda larga; semplificare il layout degli elementi presenti sulla pagina per i dispositivi mobili con schermi piccoli nascondendo gli elementi non essenziali; fornire un’interfaccia adatta all’interazione "touch"; individuare e sfruttare, quando serve, funzionalità adatte al mobile come la geolocalizzazione.