Responsive Design: perché lo stai facendo male

Il responsive design non è una moda nata a causa di una tecnica CSS interessante, è una risposta a un problema. Ricordalo sempre e chiediti costantemente se stai davvero affrontando adeguatamente quel problema. Se si utilizza copia e incolla per inserire i punti di interruzione della query multimediale, la soluzione potrebbe essere difettosa.

Discutiamo perché esistono query sui media e come possiamo sfruttarle per risolvere veramente il dilemma dell'onnipresente web. Parliamo del perché dovresti lasciare che il tuo contenuto determini i punti di interruzione di un layout, non le ipotetiche dimensioni dello schermo.

Questo articolo fa parte della nostra serie "guardare oltre la progettazione del desktop", offerta in collaborazione con Heart Internet VPS.

L'idea dietro alle media query

Per iniziare correttamente questo dibattito, è necessario discutere sul perché le richieste dei media sono diventate improvvisamente così popolari. La risposta è ovviamente che "Responsive Design", un termine coniato da Ethan Marcotte, è un modo fantastico per affrontare un problema sempre crescente per i web designer.

Mentre tutti continuavano a insistere su come il "web mobile" avrebbe superato quello tradizionale, la rivoluzione che ebbe luogo fu molto più drastica: il web divenne onnipresente.

Questo "problema" è grande per il mondo nel suo insieme, ma un vero mal di testa per noi. Nell'ultimo decennio, il web mondiale si è trasformato in qualcosa di nuovo. Non è più delimitato dalle mura che avevamo precedentemente stabilito. L'ho già detto prima, ma vale la pena ripeterlo. Mentre tutti continuavano a insistere su come il "web mobile" avrebbe superato quello tradizionale, la rivoluzione che ebbe luogo fu molto più drastica: il web divenne onnipresente.

A questo punto, non accediamo al Web da un unico punto. Non abbiamo rinunciato ai nostri laptop a favore degli smartphone, come previsto dagli "esperti". Invece, il web è ovunque siamo. Non è solo nei nostri telefoni e computer, è nei nostri tablet, iPod, sistemi di gioco, televisori e persino automobili.

Questa tendenza continuerà solo col passare del tempo. Il responsive design ci porta oltre una stagione di creazione di siti mobili separati e in un'era in cui sviluppiamo un sito che si evolve e si adatta al dispositivo su cui viene visualizzato. Utilizzando le query multimediali, possiamo presentare CSS specifici a qualsiasi numero di dimensioni di finestre diverse e assicurarci che tutti abbiano la migliore esperienza possibile.

Il problema con il design reattivo

La sezione sopra non è un rant semi-storico destinato a riempire lo spazio, è uno sguardo importante agli obiettivi che il design reattivo è destinato a raggiungere. La domanda diventa allora: raggiunge questi obiettivi? Il design reattivo affronta adeguatamente il problema dell'ubiquità?

La risposta è complicata, nella migliore delle ipotesi posso dire "dipende da come lo fai." È un'affermazione confusa, vero? Il design reattivo è semplice: utilizza le query multimediali per offrire CSS personalizzati a dimensioni di finestre diverse. È così che tutti lo affrontano, giusto? Quindi come può esserci un modo giusto e sbagliato?

La complessità sorge quando iniziamo a discutere una parte cruciale di questa tecnica: quali media query dovrei usare? O in altri termini, quali "punti di interruzione" dovrei scegliere come target per i CSS personalizzati? La risposta popolare attuale inizia prevedibilmente con i migliori dispositivi "mobili" in circolazione: l'iPhone e l'iPad (cue commenti degli utenti Android arrabbiati). Da questi archetipi stabiliamo le cosiddette dimensioni "generiche" di smartphone e tablet. Quindi ci spostiamo verso l'alto e ci rivolgiamo a laptop e desktop piccoli e infine a schermi di grandi dimensioni. Un set standard di media query, come questo da CSS-Tricks, in genere ha nove o dieci punti di interruzione prestabiliti.

E se ci concentrassimo sulle esigenze di un design specifico anziché su un ipotetico caso d'uso del dispositivo? E se costruissimo layout che funzionavano semplicemente ovunque?

Ad essere onesti, questo sistema funziona in una certa misura. Abbiamo visto tutti molti grandi siti reattivi costruiti usando un set simile a quello di Coyier sopra. Tuttavia, non posso fare a meno di pensare che questo stia ripetendo in qualche modo lo stesso errore che abbiamo fatto progettando "siti mobili" qualche anno fa. L'intero focus qui è sul dispositivo che visualizza il sito. Prima ancora di costruire il sito, abbiamo in mente questi punti di interruzione.

Ma i dispositivi cambiano. Abbiamo già stabilito che il Web viene collegato praticamente a tutto con un interruttore di accensione, quindi perché stiamo ancora una volta ponendo così tanta enfasi sulle dimensioni dello schermo attualmente comuni? C'è un'alternativa migliore? E se ci concentrassimo sulle esigenze di un design specifico anziché su un ipotetico caso d'uso del dispositivo? E se costruissimo layout che funzionavano semplicemente ovunque?

Design reattivo incentrato sul contenuto

I problemi di cui sopra con domande sui media prestabilite mi sono venute in mente solo quando ho scavato e ho iniziato davvero a produrre lavoro reattivo da solo. In teoria, i suggerimenti standard sono fantastici, ma una volta applicati a un design complesso scoprirai che quei punti di interruzione non lo coprono sempre. Il problema, come i progettisti di Boston Globe hanno scoperto rapidamente una volta che il sito è stato pubblicato, è che i problemi sorgono "nel mezzo" (per la cronaca, quel progetto è fantastico e qualsiasi problema di layout è stato ampiamente risolto). Le cose diventano disordinate quando il design ha dimensioni che non sono state prese in considerazione e devi entrare e rattoppare i buchi dopo il fatto.

Lo dico da appassionato fan di Apple: smetti di progettare siti Web per iPhone.

La mia domanda è: perché non iniziamo da lì? Invece di entrare in un progetto con un set di dispositivi e, di conseguenza, in termini di media query, perché non lasciamo decidere il design? Ogni layout di pagina Web ha un punto in cui le dimensioni del browser ne riducono l'integrità. Il nostro lavoro come designer, alla luce del problema dell'ubiquità, dovrebbe essere quello di trovare quella dimensione e renderne conto, quindi schiumare, sciacquare e ripetere fino a quando tutti i punti deboli non vengono presi in considerazione.

Lo dico da appassionato fan di Apple: smetti di progettare siti Web per iPhone. Invece, progettare un sito Web che mantenga la sua integrità poiché le dimensioni della finestra sono ridotte a qualsiasi stato possibile. Tieni a mente dispositivi specifici come guida per il tuo design (esempio: i dispositivi più piccoli tendono ad essere basati sul tocco, quindi allarga i link), ma non mettere i paraocchi e non guardare l'immagine più grande: che il tuo design dovrebbe apparire bene su qualsiasi schermo.

Un nuovo flusso di lavoro

Che aspetto ha un flusso di lavoro di progettazione responsive focalizzato sul contenuto? È più semplice di quanto pensi. Ovviamente, hai bisogno di un punto di partenza di qualche tipo. Se vuoi iniziare a utilizzare il cellulare e salire, fantastico. Se vuoi iniziare in grande e scendere, anche alla grande. Personalmente trovo molto difficile scavare davvero in un design e farlo bene se sto iniziando a livello mobile, ma ci sono molti solidi argomenti per farlo in questo modo.

Qualcosa di magico accade quando segui questo flusso di lavoro.

Ipoteticamente, supponiamo che tu abbia iniziato con un sito ampio, largo 1020 px. Dai un'occhiata sullo schermo più grande su cui puoi mettere le mani e assicurati che sia fantastico. Ora trascina la finestra e rendila più piccola fino a quando il design diventa brutto. C'è il tuo primo breakpoint. Impostare una query multimediale per quel punto e correggere tutto ciò che è necessario affrontare. Una volta finito, prendi quella finestra e trova il prossimo punto di bruttezza. Ripeti questi passaggi fino a quando non sei soddisfatto dell'intervallo che hai rappresentato.

Ma per quanto riguarda l'iPad? Che dire del Kindle Fire o dell'ultimo tentativo di Samsung di essere rilevante? Qualcosa di magico accade quando segui questo flusso di lavoro. Hai appena fatto in modo che il layout sia adatto a qualsiasi dimensione. Se lo hai fatto bene, quando lo tiri su sul tuo telefono o tablet, sembrerà fantastico.

Solo layout
Ricorda che questa discussione si riferisce solo ai rapporti di layout. Non esci assolutamente dal testare le funzionalità su diversi browser e dispositivi. Il responsive design non fa nulla per spiegare il fatto che motori di browser diversi interpretano HTML, CSS e JavaScript in modo diverso.

Conclusione

Per riassumere, le query multimediali e il design reattivo ci forniscono uno strumento incredibilmente potente per tenere conto del fatto che i siti Web vengono visualizzati da tutti i tipi di schermi e dimensioni delle finestre. Tuttavia, una volta che iniziamo a collegare i nostri progetti a una manciata di dispositivi, siamo tornati da dove siamo partiti. Il tuo obiettivo invece dovrebbe essere quello di costruire un layout così versatile da poter gestire quasi tutte le dimensioni del viewport che gli vengono lanciate.

Tutto è bello in teoria, ma dov'è l'esempio? Il punto di partenza di questa discussione è venuto da un mio recente tentativo di costruire una galleria di immagini reattiva. Dai un'occhiata a questo articolo per vedere come un flusso di lavoro di progettazione reattiva focalizzato sul contenuto potrebbe apparire in natura.