Il web design reattivo richiede un modo molto diverso di pensare al layout che sia al contempo stimolante ed eccitante. L'arte del layout era già abbastanza complessa per i secoli da essere definita da elementi fissi, ora le cose stanno diventando esponenzialmente più complicate in quanto i layout diventano sempre più adattivi.
Per aiutare la riprogrammazione del tuo cervello a prendere in considerazione i layout in modi nuovi, daremo un'occhiata ad alcuni interessanti modelli di progettazione reattiva che vengono implementati da designer di talento in tutto il web.
Avvio piccolo
Uno dei modi più popolari in cui vedo implementare il responsive design è semplicemente assegnare una larghezza fluida alle colonne di contenuto della pagina, che diventano più strette e più strette man mano che la larghezza della pagina diminuisce fino al passaggio principale a un layout mobile a colonna singola . Possiamo vedere questa tecnica al lavoro sul sito web di hotel di lusso 137 Pillars House.
Come puoi vedere, il layout passa solo attraverso un'unica grande trasformazione. Il resto dell'adattamento è molto graduale ed è semplicemente un restringimento del layout iniziale.
Questo sembra essere il modo in cui molti designer stanno attaccando le loro proverbiali dita dei piedi per testare le acque del design reattivo. È un ottimo punto di partenza perché può richiedere molto meno tempo e impegno rispetto a molte trasformazioni principali, offrendo comunque il vantaggio di offrire una pagina web che si adatta perfettamente a qualsiasi dimensione di visualizzazione.
Piuttosto che semplicemente flirtare con reattività, anche se voglio incoraggiarvi a fare il grande passo ed esplorare le vaste possibilità che sono ora disponibili in termini di design del layout. Non fraintendermi, non c'è niente di sbagliato nell'approccio sopra, ma è sempre una buona idea portare le tue abilità un ulteriore passo avanti e allungare ciò che consideri tu stesso in grado di tirare fuori.
Mondrian
Il nostro primo modello di web design reattivo è stato quello che Piet Mondrian avrebbe apprezzato. Usa tre semplici e grandi aree di contenuto separate da linee spesse. Lo stato iniziale di per sé è abbastanza versatile e può reggere bene sotto una riduzione della larghezza piuttosto intensa.
Quando diventa troppo stretto per lo stato iniziale, il layout widescreen si adatta e diventa un layout verticale. Questo si ottiene prendendo le due scatole più piccole sulla destra e spostandole sotto la scatola grande, in primo piano. Questo layout si interrompe quindi nella nostra visualizzazione mobile a colonna singola standard in cui ogni pezzo di contenuto viene semplicemente impilato sotto l'ultimo.
Nella natura selvaggia
Troviamo questo modello utilizzato sul sito Web di Andersson-Wise, uno studio di architettura. Possiamo vedere che è perfetto per la visualizzazione di foto grandi e belle. Per completare l'obiettivo principale, la foto, i due riquadri sul lato sono semplici e riempiti con un colore solido campionati dall'immagine. Il tipo è forte e pulito, dando al sito una sensazione molto sofisticata.
Dato che il layout è così guidato dalla scatola, è un modello di risposta abbastanza semplice per avvolgere la tua mente. Se hai una quantità minima di contenuti con cui lavorare, dovresti fare un tentativo.
Galleria di base
Le gallerie di miniature sono un modello di progettazione popolare che esiste da quasi quanto il Web. In questi giorni i designer di solito li mantengono abbastanza minimali: rettangoli semplici disposti uniformemente su uno sfondo solido. Questo formato è super facile da ridimensionare mentre cambia il viewport. Devi semplicemente ridurre il numero di colonne un paio di volte.
Abbiamo approfondito questo processo nel nostro articolo sulla creazione di una galleria di miniature reattive, quindi assicurati di verificarlo se stai cercando una guida passo passo del processo.
Nella natura selvaggia
Per vedere questo modello in un sito reale, controlla il portfolio di Brad Sawicki. Proprio sulla sua homepage inizia con una semplice galleria di tre colonne che crolla in un doppio e infine un singolo layout di colonna. Il vantaggio è che le dimensioni dell'immagine di anteprima del lavoro sfruttano al meglio la vista disponibile in modo che il visualizzatore possa sempre vederle in un formato piacevole e di grandi dimensioni.
Oggetti presentati
Questo è molto simile al layout della galleria, solo che è più orientato verso l'evidenziazione di alcuni elementi rispetto a diversi. L'esempio qui utilizza quattro elementi in primo piano, ma è altrettanto popolare, o anche più, vedere invece tre elementi.
Come puoi vedere, il layout inizia con i quattro elementi in evidenza fianco a fianco con alcuni contenuti introduttivi sopra. Quindi segue il percorso della galleria mentre salta giù a due colonne e infine una. Osserva come si adatta anche il contenuto introduttivo: la navigazione va dal lato destro a quello sinistro, sotto il titolo principale o il logo.
Nella natura selvaggia
L'azienda di sviluppo web Splendid fa un uso perfetto di questo modello sul loro sito. Animano persino le transizioni, qualcosa fatto esclusivamente per i nerd del design che ridimensionano il browser solo per osservare la trasformazione.
Questo particolare sito è una grande implementazione del web design reattivo. Non si sente mai neanche un po 'spento, ma gestisce ogni dimensione del viewport che puoi lanciare con una finezza pixel perfetta.
Colonna capovolgere
Questo è uno dei pattern più complicati ancora. La parte superiore del layout presenta alcuni elementi davvero grandi che attirano la vostra attenzione e introducono il sito. La parte successiva è divisa in tre colonne, ma man mano che riduci le dimensioni del browser, la prima colonna si gira sul lato e diventa una riga che si trova sopra le altre due colonne.
È una trasformazione abbastanza complicata ma è abbastanza efficace. Si potrebbe facilmente rimuoverlo semplicemente aggiungendo una query multimediale che fa galleggiare gli elementi in quella colonna a sinistra, quindi si cancella il float in modo che le altre due colonne rimangano intatte.
Il passo finale è ovviamente quello di ridiscendere tutto ancora una volta su un'unica colonna. Può far scorrere molto, ma finché non si eccede la pagina con il contenuto non è troppo male.
Nella natura selvaggia
L'ispirazione per questo layout proviene da Palantir, un'altra società di sviluppo. Si noti che gli sviluppatori web stanno sperimentando prima la progettazione reattiva sui propri siti, che può essere sia una grande esperienza di apprendimento che un esempio per i clienti.
Palantir è un brillante esempio di quanto drastiche possano essere le tue trasformazioni nel responsive web design. Questo è più che la semplice riduzione della larghezza di una colonna o la sua eliminazione completa, rappresenta un maggiore riflusso del contenuto della pagina per massimizzare continuamente la larghezza disponibile.
Feature Shuffle
Quest'ultimo modello è un approccio diverso all'idea degli articoli in primo piano. Mi piace molto perché getta una leggera curva durante il primo reflow. Invece di cadere semplicemente su due colonne e fluttuare a sinistra, crea un layout a due colonne sfalsate in cui le sezioni sono posizionate su entrambi i lati.
Per il layout a colonna singola, le immagini di anteprima vengono eliminate del tutto per consentire una maggiore enfasi sul contenuto del testo. Ovviamente è facoltativo, uno dei precedenti formati a colonna singola potrebbe essere implementato altrettanto facilmente.
Nella natura selvaggia
Orestis utilizza questo modello sul loro sito. I tre articoli in primo piano sono i servizi che offrono, ognuno dei quali è rappresentato da un'illustrazione colorata.
Quando ridimensionate il browser, i servizi vengono impilati e le immagini vengono spostate a sinistra oa destra. È un sito divertente e originale che devi controllare tu stesso per capire come funziona.
Più modelli
Nella mia ricerca per questo pezzo mi sono imbattuto in un articolo esistente di Luke Wroblewski sullo stesso argomento. Piuttosto che guardare schemi molto specifici come quelli che ho fatto qui, Luke fa un lavoro straordinario, rompendo veramente i layout comuni fino alle loro idee più basilari e mostrandoti come funzionano. È un pezzo davvero eccezionale e mi piace molto il modo in cui mostra come il layout funziona sia all'interno che all'esterno della tela.
Conclusione
Spero che la tua mente sia ora in overdrive a pensare ai layout reattivi. La comunità del web design ha trascorso un sacco di tempo a discutere gli aspetti tecnici di come il CSS reattivo è realizzato attraverso le query sui media, è decisamente giunto il momento di iniziare a riflettere profondamente sugli aspetti attuali del design di questa nuova eccitante frontiera.
Lascia un commento qui sotto e facci sapere cosa ne pensi di questi modelli di progettazione reattivi. Useresti qualcuno di loro nel tuo lavoro? Perché o perché no?