Quando il responsive design va male (e come risolverlo)

La maggior parte dei siti Web che utilizzano il responsive design lo utilizzano in modo errato, il che porta a problemi. L'approccio generale al design reattivo è pigro e, se segui questo approccio, alcuni dei tuoi siti reattivi funzioneranno in modo assolutamente impeccabile e molti non lo faranno. Per quelli che funzionano perfettamente, probabilmente sarà una questione di fortuna.

Il concetto di design reattivo è semplice, ma la sua semplicità è ciò che porta le persone a commettere errori così facilmente. I progettisti con anni di esperienza si sono abituati a progettare per il desktop e quindi di solito pianificano un progetto basato su un layout desktop.

I layout del desktop differiscono dai layout dei tablet e dai layout mobili perché normalmente sono multi-colonna, normalmente includono enormi quantità di spazio bianco e tutto è semplicemente "grande", per mancanza di una parola migliore. Se vengono utilizzate tecniche di progettazione reattiva, questo layout multi-colonna dovrebbe suddividersi in una singola colonna.

Se questo è tutto ciò che il tuo design reattivo fa quando viene visualizzato su un dispositivo mobile, potresti avere un problema. Quanto di un problema dipende dal tuo atteggiamento, ma i buoni designer si preoccupano della buona UX. Si preoccupano ancora di più del cattivo UX. Se il tuo sito ha una cattiva UX e vuoi essere un buon designer, allora devi risolverlo.

Questo problema con la compressione di un layout a più colonne in una singola colonna è che non funziona su base proporzionale. Se devi rimpicciolire qualcosa in orizzontale e non apporti altre modifiche, è evidente che si espanderà verticalmente.

Versare l'acqua da un bicchiere corto e grasso in uno alto e sottile, e l'acqua assume la forma del bicchiere alto e sottile, mentre il volume dell'acqua rimane esattamente lo stesso. Ciò che i progettisti devono capire è che con un sito web, abbiamo bisogno che il volume cambi. Normalmente non è una buona idea cambiare la forma ma mantenere il contenuto di preciso lo stesso. Qualcosa deve dare.

Qualcuno che si è davvero guadagnato il titolo di designer capirà che questo rappresenta un problema da risolvere, e ciò che i designer effettivamente fanno è trovare soluzioni ai problemi. Quindi è il lavoro perfetto per te per trovare il modo migliore per fornire il contenuto principale del sito senza trasformare l'esperienza utente in un frustrante festeggiamento. Ecco alcune delle cose che vale la pena considerare quando si abbatte un design desktop in un design mobile:

1. "Mobile First" è un idiota

Ci dispiace, ma lo è. Ognuno sta pappagliando questo, ma come concetto non è molto utile perché se si progetta veramente "mobile first", allora sarà da incubo tentare di ridimensionarlo su un desktop design a meno che non si stia seguendo un layout puramente a colonna singola fino in fondo su.

L'approccio migliore consiste nel progettare fisicamente almeno tre layout diversi (e fino a 11). I minimi che puoi considerare includono:

  • Desktop
  • Paesaggio mobile
  • Ritratto mobile

Se vuoi essere un po 'più approfondito, dovresti anche considerare:

  • Tablet Paesaggio
  • Tablet di ritratto

E l'elenco completo, se vuoi essere assolutamente completo, sarebbe:

  • Desktop enorme
  • Desktop ordinario
  • Grande tavoletta panoramica
  • Tablet grande ritratto
  • Piccola tavoletta panoramica
  • Tavoletta per ritratti
  • Grande paesaggio mobile
  • Mobile ritratto di grandi dimensioni
  • Piccolo paesaggio mobile
  • Piccolo ritratto mobile
  • Minuscolo / Indossabile

Con così tante diverse possibilità, è ovvio perché un approccio "one-size-fits-all" pigro è così allettante, ma è anche ovvio perché ci sono tanti modi per rovinarlo.

2. Addomestica il footer della pagina tentacolare

Il design del desktop include uno di quegli enormi piè di pagina pesanti con un sacco di link interni? Ottimo, probabilmente sarà molto utile su un desktop. Su un cellulare, sembra ridicolo, ed è più di un semplice fastidio. È possibile progettare footer di pagina completamente diversi per ogni punto di interruzione del dispositivo. Rendi i link ai piè di pagina disponibili in una finestra di dialogo modale e tutti vincono.

3. Accetta alcuni piccoli accorgimenti su dispositivi oscuri

Se un particolare dispositivo non è comune, non è poi così male se ci sono alcune stranezze nel design che appaiono solo durante la visualizzazione su quel dispositivo. Più un dispositivo è popolare, più dovrai lavorare per eliminare le stranezze che appaiono su di esso.

4. Puoi nascondere il contenuto che non contribuisce al messaggio principale

La parte più importante di un sito è il messaggio principale. Sì, su alcuni siti, la parte più importante è la pubblicità e esistono solo per fornire quella pubblicità, ma se devi scegliere tra mostrare il messaggio principale o mostrare la pubblicità, scegli il messaggio. Google è più incline a considerarti come persona non grata se si nascondono i contenuti di base e quindi vengono offerti numerosi annunci. È perché il contenuto principale è quello su cui Google ti ha indicizzato, e quando tale contenuto non viene mostrato, Google lo considera ingannevole.

Inoltre, cose come le immagini puramente decorative o estetiche, ma che non contribuiscono in modo significativo al messaggio principale, sono candidati alla riduzione o al nascondimento del tutto.

Alcune persone hanno proposto che nascondere i contenuti sia "punire" gli utenti mobili, ma questa è un'idea un po 'assurda. La realtà è che stai nascondendo il contenuto perché è lì per migliorare l'esperienza desktop, ma non contribuisce sufficientemente al messaggio principale del sito perché sia ​​necessario

5. Puoi usare sfondi alternativi

Recentemente mi è stato assegnato un compito ridicolo in cui il proprietario del sito aveva pagato per un particolare background e volevo che tutti i contenuti fossero personalizzati per adattarsi a quello sfondo. Gli elementi dei punti elenco dovevano essere un numero esatto di caratteri, il numero totale di righe doveva essere esatto e così via.

Questa è decisamente una cattiva pratica nel web design, perché dovresti mai progettare il contenuto per adattarlo a un layout. Il layout dovrebbe sempre essere progettato per contenere il contenuto. Se per qualche motivo il layout non può contenere il contenuto, allora il layout dovrebbe essere ridisegnato, non il contenuto. È abbastanza possibile utilizzare sfondi diversi per dispositivi diversi. Sei un designer. Usa la tua immaginazione.

Il contenuto è la linfa vitale di un sito web, e modificarlo o restringerlo in base ai vincoli di un layout è un chiaro segno di dilettantismo da parte del proprietario del sito e un segno che il layout è stato mal progettato nel primo posto. Rispetta i tuoi principi, perché quel cliente sarà guai se acconsenti.

Il cliente ha sempre ragione, tranne quando quel cliente è un cliente di web design. I clienti raramente sanno cosa è meglio per loro, ed è importante affermarsi come web designer che sa come fornire il risultato giusto per il cliente. Altrimenti rischi di creare ancora un altro sito web abominio.

6. Controlla manualmente l'ordine di collasso (o evita riferimenti spaziali all'interno del contenuto)

Questo è un problema complesso. L'ordine di collasso di un sito dipende dall'ordine in cui i div sono impilati. È necessario impilare i div nell'ordine corretto in modo che possano collassare nell'ordine corretto.

Uno dei problemi che derivano dai costruttori di siti web WYSIWYG con drag-n-drop è che normalmente non è possibile dettare l'ordine in cui i div vengono impilati e, nei casi molto rari in cui è possibile farlo, il tuo duro lavoro viene annullato ogni volta fai la modifica più piccola, e dovrai tornare indietro e modificare nuovamente il codice sorgente.

Se non controlli l'ordine di collasso, questa immagine spiega chiaramente cosa può andare storto. Inoltre, dovresti evitare di fare riferimenti spaziali (come "nella colonna a sinistra") come su un cellulare qualunque sia a sinistra oa destra potrebbe essere spostato sopra o sotto, più se pensi che il lettore sia abbastanza importante da scorrere per vedere, allora dovranno scorrere di nuovo indietro, e non è bello.

7. Potresti aver bisogno di dimensioni di font diverse per layout diversi

È facile controllare la dimensione del carattere con i CSS e puoi impostare diverse dimensioni dei caratteri e persino diversi tipi di carattere (se appariranno migliori) per particolari dimensioni di visualizzazione. È possibile trovare le dimensioni dello schermo con le query multimediali CSS e quindi modificare la dimensione del carattere o la faccia del font in modo che i valori mostrino il contenuto al massimo vantaggio sul tipo di dispositivo che si sta utilizzando.

8. È meglio usare immagini reattive

Tutte le immagini dovrebbero essere reattive quando possibile. Ciò comporta che a volte i dettagli di un'immagine possono essere persi se vengono ridimensionati troppo. Una soluzione a questo problema è rendere l'immagine cliccabile in modo che l'utente possa visualizzare una versione ingrandita dell'immagine separata dal contenuto. Il modo normale per farlo è tramite una finestra di dialogo modale.

immagine di cortesia per gentile concessione di

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.