Io navigo su Internet ogni giorno, su più dispositivi. Uso Macbook Pro, iMac, PC, iPad, iPhone e sì anche la mia televisione. Quindi mi disturba davvero quando vedo siti web che non sono ottimizzati per risoluzioni di schermo più grandi o che impiegano due minuti per caricarsi sul mio dispositivo mobile.
Abbiamo tutti abbracciato il concetto di design reattivo. Pochissime persone litigano. In effetti, l'unico ripeto convincente che ho sentito di recente è che un cliente non è disposto a pagare per il tempo extra richiesto. Ma come in ogni nuova pratica, i miti sono cresciuti per contrapporlo.
Vediamo se riusciremo a scovare alcuni di questi malintesi ...
Sì, il web mobile sta esplodendo e sì è la forza trainante del design reattivo, ma quando pensiamo al design reattivo, dobbiamo prendere in considerazione qualcosa di più del semplice mobile. Con l'introduzione dei display retina e dei browser per videogiochi, gli utenti di Internet ora stanno visualizzando siti Web con risoluzioni di schermo più grandi e in molti contesti diversi.
Cerca di tenere conto dei diversi contesti degli utenti durante la progettazione e lo sviluppo di siti Web reattivi. Devi pensare a quale dispositivo sta usando un utente: l'utente è su un dispositivo mobile o a casa davanti al televisore? Devi pensare a dove si trova l'utente: l'utente è in fila al supermercato o si accampa nel deserto? Avere un buon contenuto non significa nulla se il tuo sito impiega dieci minuti per caricarsi mentre i tuoi utenti sono seduti sulla spiaggia con un margarita.
Il contenuto è tutto ma il contesto è ovunque ed è qualcosa su cui non hai assolutamente alcun controllo. Ecco perché, realisticamente, il tuo contenuto dovrebbe ridimensionarsi a qualsiasi risoluzione, grande o piccola. Disponiamo di una serie di strumenti che ci consentiranno di manipolare i layout, ottimizzare le dimensioni del testo e aumentare le prestazioni per qualsiasi contesto, quindi ricordati di utilizzarli.
Ricorda che il contesto si sta spostando sempre, motivo per cui è così importante bilanciare il layout visivo, le esigenze dell'utente e le prestazioni quando ci si avvicina a un design reattivo. Non si tratta solo di dispositivi mobili.
Ero solito dire che il web design reattivo non funzionerà per ogni progetto e che dipende dal caso d'uso. Bene, ho recentemente modificato il mio punto di vista e credo fermamente che se saremo designer e sviluppatori focalizzati sull'utente, dobbiamo affrontare ogni progetto con un design reattivo in mente.
I siti web a larghezza fissa possono limitare le risoluzioni dello schermo più grandi e più piccole. La linea di fondo è che i nostri siti web dovrebbero essere accessibili a tutti, indipendentemente dal dispositivo o dalla risoluzione dello schermo che stanno utilizzando, senza restrizioni.
Ho notato una tendenza emergente nel settore in cui designer e sviluppatori stanno costruendo siti Web reattivi che si adattano solo a determinate risoluzioni del dispositivo, e sono anche colpevole di questo. I tre dispositivi più comuni sono ovviamente laptop / desktop, iPad e iPhone (o altri dispositivi mobili). Come designer, dobbiamo renderci conto che il design reattivo riguarda i punti di rottura del design e rende il contenuto leggibile e accessibile a tutti, non solo agli utenti di determinati dispositivi.
Detto questo, se si progettano siti Web in un programma software, è importante disporre di una sorta di framework con punti di interruzione da cui partire. Suggerisco di crearne uno tuo. Ottimizza il tuo layout in base al contenuto. Il modo migliore per scoprire quali sono i punti migliori è abbozzare prima alcuni wireframe per avere un'idea, quindi puoi iniziare a deporre i pixel nel tuo software preferito. Assicurati di lavorare sulla stessa griglia durante il wireframing e la progettazione.
Se sei come me, codifichi i wireframe e crei un prototipo live. Questo mi ha aiutato molto con il mio flusso di lavoro reattivo perché posso creare un mockup fluido e aggiungere punti di interruzione al design mentre il disegno si rompe invece di provare a racchiudere i pixel in Photoshop.
Uno dei maggiori problemi che ho notato su molti siti Web reattivi è che la tipografia viene lanciata ai lupi quando i progettisti e gli sviluppatori scelgono di utilizzare i breakpoint dei dispositivi rispetto ai breakpoint di progettazione. A mio parere, la scelta del device over design mostra un totale disprezzo per il contenuto che viene pubblicato e l'utente che consuma quel contenuto. Il contenuto dovrebbe mantenere la sua leggibilità fino a quando non deve adattarsi per mantenere quella leggibilità. Il contenuto sarà sempre il re e l'accessibilità e la leggibilità dei tuoi contenuti dovrebbe sempre essere la massima priorità.
Uno dei modi in cui mi piace gestire il mantenimento della leggibilità del contenuto in un design reattivo è quello di utilizzare unità relative come ems per font-size, padding, margini e layout. Il design reattivo si basa su layout proporzionati e, a mio parere, gli ems sono perfetti.
Gli Ems sono unità relative scalabili rispetto alla dimensione font degli elementi padre, possono farti risparmiare molto tempo e problemi e aiutano a mantenere la struttura dell'intero layout. Cosa significa questo che chiedi? Beh, significa che quando la dimensione del carattere di base aumenta o diminuisce, il layout si regola in modo uniforme senza fondere nulla.
Ecco un esempio, diciamo che abbiamo trovato due punti di interruzione del progetto, uno per un monitor desktop molto grande con una risoluzione super e uno per un tablet piccolo. Diciamo anche che la nostra dimensione del font di base è 16px che equivale a 1.0em e noi aumentiamo la dimensione del font di base fino a 22px quando il sito viene visualizzato con una risoluzione di 3840 x 2160 (super risoluzione) e abbassiamo la dimensione del font di base in 14 px ad una risoluzione di 800 x 600 (piccolo laptop / tablet). Abbiamo modificato drasticamente le dimensioni del tipo e il layout del nostro sito Web in due punti di interruzione designati, uno grande e uno piccolo. Un'intestazione su 1.4em con una dimensione font 22px per risoluzioni maggiori significa che 1.4em è uguale a 30.8px e alla dimensione di carattere di base inferiore di 14px, 1.4em equivale a 19.6px. Anche se la dimensione dei caratteri è enormemente superiore a 3840 x 2160, non dobbiamo preoccuparci della rottura del layout perché è stata modificata. Diciamo che il nostro elemento contenente aveva una larghezza di 50em. Ad una risoluzione di 800 x 600 sarebbe 700 px ma alla risoluzione di 3840 x 2160 sarebbe 1100 px. Anche la nostra imbottitura e i nostri margini si adeguerebbero. A una risoluzione maggiore, la dimensione dei font e il layout impostato in ems hanno consentito al nostro design di scalare proporzionalmente il che rende i nostri contenuti più accessibili e più leggibili.
Lo scopo del design reattivo è rendere i tuoi contenuti accessibili a tutti, anche ai disabili, su tutte le risoluzioni e i dispositivi su schermo. Nascondere i contenuti non è mai una buona idea e, probabilmente, se devi nasconderlo non ne hai avuto bisogno per cominciare. Nascondere il contenuto lo rende illeggibile agli screen reader e ora stai rendendo il tuo contenuto inaccessibile a quelli con disabilità visive o cognitive. Tieni questo a mente, il contenuto dovrebbe essere universale su tutti i dispositivi, non punire i tuoi utenti limitando ciò che possono visualizzare su un dispositivo separato.
Detto questo, trovo ancora alcuni casi d'uso in cui display: none; torna utile. Per lo più tutti i casi d'uso riguardano una sorta di navigazione, e io uso display: none; su elementi di navigazione che cambiano forma su diversi dispositivi. Non è mai una buona idea limitare o nascondere il contenuto su dispositivi diversi perché molto probabilmente hai basato tale decisione su un presupposto e alcuni utenti, da qualche parte, avranno un'esperienza molto negativa.
Ci sono stati un certo numero di siti web che ho visto recentemente che hanno mostrato una mancanza di empatia nei confronti degli utenti con bassa larghezza di banda. La maggior parte di questi siti ha le stesse cose in comune, grandi immagini e grandi librerie JavaScript e molti di questi siti Web potrebbero essere stati ottimizzati se fossero stati progettati con un primo approccio mobile.
Poiché c'è ancora molta discussione sulle immagini reattive, è difficile per chiunque impegnarsi in una soluzione. Comprendo il dilemma, ma aspettare una soluzione perfetta che sia standard su tutti i browser e i dispositivi non rende il tuo sito web più facile da usare su dispositivi con larghezza di banda limitata. Trova una soluzione che risolva al meglio il tuo problema e corri con esso. Non trovare una soluzione significa problemi di prestazioni per tutti, e ciò vanifica completamente lo scopo del design reattivo.
Le librerie JavaScript di grandi dimensioni possono anche causare problemi su dispositivi più piccoli. Prova a trovare un modo per chiamarli condizionatamente in base alla risoluzione dello schermo o al tipo di dispositivo. Le prestazioni non dovrebbero essere un ripensamento quando si tratta di design reattivo.
Il web è esploso e con l'avvento della tecnologia mobile e smartphone possiamo accedere ai contenuti ovunque e in qualsiasi contesto. È importante assicurarsi che possiamo raggiungere tutti i nostri utenti e dare loro ciò che vogliono, quando lo vogliono. Il responsive design è una tecnica molto nuova e secondo me è la tecnica perfetta per unificare i nostri contenuti sul web.
Quali altri miti sul design reattivo ti piacerebbe sfatare? Ci sono degli svantaggi nel design reattivo? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine web reattiva via Shutterstock.