Sai già come usare le media query per creare un design reattivo, ma hai provato a usarli per qualcos'altro? È possibile che le query multimediali possano essere utilizzate in modo nativo per migliorare il flusso di lavoro?
Seguiteci mentre rompiamo completamente dalla tradizione e dirottiamo le richieste dei media per aiutarci a testare e modificare un progetto. Non hai mai visto query sui media come questa prima!
Oltre il design responsivo
Con l'aumento delle tecniche di progettazione reattiva, le domande dei media sono state gettate alla ribalta come il salvatore del web design moderno. Forniscono un metodo incredibilmente semplice e pratico per creare un sito che funziona su una miriade di dimensioni di schermo e browser.
"Oltre all'utilizzo di query multimediali nel mio prodotto finale per fornire un'esperienza utente migliore, forse posso utilizzare le query multimediali in un ambiente di testing locale per dare una mano con alcune attività di base."Tutto ciò è bello, ma volevo scuotere un po 'le cose. Ho iniziato a pormi una domanda interessante: per quale altro motivo posso utilizzare le media query?
Questa domanda porta ad un interessante brainstorming. Qui abbiamo una tecnologia che essenzialmente mi permette di cambiare il mio CSS in un modo booleano di base: se la finestra del mio browser è x, fai y. Questo mi riporta immediatamente a delle implicazioni per migliorare il mio flusso di lavoro. Oltre a utilizzare le query multimediali nel mio prodotto finale per fornire un'esperienza utente migliore, forse posso utilizzare le query multimediali in un ambiente di testing locale per dare una mano con alcune attività di base.
Correndo con questa linea di pensiero, vediamo cosa possiamo inventare!
Debug del tuo CSS e visualizzazione del DOM
Il layout CSS può essere una bestia difficile. Che tu sia uno sviluppatore nuovo di zecca o un veterano esperto, ci sono momenti in cui la posizione di qualcosa nella tua anteprima dal vivo non corrisponde esattamente a quello che stavi cercando nel tuo codice.
In queste circostanze, aiuta davvero a essere in grado di visualizzare solo ciò che accade nel DOM. Quando si ottiene un'immagine visiva della relazione genitore / figlio / fratello insieme a un'immagine decente di cosa stanno facendo i margini e il padding, si sarebbe sorpresi di quanti problemi si possa immediatamente individuare la risposta.
Chris Page ha pubblicato una soluzione nel lontano 2006 che è abbastanza utile per un tale scopo. Usa il selettore universale per applicare i contorni colorati ai diversi livelli dell'albero DOM in modo che tu possa facilmente capire come è strutturato il contenuto:
Ho preso questo frammento e ho fatto un ulteriore passo avanti aggiungendo alcuni colori di sfondo utili e poi lo ho avvolto in una query multimediale:
Perché dovresti farlo?
So che sembra pazzesco, ma in realtà è abbastanza utile. Quando si utilizza lo snippet qui sopra per risolvere i problemi del CSS, può essere un problema commentare e inserire il layout in modo da poter vedere il layout come dovrebbe essere. Con la query multimediale, puoi cambiare rapidamente e facilmente le due viste cambiando la dimensione della finestra del browser.
Ecco una pagina di esempio che normalmente appare a tutta larghezza nel mio browser:
Ora quando apro un po 'il lato della finestra del browser, vedo i miei helper del layout. Si noti che man mano che ci addentriamo nel DOM, il colore dello sfondo diventa più scuro.
Ora posso modificare il mio codice mentre visualizzo i risultati nella modalità di debug, quindi visualizzo la mia visualizzazione normale con un rapido trascinamento della finestra.
Guardalo in azione
Ora che abbiamo visto il codice, è il momento di lanciare la demo. Assicurati di ridimensionare la finestra del browser e guarda come appaiono gli helper del debug quando ottieni circa 1.100 pixel di larghezza.
demo: Clicca qui per il lancio.
Deve essere visualizzato su un desktop o un notebook.
Tweak Your Design
Un altro modo per utilizzare le query multimediali è aiutare a prendere decisioni tra sottili differenze in un progetto. Ad esempio, diciamo che non sei abbastanza soddisfatto dell'altezza della linea della tua copia del corpo e vorresti provare alcune opzioni. È possibile impostare alcune query multimediali diverse, ciascuna con la propria altezza di riga:
Ora, quando guardi il tuo disegno nel browser, puoi visualizzare le diverse iterazioni trascinando la finestra del browser dentro e fuori. Questo ti aiuterà a confrontare rapidamente le opzioni di altezza della linea e scegliere quale ti piace di più.
Puoi usare questa stessa tecnica per i colori di sfondo, i caratteri e qualsiasi altra cosa tu possa pensare.
Guardalo in azione
Questa volta mentre ridimensionate il browser, osservate come influisce sull'altezza della linea. Questo sarebbe sicuramente un modo decente per confrontare rapidamente le tre opzioni.
demo: Clicca qui per il lancio.
Deve essere visualizzato su un desktop o un notebook.
Confronta il design del browser con Photoshop Mockup
Se si costruiscono spesso siti Web da composizioni di Photoshop, è utile poter confrontare la versione live con il modello che si sta tentando di emulare.
Ancora una volta, una query multimediale ci fornisce un modo semplice per scambiare tra le due versioni. Qui quello che ho fatto è impostare tutto il mio contenuto su un'opacità del 40%, poi ho portato il mio comp originale come sfondo del corpo. Questo crea una sorta di effetto di sovrapposizione che mi aiuta a individuare le principali differenze.
Guardalo in azione
Per quest'ultima dimostrazione, un ridimensionamento del browser eliminerà l'opacità di tutti i contenuti della pagina e visualizzerà un'immagine di opacità completa del mockup di Photoshop in modo da poterli confrontare.
demo: Clicca qui per il lancio.
Deve essere visualizzato su un desktop o un notebook.
Conclusione
Lo scopo di questo articolo è più esplorativo che educativo. L'intenzione è di avviare una discussione sull'opportunità o meno che le query sui media abbiano un potenziale per scopi diversi dal responsive design.
Tutti e tre i miei esperimenti di cui sopra sono rivolti ai test di progettazione locali, quindi non abbiamo nemmeno bisogno di preoccuparci della semantica, della compatibilità con i browser e di altri problemi che tipicamente si presentano con questo tipo di conversazione. Invece si tratta di trucchi utili che migliorano il tuo flusso di lavoro personale.
Riesci a pensare a qualcosa di divertente o utile da fare con le domande dei media? Fateci sapere i vostri pensieri nella sezione commenti qui sotto.