Gli esperti del Digital marketing

Potenzia il tuo business online con Monkey Digital SEO: sfrutta al massimo il potenziale del marketing strategico digitale.

Che cos’è il Fluid Design e come viene utilizzato sui siti Web?

Che cos'è il Fluid Design e come viene utilizzato sui siti Web?

La crescente popolarità di smartphone e tablet ha lasciato ai web designer una vera sfida: creare esperienze online che non solo vengano visualizzate in una finestra del browser standard ma anche su schermi di dimensioni molto più piccole. Fortunatamente, gli schermi sia più piccoli che più grandi del normale possono essere affrontati con un design fluido.

In questo post esploreremo il web design fluido come soluzione a questo problema. Imparerai cos'è il design fluido, come funziona e come si confronta con altri progetti, così potrai decidere il modo migliore per ridimensionare le tue pagine web e gli elementi al loro interno.

Cos'è il web design fluido?

Nel web design fluido, la larghezza degli elementi della pagina è proporzionale alla larghezza dello schermo o della finestra del browser. Un sito Web fluido si espande o si contrae in base alla larghezza del viewport corrente. La progettazione fluida aiuta a rendere i siti Web più utilizzabili su tutti i tipi di dispositivi con dimensioni dello schermo diverse.

Immaginiamo un sito web con tre elementi adiacenti, uno con larghezza impostata al 50% e due elementi più piccoli con larghezza pari al 20% (per questa dimostrazione, le altezze non sono importanti). Mettiamo anche dei margini tra loro.

Quando viene visualizzato in una finestra del browser larga 1000 pixel, il sito web appare così:

La larghezza di ciascun elemento in pixel si basa sulla larghezza di 1000 px del viewport.

Quando riduciamo la finestra del browser a soli 600 px, un design fluido ridimensiona proporzionalmente questi elementi:

Il design fluido garantisce che un sito Web abbia sempre un layout simile indipendentemente dallo schermo. Un layout coerente avvantaggia l'esperienza dell'utente garantendo al tempo stesso l'usabilità per il maggior numero possibile di visitatori. "Il tuo sito web deve essere OK se utilizzato dagli utenti su dispositivi di loro scelta", afferma Brian Dys Sahagun, Principal UX Designer presso Avaloq.

Griglie fluide nel Web Design

Le griglie fluide sono un'implementazione comune dell'approccio di progettazione fluida. Una griglia fluida suddivide la larghezza della pagina in diverse colonne di uguali dimensioni e spaziate. Il contenuto della pagina viene posizionato in base a queste colonne.

Quando il viewport si espande orizzontalmente, ogni colonna fluida si espande di conseguenza, così come il contenuto all'interno delle colonne:

Le griglie sono un layout diffuso per strutturare il contenuto della pagina in modo digeribile e l'applicazione di principi fluidi alle griglie è un modo per creare griglie adatte a schermi diversi.

Tuttavia, la progettazione fluida non è l'unico approccio: confrontiamolo con altri tre progetti di layout comuni: fisso, adattivo e reattivo.

Design fisso e design fluido

I layout che seguono una progettazione fissa non sono conformi alle dimensioni della finestra. A differenza di quelli nei design fluidi e nelle griglie fluide, gli elementi in un layout fisso sono impostati su larghezze di pixel specifiche e tali larghezze non cambiano in base al dispositivo o alle dimensioni dello schermo.

La progettazione fissa ha perso il favore dei progettisti a causa della sua mancanza di flessibilità e facilità d’uso su tutti i dispositivi. Viene applicato raramente, se non mai, a qualsiasi sito Web professionale: i designer ora optano invece per siti fluidi, adattivi e/o reattivi. Vale quasi sempre la pena di utilizzare progetti fluidi anziché fissi.

Design adattivo e design fluido

Il web design adattivo "riguarda la creazione di interfacce che si adattano alle capacità dell'utente in termini sia di forma che di funzione", secondo Aaron Gustafson, il fondatore di Easy Designs.

I layout fluidi aiutano a rendere i siti web più utilizzabili, ma non hanno il controllo preciso della progettazione adattiva. Nell'approccio adattivo, i progettisti creano più layout di siti Web separati per larghezze di schermo specifiche, con l'obiettivo di soddisfare più dispositivi specifici. Pertanto, un sito Web potrebbe avere un design del layout separato per la visualizzazione su desktop, tablet e smartphone.

I web designer ottengono una progettazione adattiva con le media query, una funzionalità dei CSS che rileva le proprietà del dispositivo dell'utente, comprese le dimensioni dello schermo. La query multimediale legge le dimensioni dello schermo, quindi seleziona il layout fisso più adatto tra più opzioni di layout fisso.

Mentre i design fluidi potrebbero sembrare goffi su schermi molto grandi o molto piccoli, il design adattivo ci consente di creare layout più precisi per dispositivi specifici. Il compromesso qui è che i progetti adattivi richiedono molto più tempo per essere realizzati rispetto a quelli fluidi, il che potrebbe non essere sostenibile per i singoli proprietari di siti web. Questo può essere un argomento profondo, quindi sentiti libero di leggere di più al riguardo in uno dei nostri articoli.

Design reattivo e design fluido

Potresti aver sentito il termine “responsive” per descrivere qualsiasi sito web che adatta il proprio layout a diversi dispositivi. In questo senso, sia la progettazione fluida che quella adattiva sono tecnicamente “responsive”.

Tuttavia, la terminologia diventa un po’ confusa in questo caso: “responsive” può anche riferirsi a un modo particolare di apportare queste modifiche. Qui parlerò del responsive design in quest'ultimo senso.

Un layout responsive design è un singolo layout applicato a una pagina Web che riformatta e ridimensiona gli elementi in base ai punti di interruzione. Un punto di interruzione è un valore specifico di larghezza della finestra (in pixel) che attiva una modifica nel layout del sito web. I punti di interruzione vengono impostati nei CSS con le query multimediali.

A differenza del design fluido, i siti Web reattivi utilizzano i punti di interruzione per riorganizzare o eliminare elementi su una pagina, invece di limitarsi a ridimensionarli. Pertanto, un layout reattivo potrebbe apparire molto diverso su un desktop, su un tablet o su uno smartphone.

Prendiamo ad esempio il sito web responsivo del marchio di abbigliamento Kotn. I suoi punti di interruzione sono impostati su 960 px e 560 px. Nota gli effetti di questi punti di interruzione mentre rimpicciolisco la finestra del browser.

C'è di più qui oltre alla semplice riduzione della larghezza degli elementi, sebbene anche questo faccia parte del design. Ma anche il contenuto stesso sta cambiando.

I design responsive sono la soluzione ideale per i siti Web aziendali con pagine ricche di contenuti e altamente interattive. Sebbene richieda più lavoro per l'implementazione rispetto alle pagine puramente fluide, un design reattivo garantisce che testo, contenuti multimediali e elementi di interazione abbiano un bell'aspetto a qualsiasi larghezza di visualizzazione, soprattutto quando la semplice riduzione degli elementi della pagina in larghezza non garantisce una buona usabilità o estetica.

I vantaggi della progettazione fluida

Ovviamente, il vantaggio principale del design fluido è la capacità di visualizzare correttamente un sito Web su schermi di qualsiasi dimensione, e questo è particolarmente importante per gli utenti mobili. Perché è così importante per gli utenti mobili? Ebbene, secondo Pew Research, l’85% degli americani possiede uno smartphone e addirittura il 15% degli americani adulti utilizza Internet “solo smartphone”. Ciò significa che ci sono molti utenti di Internet mobile in circolazione e progettare siti Web pensando a loro diventerà sempre più importante col passare del tempo.

Se pensi dal punto di vista dell’ottimizzazione dei motori di ricerca (SEO), trarrai vantaggio anche dal sapere che Google fa qualcosa chiamato indicizzazione mobile-first. Ciò significa che Google si assicura che i risultati di ricerca principali siano ottimizzati per i dispositivi mobili. Per garantire che il tuo sito sia tra i migliori risultati di ricerca, il tuo sito deve essere ottimizzato per i dispositivi mobili.

Infine, un altro vantaggio è che i layout fluidi tendono a caricarsi velocemente. Il motivo è che non ci sono molte modifiche da apportare al posizionamento e al dimensionamento degli elementi quando vengono caricati. Le prestazioni sono spesso un parametro estremamente importante, quindi questo vantaggio non è nulla su cui sorvolare se è quello che ti interessa.

Esempi di progettazione fluida

Un ottimo esempio di progettazione fluida può essere trovato qui. Il sito nel collegamento viene visualizzato anche nella gif sopra, dove sto semplicemente rimpicciolendo e allargando la finestra per vedere come risponde. Se hai dimestichezza con gli strumenti di sviluppo, quasi tutti i browser moderni avranno anche un modo per visualizzare in anteprima varie finestre da vari dispositivi.

Se ti concentri sul lato sinistro della gif, noterai che la barra verticale scompare una volta che la finestra diventa abbastanza piccola. Questo è un modo per ottenere più spazio sullo schermo da schermi più piccoli e aiutare lo spazio a sentirsi meno angusto in uno spazio già piccolo. Assicurati comunque che ciò non rimuova funzionalità importanti dal tuo sito e, in tal caso, fornisci un altro modo per accedervi (magari rendi la barra orizzontale anziché verticale).

Un'altra cosa che questo sito fa bene può essere vista durante lo scorrimento. Mentre scorri il sito sia in finestre grandi che piccole, il testo rimane sempre leggibile in modo lineare e le immagini che erano impilate una accanto all'altra verranno impilate una sull'altra per evitare che le immagini o il testo trabocchino. Entrambe queste cose significano che scorrere su e giù è un'esperienza fluida sia in una finestra mobile che in quella desktop.

Esempi di griglia fluida

L'esempio precedente utilizzava Flexbox per ottenere il suo design reattivo, ma questo sito utilizza invece la griglia CSS per farlo. Capisco che a prima vista potrebbe non sembrarti molto diverso poiché il risultato finale è più o meno lo stesso, ma sotto il cofano sta succedendo qualcosa di diverso.

I progetti a griglia funzionano bene perché sono costituiti da colonne e righe e puoi specificare esattamente in quante colonne e righe deve adattarsi ciascun elemento. Per ulteriore specificità, queste righe e colonne possono anche essere impostate su dimensioni in pixel specifiche o percentuali della dimensione del viewport disponibile.

Per il sito sopra riportato, funziona bene poiché sono presenti poche colonne ma anche molte righe di contenuto. Essere in grado di ottimizzare la dimensione di ogni singola riga o colonna può essere estremamente utile in una situazione del genere.

Quando dovresti utilizzare il design fluido?

Il design fluido non è una soluzione valida per tutti, così come non lo è il design reattivo o adattivo. Questi metodi non devono nemmeno essere utilizzati isolatamente: i principi di ciascuno di essi possono essere combinati per migliorare l'esperienza mobile.

Quando consideri un design fluido, dovresti pensare a:

  • Metriche del pubblico. Strumenti di monitoraggio come Google Analytics possono segmentare il tuo traffico per desktop, tablet e dispositivo mobile. Utilizza le metriche per sapere dove metti le tue risorse di progettazione.
  • Contenuto del sito. Se il tuo sito è relativamente leggero su testo, contenuti multimediali e funzionalità interattive, puoi farla franca con un design puramente fluido su alcune o tutte le pagine. Altrimenti, è meglio incorporare principi adattivi e reattivi. Mappare il tuo layout con wireframe è utile in questa fase.
  • Risorse. A causa della loro relativa semplicità, i progetti fluidi generalmente richiedono meno tempo, denaro e sforzi per essere incorporati da zero. Tuttavia, i costruttori di siti Web con modelli di pagina reattivi pronti all'uso hanno reso le pagine reattive complesse più accessibili per coloro che non hanno capacità di progettazione.

Infine, se incorpori elementi fluidi nelle tue pagine, prova il tuo sito su una vasta gamma di dimensioni dello schermo, dallo smartphone a una grande finestra del browser desktop. Senza istruzioni specifiche su come soddisfare dimensioni specifiche, un approccio puramente fluido potrebbe non perfezionare la tua UX. Ma può avvicinarti molto.

Le Critiche Crescenti Contro Google
Scoprire lo Sviluppo Web: La Programmazione come Arte
Scopri i Top Podcast SEO del 2024 e Mantieniti Aggiornato
Il ruolo delle finestre di dialogo nella progettazione di un'interfaccia utente web
Guida all'Integrazione di ChatGPT sul Tuo Sito Web
Utilizzo efficace di ChatGPT per la ricerca di parole chiave
Automatizzare le Campagne PPC con l'Intelligenza Artificiale Generativa
Aggiungere Coinvolgimento al tuo Sito con uno Sfondo Video CSS
Importanza delle Pagine di Destinazione per la Generazione di Lead e Incremento delle Vendite
Link Building

Link Building come parte della tua strategia di marketing può portare a risultati rivoluzionari. Seowebsite è specializzato nel Link Building e aiuta gli imprenditori a realizzare un forte profilo di link che contribuisce alla crescita online. Possiamo supportarvi anche in questo?