Il design reattivo non è una moda nata a causa di una fredda tecnica CSS, è una risposta a un problema. Ricordalo sempre e chiediti continuamente se stai affrontando questo problema in modo adeguato. Se si utilizza il copia e incolla per inserire i punti di interruzione delle query multimediali, la soluzione potrebbe essere difettosa.
Discutiamo sul perché esistono le query sui media e su come possiamo sfruttarle per risolvere veramente il dilemma del web ubiquitario. Parliamo del motivo per cui dovresti lasciare che il tuo contenuto determini i punti di interruzione di un layout, non le dimensioni dello schermo ipotetiche.
Questo articolo fa parte delle nostre serie su "guardare oltre il design del desktop", offerto in collaborazione con Heart Internet VPS.
L'idea dietro le media query
Per iniziare correttamente questo dibattito, è necessario discutere perché le richieste di media sono diventate così popolari. La risposta è, naturalmente, che? Responsive Design ,? un termine coniato da Ethan Marcotte, è un modo fantastico per affrontare un problema in continua crescita per i web designer.
Mentre tutti si lamentavano senza sosta su come il? Web mobile? stava per superare quello tradizionale, la rivoluzione che si è svolta è stata molto più drastica: il web è diventato 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ù vincolato ai muri che avevamo precedentemente stabilito. L'ho detto prima, ma vale la pena ripeterlo. Mentre tutti si lamentavano senza sosta su come il? Web mobile? stava per superare quello tradizionale, la rivoluzione che si è svolta è stata molto più drastica: il web è diventato onnipresente.
A questo punto, non accediamo al web da un singolo punto. Non abbiamo rinunciato ai nostri laptop in favore degli smartphone come? Esperti? predetto. Invece, il web è ovunque noi 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 design reattivo 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. Usando le media query, possiamo presentare CSS specifici a qualsiasi numero di dimensioni di viewport differenti e assicurarci che ognuno abbia la migliore esperienza possibile.
Il problema con il design reattivo
La sezione precedente non è uno sproloquio semi-storico inteso a riempire lo spazio, è un aspetto importante degli obiettivi che il design responsivo è destinato a raggiungere. La domanda diventa allora, soddisfa questi obiettivi? Il design reattivo affronta adeguatamente il problema dell'ubiquità?
La risposta è complicata, nel migliore dei casi posso dire, "dipende da come lo fai." Questa è una dichiarazione confusa, vero? La progettazione reattiva è semplice: utilizza le query multimediali per offrire CSS personalizzati a dimensioni di viewport differenti. È così che tutti si avvicinano giusto? Quindi, come può esserci un modo giusto e sbagliato?
La complessità sorge quando iniziamo a discutere di una parte cruciale di questa tecnica: quale media query dovrei usare? O mettere un modo diverso, quali? Punti di interruzione? dovrei scegliere come target CSS personalizzati? L'attuale risposta popolare inizia prevedibilmente con il migliore? Mobile? dispositivi in giro: l'iPhone e l'iPad (suggeriscono i commenti degli utenti Android arrabbiati). Da questi archetipi stabiliamo il cosiddetto? Generico? dimensioni di smartphone e tablet. Poi ci spostiamo e indirizziamo computer portatili e piccoli desktop e infine schermi di grandi dimensioni. Un set standard di media query, come questo di CSS-Tricks, ha in genere nove o dieci punti di interruzione prestabiliti.
Cosa accadrebbe se ci concentrassimo sulle esigenze di un design specifico anziché su un ipotetico caso d'uso del dispositivo? E se costruissimo layout che funzionassero semplicemente ovunque?Per essere onesti, questo sistema funziona in una certa misura. Abbiamo visto tutti molti grandi siti responsive costruiti utilizzando un set simile a quello di Coyier. Tuttavia, non posso fare a meno di pensare che questo è in qualche modo ripetere lo stesso errore che abbiamo fatto progettando? Siti mobili? alcuni anni fa. L'intero focus qui è sul dispositivo che visualizza il sito. Prima ancora di costruire il sito, abbiamo in mente questi punti di rottura.
Ma i dispositivi cambiano. Abbiamo già stabilito che il Web viene collegato praticamente a tutto con un interruttore di alimentazione, quindi perché stiamo ponendo ancora una volta l'accento sulle dimensioni dello schermo attualmente comuni? C'è un'alternativa migliore? Cosa accadrebbe se ci concentrassimo sulle esigenze di un design specifico anziché su un ipotetico caso d'uso del dispositivo? E se costruissimo layout che funzionassero semplicemente ovunque?
Progettazione responsive focalizzata sui contenuti
I problemi di cui sopra con le richieste di media prestabilite mi sono venuti in mente solo quando ho scavato e ho iniziato a produrre un lavoro reattivo da solo. In teoria, i suggerimenti standard sono fantastici ma una volta applicati a un progetto complesso scoprirai che questi punti di interruzione non sempre lo coprono. Il problema, come hanno scoperto i progettisti del Boston Globe una volta che il sito è stato pubblicato, è che sorgono problemi? (per la cronaca, quel progetto è fantastico e tutti i problemi di layout sono stati in gran parte risolti). Le cose si complicano quando il design è di una dimensione che non hai tenuto conto e devi entrare e riparare i buchi dopo il fatto.
Lo dico come un appassionato fan di Apple: smetti di progettare siti web per l'iPhone.
La mia domanda è, perché non iniziamo da lì? Invece di entrare in un progetto con una serie di dispositivi, e di conseguenza le domande dei media, in mente, perché non lasciamo decidere il design? Ogni layout di pagina Web ha un punto in cui le dimensioni del browser riducono la sua integrità.Il nostro lavoro di designer, alla luce del problema dell'ubiquità, dovrebbe essere quello di trovare quella dimensione e renderne conto, quindi farla schiumare, risciacquare e ripetere fino a quando tutti i punti deboli non saranno presi in considerazione.
Lo dico come un appassionato fan di Apple: smetti di progettare siti web per l'iPhone. Invece, progetta un sito Web che mantenga la sua integrità in quanto la sua dimensione di visualizzazione è ridotta a qualsiasi stato possibile. Tieni a mente i dispositivi specifici come guida per il tuo progetto (ad esempio: i dispositivi più piccoli tendono ad essere basati sul tocco, quindi crea collegamenti di grandi dimensioni), ma non mettere i paraocchi e non guardare l'immagine più grande: il tuo design dovrebbe apparire bene su qualsiasi schermo
Un nuovo flusso di lavoro
Che aspetto ha un flusso di lavoro di progettazione reattivo concentrato sui contenuti? È più semplice di quanto pensi. Ovviamente, hai bisogno di un punto di partenza di qualche tipo. Se vuoi iniziare il mobile e andare su, bene. Se vuoi iniziare in grande e scendere, anche grande. Personalmente trovo molto difficile scavare davvero in un disegno e farlo bene se sto iniziando a livello mobile, ma ci sono molti argomenti validi per farlo in questo modo.
Qualcosa di magico accade quando segui questo flusso di lavoro.In via ipotetica, diciamo che hai iniziato con un sito ampio di 1020 pixel. Guardalo sullo schermo più grande su cui puoi mettere le mani e assicurati che sia perfetto. Ora trascina la finestra e riducila finché il disegno non diventa brutto. C'è il tuo primo punto di interruzione. Imposta una query multimediale per quel punto e aggiusta tutto ciò che devi risolvere. Una volta che hai finito, prendi quella finestra e trova il prossimo punto di bruttezza. Ripeti questi passaggi finché non sei soddisfatto dell'intervallo che hai considerato.
Ma per quanto riguarda l'iPad? Che ne pensi 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 appaia bene praticamente di qualsiasi dimensione. Se lo hai fatto bene, quando lo fai apparire sul tuo telefono o tablet, sarà fantastico.
Solo layout
Tieni presente che questa discussione si riferisce solo ai rapporti di layout. Non esci assolutamente dalla funzionalità di test su diversi browser e dispositivi. Il design reattivo non fa nulla per tenere conto del fatto che diversi motori di browser interpretano in modo diverso HTML, CSS e JavaScript.
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 di visualizzazione. Tuttavia, una volta avviati i pegging dei nostri progetti su una manciata di dispositivi, siamo tornati indietro dove abbiamo iniziato. Il tuo obiettivo, invece, dovrebbe essere quello di creare un layout così versatile da poter gestire quasi tutte le dimensioni di viewport generate.
Tutto ciò è 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 uno sguardo a questo articolo per capire come un flusso di lavoro di progettazione reattivo focalizzato sui contenuti potrebbe sembrare allo stato selvatico.