Il web design reattivo è uno degli argomenti più caldi tra designer e sviluppatori in questo momento. Se non sei proprio sicuro di cosa si tratta, ti guideremo attraverso ciò che è, come funziona e in che modo le query multimediali CSS sono qualcosa che devi iniziare a incorporare nei tuoi progetti.
Per completare il tutto, finiremo con una ventina di progetti reattivi che utilizzano le media query per presentare esperienze espressamente rivolte a visitatori diversi.
#
Quali sono le query sui media?
CSS3 ha prodotto un sacco di fantasiosi effetti visivi come ombre e animazioni, ma per quanto riguarda i miglioramenti pratici? C'è qualcosa in CSS3 che migliora effettivamente il modo in cui puoi costruire siti web da un punto di vista dell'usabilità?
La risposta è clamorosa? Sì? ed è dovuto in gran parte all'inclusione delle domande dei media. Le query multimediali sono incredibilmente utili perché risolvono un enorme problema sorto improvvisamente nel web design: la necessità di progettare schermi di dimensioni molto diverse.
Le dimensioni degli schermi degli utenti sono sempre diverse, ma per la maggior parte questa differenza era limitata a pochi pollici e si poteva scommettere su un'enorme maggioranza del pubblico adattandosi a parametri abbastanza facili da progettare. In questi giorni però hai alcuni utenti su un monitor Apple Cinema 27 "e altri su uno smartphone da 3,5".
Questa è un'enorme differenza e ci sono molte fermate lungo la strada. Il numero sempre crescente di dispositivi compatibili con il Web rende sempre più difficile per i progettisti presentare una soluzione statica che soddisfi le esigenze di tutti.
Questa esigenza ha dato origine all'idea di un web design reattivo, che va ben oltre le ampiezze di pagina fluide e in realtà modifica drasticamente il layout di una pagina al variare delle dimensioni della finestra del browser o delle dimensioni dello schermo del dispositivo. Le query multimediali sono uno degli strumenti più potenti per raggiungere questo obiettivo perché consentono al progettista di impostare CSS speciali in base a determinate regole prestabilite.
Owltastic: un eccellente esempio di progettazione web reattiva
Le informazioni di cui sopra sono un po 'astratte, quindi vediamo come funziona nel mondo reale guardando un esempio del talentuoso designer e sviluppatore Meagan Fisher. Ecco come appare il suo sito nella finestra del mio 13 "MacBook del browser a schermo intero.
Ora, se aggiusto quella dimensione della finestra, inizia molto a succedere. Le colonne regolano la loro larghezza, il layout si sposta in modo più verticale e gli elementi non essenziali scompaiono completamente. Ecco uno screenshot con altre due larghezze di pagina, controlla quanto il design si adatta alle diverse situazioni.
Si noti che abbiamo iniziato con un layout a tre colonne, che poi si è trasformato in un layout a due colonne e infine è atterrato su un layout a colonna singola con la finestra del mio browser tanto piccola quanto sarebbe andata. Questo è più di un semplice designer che si mostra agli altri, questo rappresenta un tentativo davvero impressionante di rendere il sito non solo utilizzabile, ma specificamente ottimizzato per la vasta gamma di dispositivi che probabilmente lo vedranno.
Come funziona
Potrebbe sembrare che ci sarà un sacco di lavoro extra, e mentirei se dicessi che si tratta di un processo indolore, ma la buona notizia è che le CSS e le query sui media fanno molto per te. Saltiamo un po 'nel codice di Owltastic per vedere come funziona tutto questo.
Per i principianti, vedrete un sacco di uso esperto di galleggianti e percentuali usate per il dimensionamento. Si noti nello snippet sotto Meagan le percentuali usate sia per la larghezza dell'elemento che per il margine. È anche meticolosa nel dirti da dove vengono queste percentuali sotto forma di un commento con un po 'di matematica veloce.
Ciò rende sicuramente il layout un po 'più complicato, ma stabilisce una buona base per larghezze di pagina flessibili ancor prima di arrivare alle query multimediali. Tuttavia, le proprietà mostrate sopra sono, per la maggior parte, ciò che vedete essere manipolato ulteriormente all'interno delle query multimediali.
Qui possiamo vedere che Meagan ha preso di mira una larghezza massima dello schermo di 800 px e quindi ha definito una serie di stili che si applicano direttamente ai dispositivi che soddisfano tale specifica. Da qui, float, margini, padding, display e persino immagini sono ottimizzati per un layout ottimale a quelle dimensioni.
Un totale di cinque diverse query multimediali sono configurate per circostanze diverse: larghezza massima: 960px, 800px, 640px, 540px e 480px. Ognuno di questi è abbastanza completo nel delineare comportamenti specifici per quella dimensione dello schermo. Ecco la sezione per la larghezza massima: 480px.
Un trucco interessante qui che dovresti prestare particolare attenzione è l'uso di immagini fluide. Impostando la larghezza di un'immagine al 100%, si adatterà alla larghezza del suo contenitore e ridimensionerà come cambia la finestra del browser. Ethan Marcotte spiega questa tecnica in modo approfondito sul suo sito Unstoppable Robot Ninja.Assicurati di ridimensionare la finestra del browser sul suo sito e guardare le immagini dell'intestazione rispondere.
Altri esempi dal vivo
Il modo migliore per studiare il web design reattivo e le domande sui media è di vederle in azione. Ecco una breve lista contenente alcuni siti che ho trovato impressionante. Con ogni sito, non basta guardare il design, testarlo ridimensionando la finestra del browser. Inoltre, scavare nel CSS per vedere come funzionano i siti e pensare a come è possibile implementare queste tecniche nei propri progetti.
Un elenco a parte: articolo di esempio
Trent Walton
Pensa alla vitamina
Deren K.
Fai lezioni
About.com
Sasquatch Festival
orario terrestre
Feed BMX
Remo - Powerstroke Pro
The Modern Gentlemen
Naomi Atkinson
Convergere SE
Sleepstreet
Alsacreations
Un design diverso
Yiibu
Sweet Hat Club
Laufbild Werkstatt
Periodo
Dmig 5
Conclusione
Riassumendo, la pletora di dispositivi che accedono al web in questi giorni rende necessario creare progetti di siti web che siano adattabili a molte diverse dimensioni dello schermo e le query sui supporti CSS forniscono un modo semplice per fare esattamente questo.
Per essere onesti, quando ho sentito per la prima volta di domande sui media ho alzato gli occhi al cielo, pensando che avrebbe aggiunto semplicemente un altro livello di lavoro a tutti i passaggi che dovevamo già passare per rendere i nostri progetti passabili. Tuttavia, più imparo e sperimento con loro più sono convinto che questo è il modo in cui il web design dovrebbe essere affrontato in quello che Steve Jobs chiama "un'era post-PC".