3 disastri del design reattivo - e come evitarli
I metodi di progettazione reattiva sono molto utili per gli sviluppatori perché ci permettono di servire il contenuto alla più ampia gamma di dispositivi senza dover mantenere versioni separate del sito e senza alcuni degli inconvenienti negativi ad altri metodi come il ridimensionamento e layout fluidi.
Questo articolo metterà in evidenza i primi 3 errori che i designer incontrano con i responsive design e fornirà alcune strategie per evitare questi errori.
Ridimensionamento rispetto a fluido rispetto a reattivo
C'è molta confusione su questi termini e spesso i progettisti li usano erroneamente in modo intercambiabile. In verità, ognuno di questi è distinti passi evolutivi nella tecnica del layout che sono emersi nel tempo in linea con i progressi della tecnologia.
I layout di ridimensionamento sono progettati per ridimensionare ogni elemento rispetto a ogni altro elemento . Sono reattivi nel senso che scaleranno il contenuto in modo dinamico in risposta ai cambiamenti nella dimensione del viewport. Il layout stesso rimane statico, cambiando le dimensioni di ogni elemento per mantenere un aspetto coerente.
Sopra: esempio di un layout di ridimensionamento a risoluzioni diverse: il design sacrifica la leggibilità per coerenza.
I layout fluidi sono diversi perché ridimensionano gli elementi del contenitore in relazione alle dimensioni del viewport . Questo si ottiene usando unità relative come em per superare il problema del restringimento del testo. Il design può essere rotto dall'utente ridimensionandolo.
Sopra: esempio di layout fluido a risoluzioni diverse: il design sacrifica la coerenza per la leggibilità.
I layout reattivi non scalano nulla. Invece, cambiano ciò che viene visualizzato in base alla dimensione della finestra.
Sopra: un esempio di layout reattivo a risoluzioni diverse.
Disastro 1) Menu di avvolgimento
Se si utilizza una barra di navigazione nella parte superiore della pagina, si suppone che un design reattivo lo "agganci" a un formato più compatto quando la pagina viene visualizzata su uno schermo piccolo. Ma questo non funziona sempre perfettamente se l'area di visualizzazione è più ampia del punto di interruzione, ma troppo piccola per visualizzare tutte le voci di menu in una singola riga. Il risultato è un menu che avvolge.
Ci sono diversi modi per risolvere questo problema. Il primo è ridurre il numero di elementi visualizzati orizzontalmente sulla barra di navigazione, ordinandoli in categorie e sottocategorie. È quindi possibile utilizzare gli elementi a discesa per visualizzare le sottocategorie quando viene selezionata una categoria.
Il secondo modo è quello di modificare il punto di rottura su un valore inferiore. Il numero effettivo da utilizzare è la larghezza alla quale la barra di navigazione inizia a fallire, non una dimensione specifica del dispositivo.
Il terzo modo è utilizzare un menu diverso per i dispositivi, ad esempio un cassetto scorrevole.
Disastro 2) Utilizzo di immagini a larghezza fissa
Le aree di contenuto sono generalmente impostate su una dimensione relativa al viewport. Pertanto, quando un'immagine a larghezza fissa è più ampia della dimensione dell'area, si verifica il ritaglio delle immagini.
Sopra: esempio di una brutta immagine a larghezza fissa troppo grande: ora ha barre di scorrimento e il contenuto viene spostato fuori dallo schermo.
È possibile evitare questo problema utilizzando unità relative per impostare la larghezza dell'immagine, oppure se si utilizza un framework che lo supporta (come Bootstrap) è possibile utilizzare una classe di immagini reattiva (ad es. Class = "img-responsive" ).
Sopra: Lo stesso elemento con un approccio di classe di immagine reattivo: ora la barra di scorrimento è sparita.
Disastro 3) Distorsione dell'elemento
Questo è un po 'più oscuro, ma in sostanza quello che succede quando il tuo layout è visualizzato su una piccola finestra è che tutte le colonne non gestite si comportano come righe. Questo è un problema perché la distorsione del contenuto modifica involontariamente la gerarchia del tuo progetto.
Sopra: la colonna diventa una riga, distorcendo il contenuto.
La soluzione è ovvia, tuttavia è sorprendente il numero di persone che ne fanno fatica: imposta semplicemente l'altezza, la larghezza e il riempimento dell'elemento in modo esplicito. Se si sposta fuori posizione e copre altri elementi, puoi forzarlo ad essere dove vuoi avvolgendolo in un div e impostando i margini.
La pianificazione aiuta a evitare errori
Questo articolo ha discusso solo i 3 disastri di progettazione reattivi più comunemente riscontrati, ma ci sono molti altri modi in cui un buon progetto può andare storto. Prevenire gli errori non è troppo difficile. I moderni browser dispongono di test di layout reattivi incorporati, quindi pianifica bene il tuo progetto e verifica spesso.