Una guida completa al fissaggio Responsive Problemi di progettazione nel 2023

La maggior parte dei siti Web che utilizzano responsive il design lo sta utilizzando in modo errato, il che porta a problemi. L'approccio generale a responsive il design è pigro e, se segui questo approccio, alcuni dei tuoi responsive i siti funzioneranno in modo assolutamente impeccabile e molti di loro no. Per quelli che funzionano perfettamente, probabilmente si tratterà di una questione di fortuna.

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

Desktop i layout differiscono dai layout dei tablet e dei dispositivi mobili perché normalmente sono a più colonne, normalmente includono enormi quantità di spazio bianco e tutto è semplicemente "grande", in mancanza di una parola migliore. Se responsive vengono utilizzate tecniche di progettazione, questo layout a più colonne dovrebbe essere suddiviso in un'unica colonna.

Se è tutto tuo responsive il design lo fa effettivamente quando viene visualizzato su un dispositivo mobile, potresti avere un problema. Quanto un problema dipende dal tuo atteggiamento, ma i bravi designer si preoccupano di una buona UX. Si preoccupano ancora di più della cattiva UX. Se il tuo sito ha una cattiva UX e vuoi essere un buon designer, allora devi aggiustarlo.

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 orizzontalmente e non apporti altre modifiche, ovviamente 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 designer devono capire è che con un sito web, abbiamo bisogno del volume per cambiare. 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 fanno effettivamente è trovare soluzioni ai problemi. Pertanto è il lavoro perfetto per te trovare il modo migliore per fornire il contenuto principale del sito senza trasformare l'esperienza dell'utente in una frustrante festa di scorrimento. Ecco alcune delle cose che vale la pena considerare quando si scompone a desktop progettare in un design mobile:

1. "Mobile First" è stupido

Mi dispiace, ma è così. Tutti lo stanno ripetendo a pappagallo, ma come concetto non è molto utile perché se progetti davvero "prima i dispositivi mobili", sarà da incubo cercare di ridimensionarlo a un desktop design a meno che tu non stia rispettando un layout puramente a colonna singola fino in fondo.

L'approccio migliore è progettare fisicamente almeno tre (e fino a 11) layout diversi. 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:

• Enorme Desktop
• Ordinario Desktop
• 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 possibilità diverse, è ovvio perché un approccio pigro "taglia unica" è così allettante, ma è anche ovvio perché ci sono così tanti modi per rovinarlo.

2. Addomestica il footer della pagina tentacolare

Lo strumento desktop il design include uno di quegli enormi piè di pagina grossi con un sacco di link interni? Ottimo, probabilmente sarà molto utile su a desktop. Su un cellulare, sembra ridicolo ed è più di un semplice tocco fastidioso. Puoi progettare piè di pagina di pagina completamente diversi per ogni punto di interruzione del dispositivo. Basta rendere disponibili quei collegamenti a piè di pagina in una finestra di dialogo modale e tutti vinceranno.

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 compaiono solo durante la visualizzazione su quel dispositivo. Più un dispositivo è popolare, più dovrai lavorare per sbarazzarti di eventuali 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. È più probabile che Google ti consideri come persona non grata se nascondi il contenuto principale e poi pubblichi una serie di annunci. È perché quel contenuto principale è ciò su cui Google ti ha indicizzato in base e quando quel 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 stia "punendo" gli utenti mobili, ma questa è un'idea un po' assurda. La realtà è che stai nascondendo il contenuto perché è lì per migliorare il desktop esperienza, ma non contribuisce a sufficienza al messaggio centrale del sito da renderlo necessario

5. Puoi usare sfondi alternativi

Recentemente mi è stato assegnato un incarico ridicolo in cui il proprietario del sito aveva pagato per uno sfondo particolare e voleva che tutto il contenuto fosse personalizzato per adattarsi a quello sfondo. Gli elementi del punto 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, è necessario riprogettare il layout, 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 limitarlo 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 progettato male all'inizio posto. Rispetta i tuoi principi, perché quel cliente sarà un problema 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. Altrowise rischi di creare 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 compressione di un sito dipende dall'ordine in cui i div sono impilati. Devi impilare i tuoi div nell'ordine corretto in modo che vengano compressi 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") poiché su un cellulare qualunque cosa fosse a sinistra oa destra potrebbe essere spostata 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 dei caratteri con CSS e puoi impostare diverse dimensioni dei caratteri e persino diversi tipi di carattere (se avranno un aspetto migliore) per particolari dimensioni di visualizzazione. Puoi trovare le dimensioni di visualizzazione con le query multimediali CSS, quindi modificare la dimensione del carattere o il tipo di carattere in modo che corrisponda a valori che visualizzino il contenuto con il massimo vantaggio sul tipo di dispositivo scelto come target.

8. È meglio usare responsive immagini

Tutte le immagini dovrebbero esserlo responsive quando possibile. Questo porta con sé che a volte i dettagli di un'immagine possono andare persi se viene ridimensionata 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 Artur Martynowski