Decisioni di design ispirate: rivista Avaunt

Odio ammetterlo, ma cinque o sei anni fa il mio interesse per il web design ha iniziato a svanire. Ovviamente, possedere un'attività significava che dovevo continuare a lavorare, ma rimanere motivato e offrire il mio pensiero migliore ai clienti è diventata una lotta quotidiana.

Guardare il web non ha migliorato la mia motivazione. Il web design ha ristagnato, la prevedibilità ha sostituito la creatività e le idee sembravano meno importanti dei dati.

I motivi per cui mi piaceva lavorare sul web non sembravano più rilevanti. Il design aveva perso la sua gioia. Insiemi complessi di strumenti di costruzione e processori avevano persino soppiantato il semplice piacere di scrivere HTML e CSS.

Quando ho iniziato a lavorare con il leggendario designer di giornali e riviste Mark Porter, sono rimasto affascinato dall'art direction e dal design editoriale. Come qualcuno che non aveva studiato neanche alla scuola d'arte, tutto in quest'area del design era eccitante e nuovo. Ho letto tutti i libri su influenti art director che ho trovato e ho iniziato a collezionare riviste dai luoghi che ho visitato in giro per il mondo.

Più mi ispiravo al design delle riviste, più velocemente si riprendeva il mio entusiasmo per il web design. Mi sono chiesto perché molti web designer pensano che il design di stampa sia antiquato e irrilevante per il loro lavoro. Ho pensato al motivo per cui così poco di ciò che rende speciale il design di stampa viene trasferito sul web.

Il mio obiettivo era cercare esempi stimolanti di design editoriale, studiare cosa li rende unici e trovare modi per adattare ciò che avevo imparato per creare design più accattivanti, accattivanti e fantasiosi per il web.

Le mie librerie ora sono piene zeppe di ispirazione per il design di riviste, ma la mia collezione è ancora in crescita. Ho uno spazio limitato, quindi sono esigente su ciò che raccolgo. Compro una selezione varia e raramente raccolgo più di un numero con lo stesso titolo.

Cerco layout di pagina entusiasmanti, tipografia stimolante e modi innovativi per combinare testo e immagini. Quando una rivista ha molti elementi di design interessanti, la compro. Tuttavia, se una rivista include solo pochi pezzi di ispirazione, ammetto di non essere al di sopra di fotografarli prima di rimetterli sullo scaffale.

Compro nuove riviste il più regolarmente possibile e una settimana prima di Natale ci siamo incontrati con alcuni amici a Londra. Nessun viaggio allo "Smoke" è completo senza una sosta a Magma e ho comprato diverse nuove riviste. Dopo aver spiegato la mia aggiunta di ispirazione, un amico mi ha suggerito di scrivere perché trovo il design delle riviste così stimolante e come le riviste influenzano il mio lavoro.

Quella conversazione ha acceso l'idea per una serie su come prendere decisioni di design ispirate. Ogni mese sceglierò una pubblicazione, discuterò cosa rende distintivo il suo design e come potremmo imparare lezioni che ci aiuteranno a lavorare meglio per il web.

Come utente entusiasta di HTML e CSS, spiegherò anche come implementare nuove idee utilizzando le ultime tecnologie; Griglia CSS, Flexbox e Forme.

Sono felice di dirti che sono di nuovo ispirato e motivato a progettare per il web e spero che questa serie possa ispirare anche te.

Avaunt Magazine: Documentare lo straordinario

Uno sguardo a me ti dirà che non sono un gran avventuriero. Non mi considero particolarmente colta e mia moglie scherza regolarmente su quella che dice essere la mia mancanza di stile.

Quindi cosa mi ha attratto della rivista Avaunt e della sua copertura di "avventura", "cultura" e "stile" quando ci sono così tante riviste in competizione e variegate?

Spesso mi bastano pochi giri di pagina per decidere se una rivista offre l'ispirazione che cerco. Qualcosa deve risaltare in quei primi secondi per farmi guardare più da vicino, che si tratti di un layout di pagina entusiasmante, di un trattamento tipografico stimolante o di una combinazione innovativa di immagini e testo.

Avaunt ha tutte queste caratteristiche, ma quello che mi ha colpito di più è stato il modo in cui il suo direttore artistico ha utilizzato il colore, il layout e la digitazione in modi diversi, pur mantenendo un aspetto coerente in tutta la rivista. Ci sono fili di design distintivi che attraversano le pagine di Avaunt. Gli usi audaci di uno stencil serif e del carattere geometrico sans-serif sono particolarmente sorprendenti, così come la ripetizione di nero, bianco, un rosso che i designer di Avaunt usano in vari modi. Molte delle scelte creative di Avaunt sono avventurose quanto le storie che racconta.

Molte riviste dedicano le loro prime pubblicazioni alla pubblicità patinata e Avaunt fa lo stesso. Scorrendo oltre quegli annunci si trova la pagina dei contenuti di Avaunt e la sua affascinante griglia modulare a quattro colonne.

Questo layout mantiene il contenuto ordinato all'interno delle zone spaziali ma mantiene l'energia rendendo ogni zona di dimensioni diverse. Questo layout può essere adattato a molti tipi di contenuti online e dovrebbe essere facile da implementare utilizzando CSS Grid. Non vedo l'ora di provarlo.

Per i titoli sans-serif, gli standfirst e altri elementi di tipo che danno un pugno, Avaunt usa MFred, progettato inizialmente per la rivista Elephant da Matt Willey nel 2011. Matt ha continuato a dirigere l'arte per il lancio di Avaunt e ha commissionato un carattere tipografico serif stencil per il titoli audaci della rivista e numeri distintivi.

Avaunt Stencil è stato progettato nel 2014 dallo studio londinese A2-TYPE che da allora lo ha reso disponibile per la licenza. Sono disponibili molti font stencil, ma può essere difficile trovarne uno che combini audacia ed eleganza: stai cercando uno stencil serif ospitato su Google Fonts? Stardos sarebbe una buona scelta per il tipo di dimensioni del display. Hai bisogno di qualcosa di più unico, prova Caslon Stencil di URW.

L'uso di una griglia modulare da parte di Avaunt non si esaurisce con la pagina dei contenuti ed è la base per una diffusione delle curiosità del Museo Politecnico di Mosca della Guerra Fredda che per prima mi ha portato alla rivista. Questa diffusione utilizza una griglia modulare a tre colonne e zone spaziali di varie dimensioni.

Ciò che mi affascina di questa diffusione della Guerra Fredda è il modo in cui i moduli nella pagina sul verso si combinano per formare un'unica colonna per il contenuto del testo. Anche con questa colonna, le proporzioni della griglia del modulo informano ancora la posizione e la dimensione degli elementi all'interno.

Mentre il design di molte delle pagine di Avaunt è dedicato a un'esperienza di lettura favolosa, molte altre spingono la griglia e tirano i loro stili tipografici di base in direzioni diverse. Testo bianco su sfondi scuri, spazi colorati in cui gli oggetti vengono tagliati per fondersi con lo sfondo. Grandi capilettera iniziali che riempiono la larghezza di una colonna e grandi capilettera stampati che dominano la pagina.

I design giocosi di Avaunt aggiungono interesse e la disposizione delle pagine crea un ritmo che vedo molto raramente online. Queste variazioni nel design sono tenute insieme dall'uso coerente di Antwerp, anch'esso progettato da A2-TYPE, come carattere tipografico per eseguire il testo e un tema di colore nero, bianco e rosso che corre in tutta la rivista.

Studiare il design della rivista Avaunt può insegnare e ispirare. Come una griglia modulare può aiutare a strutturare il contenuto in modi creativi senza che sembri statico. (Ti insegnerò di più sulle griglie modulari più avanti.)

Come un insieme ben definito di stili può diventare la base per design distintivi e diversificati e, infine, come creare un ritmo in una serie di pagine può aiutare i lettori a rimanere coinvolti.

La prossima volta che passi davanti al negozio di riviste più vicino, fai un salto a prendere una copia di Avaunt Magazine. Riguarda l'avventura, ma scommetto che può aiutare a ispirare anche i tuoi progetti a essere più avventurosi.

Saluta le colonne magre

Per quella che sembra un'eternità, c'è stata pochissima innovazione nel design delle griglie per il web. Speravo che le sfide del design reattivo si sarebbero tradotte in approcci creativi al layout, ma purtroppo sembra essere vero il contrario.

Invece delle griglie originali, la disposizione di uno, due, tre o quattro blocchi di contenuto è diventata la norma. Le griglie del framework, come quelle incluse in Bootstrap, rimangono il punto di partenza per molti designer, indipendentemente dal fatto che utilizzino tali framework o meno.

È vero che c'è di più sul motivo per cui gran parte del Web sembra uguale ai web designer che utilizzano la stessa griglia. Dopotutto, esistono convenzioni simili per riviste e giornali da decenni, ma in qualche modo le riviste non hanno perso la loro personalità come hanno fatto molti siti web.

Sono sempre alla ricerca di ispirazione per il layout e le riviste sono una ricca fonte. La lettura di Avaunt mi ha ricordato una tecnica in cui mi sono imbattuto anni fa ma che non avevo provato. Questa tecnica aggiunge una colonna extra stretta a una griglia di colonne altrimenti convenzionale. Nella progettazione di stampa, questa colonna stretta viene spesso definita "colonna o misura bastarda" e descrive un blocco di contenuto che non è conforme al resto di una griglia. (Trattandosi di una pubblicazione adatta alle famiglie, la chiamerò una "colonna magra.")

In questi primi esempi, comprimere un'immagine in una colonna ne riduce il peso visivo e sconvolge l'equilibrio della mia composizione. Far riempire l'immagine due colonne standard sconvolge anche quel delicato equilibrio.

Dividere la colonna finale, quindi aggiungere metà della sua larghezza a un'altra, crea lo spazio perfetto per la mia immagine e un risultato complessivo più piacevole.

Potrei usare una colonna sottile per informare la larghezza degli elementi di design. Questo logo Mini Cooper corrisponde alla larghezza della mia colonna magra e le sue dimensioni sembrano bilanciate con il resto della mia composizione.

A volte, il contenuto non si adatta comodamente a una singola colonna, ma combinando le larghezze delle colonne standard e sottili, creo più spazio e una misura migliore per l'esecuzione del testo. Posso posizionare una colonna sottile ovunque all'interno di un layout, ovunque io abbia bisogno del mio contenuto.

Una colonna sottile vuota aggiunge uno spazio bianco che consente all'occhio di vagare intorno a un disegno. L'asimmetria creata dall'inserimento di una colonna sottile tra due colonne standard rende anche un layout strutturato più dinamico ed energico.

Un'altra colonna sottile vuota ritaglia un'ampia grondaia in questo disegno e limita il mio testo in esecuzione a una singola colonna, in modo che la sua altezza rifletta il formato verticale dell'immagine. Posso anche usare una colonna sottile per trasformare elementi tipografici in elementi di design eccitanti.

In via di sviluppo con colonne sottili

Disegni come questi sono sorprendentemente semplici da implementare utilizzando i CSS di oggi. Ho bisogno solo di quattro elementi strutturali; un logo, un'intestazione, una figura, più un articolo per contenere il mio testo in esecuzione:

 <body> <img src="logo.svg" alt="Mini Cooper"> <header>…</header> <figure>…</figure> <article>…</article> </body>

Inizio con un progetto per schermi di medie dimensioni applicando CSS Grid all'elemento body all'interno della mia prima query multimediale. A queste dimensioni, non ho bisogno di una colonna sottile, quindi sto sviluppando una griglia simmetrica a tre colonne che si espande in modo uniforme per riempire la larghezza della finestra:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

Uso i numeri di riga per posizionare gli elementi nelle colonne e nelle righe della griglia. Inserisco il mio logo nella prima colonna sottile e nella prima riga utilizzando un selettore di attributi di corrispondenza della sottostringa. Questo punta a un'immagine con "logo" ovunque nel suo valore di origine:

 [src*="logo"] { grid-column: 1; grid-row: 1; }

Successivamente, inserisco l'elemento di intestazione, contenente il titolo e il primo paragrafo, nella seconda riga. L'utilizzo di numeri di riga da 1 a -1 distribuisce questa intestazione su tutte le colonne:

 header { grid-column: 1 / -1; grid-row: 2; }

Con display:grid; applicato, tutti i discendenti diretti di un contenitore della griglia diventano elementi della griglia, che posso posizionare usando aree, numeri di riga o nomi.

Questo design include un elemento figura con un'immagine Mini di grandi dimensioni, oltre al testo della didascalia sul design del modello Cooper originale. Questa cifra è fondamentale perché descrive una relazione tra img e figcaption. Tuttavia, mentre questa cifra rende il mio markup più significativo, perdo la capacità di posizionare img e figcaption usando CSS Grid, perché nessuno dei due è discendente diretto del corpo in cui ho definito la mia griglia.

Fortunatamente, esiste una proprietà CSS che, se utilizzata in modo ponderato, può superare questo problema. Non ho bisogno di modellare la figura, ho solo bisogno di modellare img e figcaption. Applicando display:contents; per la mia figura, lo rimuovo efficacemente dal DOM per motivi di stile, quindi i suoi discendenti prendono il suo posto:

 figure { display: contents; }

Vale la pena notare che sebbene la visualizzazione rimuova efficacemente la mia figura dal DOM per motivi di stile, tutte le proprietà che ereditano, comprese le dimensioni e gli stili dei caratteri, vengono comunque ereditate:

 figure img { grid-column: 2/-1; grid-row: 4; } figcaption { grid-column: 1; grid-row: 4; align-self: end; }

Inserisco il mio articolo e ne stilo il testo su tre colonne utilizzando il layout a più colonne, una delle mie proprietà CSS preferite:

 article { grid-column: 1 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

È ora di implementare un design che includa una colonna sottile per schermi più grandi. Uso una query multimediale per isolare questi nuovi stili, quindi creo una griglia a cinque colonne che inizia con una colonna skinny larga 1fr:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr repeat(4, 2fr); } } 

Quindi aggiungo valori per riposizionare l'intestazione, img e figcaption e l'articolo, ricordando di reimpostare il conteggio delle colonne in modo che corrisponda alla sua nuova larghezza:

 header { grid-column: 3/-1; grid-row: 1; } figure img { grid-column: 4 / -1; grid-row: 2; } figcaption { grid-column: 2; grid-row: 2; align-self: start; } article { grid-column: 3; grid-row: 2; column-count: 1; }

Cambiare radicalmente l'aspetto di un design usando solo CSS, senza apportare modifiche alla struttura dell'HTML, mi fa sorridere, anche dopo quasi due decenni. Sorrido anche quando cambio la composizione per creare un layout radicalmente diverso senza modificare la griglia. Per questo design alternativo, miro a un look più strutturato.

Per migliorare la leggibilità del mio testo in esecuzione, divido in tre colonne. Quindi, per separare questo blocco di contenuti da altri elementi di testo, posiziono la mia colonna sottile tra le prime due colonne standard. Non è necessario modificare la struttura del mio HTML. Tutto ciò di cui ho bisogno sono piccole modifiche ai valori della griglia nel mio foglio di stile. Questa volta, il mio valore di colonna skinny largo 1fr si trova tra due larghezze di colonna standard:

 @media screen and (min-width : 64em) { body { grid-template-columns: 2fr 1fr 2fr 2fr 2fr; } }

Metto la mia intestazione nella seconda riga e l'articolo in una riga direttamente sotto:

 header { grid-column: 3 / -1; grid-row: 2; } article { grid-column: 3 / -1; grid-row: 3; column-count: 3; column-gap: 2vw; }

Poiché né img né figcaption sono discendenti diretti dell'elemento body in cui ho definito la mia griglia, per posizionarli ho bisogno del display:contents; di nuovo proprietà:

 figure { display: contents; } figure img { grid-column: 3/5; grid-row: 1; } figcaption { grid-column: 5/-1; grid-row: 1; align-self: start; }

A seconda di come le usi, l'introduzione di colonne sottili nei tuoi progetti può rendere i contenuti più leggibili o trasformare un layout statico in uno che sembra dinamico ed energico.

Le colonne sottili sono solo un esempio di come apprendere una tecnica dalla stampa e usarla per migliorare un design per il web. Non vedevo l'ora di provare le colonne magre e non sono stato deluso.

L'aggiunta di una colonna sottile ai tuoi progetti può spesso essere una decisione ispirata. Ti dà una flessibilità extra e può trasformare un layout altrimenti statico in uno pieno di energia.

Progettazione di griglie modulari

La rivista Avaunt contiene molti layout stimolanti, ma voglio concentrarmi su due pagine in particolare. Questa diffusione contiene oggetti "Cold War Design" all'interno di un design che potrebbe essere applicato a un'ampia varietà di tipi di contenuto.

A prima vista, le griglie modulari possono sembrare complicate, tuttavia è facile lavorarle. Mi sorprende che così pochi web designer li utilizzino. Voglio cambiarlo.

Quando usi le griglie modulari in modo ponderato, possono riempire i tuoi progetti di energia. Sono eccellenti per mettere in ordine grandi quantità di contenuti vari, ma possono anche creare layout visivamente accattivanti quando il contenuto è minimo.

Per questo progetto, ispirato ad Avaunt, baso la mia griglia modulare su sei colonne simmetriche e quattro file equidistanti. I moduli griglia definiscono il posizionamento e le dimensioni dei miei contenuti.

Lego diversi moduli insieme per creare zone spaziali per immagini di grandi dimensioni e testo in esecuzione in un'unica colonna a sinistra. Le linee di confine aiutano a enfatizzare la struttura visiva della pagina.

Questo tipo di layout potrebbe sembrare complicato all'inizio, ma in realtà è meravigliosamente semplice da implementare. Invece di basare il mio markup sul layout visivo, inizio utilizzando gli elementi più appropriati per descrivere i miei contenuti. In passato, avrei utilizzato gli elementi della tabella per implementare le griglie modulari. Avanti veloce di alcuni anni e le divisioni hanno sostituito quelle celle della tabella. Incredibilmente, ora ho bisogno solo di due elementi HTML strutturali per realizzare questo progetto; un articolo seguito da un elenco ordinato:

 <body> <article>…</article> <ol>…</ol> </body>

Tale articolo contiene un titolo, paragrafi e una tabella per informazioni tabellari:

 <article> <p class="standfirst">…</p> <h1>…</h1> <p>…</p> <table>…</table> </article>

La griglia modulare di Mini blueprints è l'aspetto visivo più complicato del mio progetto, ma il markup che lo descrive è semplice. I progetti sono in ordine di data, quindi un elenco ordinato sembra l'elemento HTML più appropriato:

 <ol class="items"> <li> <h2>1969</h2> <img src="front.svg" alt=""> </li> <li> <h2>1969</h2> <img src="back.svg" alt=""> </li> </ol>

Il mio HTML pesa solo 2Kb ed è sotto le sessanta righe. È una buona idea convalidare quel markup poiché un po' di tempo speso per la convalida in anticipo farà risparmiare molto più tempo per il debug dei CSS in seguito. Apro anche la pagina senza stile in un browser poiché devo sempre assicurarmi che i miei contenuti siano accessibili senza un foglio di stile.

Inizio a sviluppare un layout simmetrico a tre colonne per schermi di medie dimensioni isolando gli stili di griglia utilizzando una query multimediale:

 @media screen and (min-width : 48em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 2vw; } }

L'articolo e l'elenco ordinato sono gli unici discendenti diretti del corpo, ma è ciò che contengono che voglio posizionare come elementi della griglia. Uso display:contents; per consentirmi di posizionare i loro contenuti ovunque sulla mia griglia:

 article, ol { display: contents; }

Ogni elemento nel mio articolo dovrebbe occupare tutte e tre le colonne, quindi le inserisco usando i numeri di riga, iniziando con la prima riga (1) e finendo con la riga finale (-1):

 .standfirst, section, table { grid-column: 1 / -1; }

Gli elementi nell'elenco ordinato sono posizionati uniformemente nella griglia a tre colonne. Tuttavia, il mio progetto richiede che alcuni elementi si estendano su due colonne e uno su due righe. I selettori dell'ennesimo tipo sono strumenti perfetti per il targeting di elementi senza ricorrere all'aggiunta di classi nel mio markup. Li uso, la parola chiave span e la quantità di colonne o righe su cui voglio che gli elementi si estendano:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(6), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-row: span 2; } 

Visualizzando in anteprima il mio progetto in un browser, posso vedere che non appare esattamente come pianificato perché alcuni moduli della griglia sono vuoti. Per impostazione predefinita, il flusso normale di qualsiasi documento dispone gli elementi da sinistra a destra e dall'alto in basso, proprio come le lingue occidentali. Quando gli elementi non si adattano allo spazio disponibile in una griglia, l'algoritmo di posizionamento della griglia CSS lascia gli spazi vuoti e posiziona gli elementi sulla riga successiva.

Posso sovrascrivere l'impostazione predefinita dell'algoritmo applicando la proprietà grid-auto-flow e un valore di denso al mio grid-container, in questo caso il body:

 body { grid-auto-flow: dense; }

Riga è il valore di flusso automatico della griglia predefinito, ma puoi anche scegliere colonna, colonna densa e riga densa. Usa il flusso automatico della griglia in modo saggio perché un browser riempie qualsiasi modulo vuoto con l'elemento successivo nel flusso del documento che può adattarsi a quello spazio. Questo comportamento cambia l'ordine visivo senza alterare la fonte che potrebbe avere implicazioni per l'accessibilità.

Il mio design di medie dimensioni ora sembra proprio come avevo pianificato, quindi ora è il momento di adattarlo a schermi più grandi. Devo apportare solo piccole modifiche agli stili della griglia per trasformare prima il mio articolo in una barra laterale, che copre l'intera altezza del mio layout, quindi posizionare elementi di elenco specifici in moduli su una griglia a sei colonne più ampia:

 @media screen and (min-width : 64em) { body { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } article { grid-column: 1; grid-row: 1 / -1; } li:nth-of-type(4) { grid-column: 5 / span 2; } li:nth-of-type(5) { grid-column: 2 / span 2; } li:nth-of-type(6) { grid-column: 4 / span 2; grid-row: 2 / span 2; } li:nth-of-type(14) { grid-column: 5 / 7; } }

Tenere traccia delle linee di posizionamento della griglia a volte può essere difficile, ma fortunatamente CSS Grid offre più di un modo per realizzare un progetto di griglia modulare. L'uso di grid-template-areas è un approccio alternativo e ritengo che non riceva abbastanza attenzione.

Usando grid-template-areas, definisco prima ogni modulo assegnandogli un nome, quindi inserisco gli elementi in un modulo o in più moduli adiacenti noti come zone spaziali. Questo processo può sembrare complicato, ma in realtà è uno dei modi più semplici e ovvi per utilizzare CSS Grid.

Assegno a ogni elemento un valore di area della griglia per inserirlo nella mia griglia, iniziando con il logo e l'articolo:

 [src*="logo"] { grid-area: logo; } article { grid-area: article; }

Successivamente, assegno un'area della griglia a ciascuna delle voci dell'elenco. Ho scelto un semplice valore i+n, ma potevo scegliere qualsiasi valore comprese parole o anche lettere come a, b, c o d.

 li:nth-of-type(1) { grid-area: i1; } … li:nth-of-type(14) { grid-area: i14; }

La mia griglia ha sei colonne esplicite e quattro righe implicite, la cui altezza è definita dall'altezza del contenuto al loro interno. Disegno la mia griglia in CSS usando la proprietà grid-template-areas, dove ogni punto (.) rappresenta un modulo griglia:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: ". . . . ". . . . ".. .. ".. .. . ." . ." . ." . ."; }

Quindi, posiziono gli elementi in quella griglia usando i valori dell'area della griglia che ho definito in precedenza. Se ripeto i valori su più moduli adiacenti, su colonne o righe, quell'elemento si espande per creare una zona spaziale. Lasciando un punto (.) si crea un modulo vuoto:

 body { grid-template-columns: repeat(6, 1fr); grid-template-areas: "article logo i1 i2 i3 i3" "article i4 i4 i5 i5 "article i7 i8 i5 i5 "article i10 i11 i12 i14 i14"; }

In ogni esempio finora, ho isolato gli stili di layout per dimensioni dello schermo diverse utilizzando i punti di interruzione delle query multimediali. Questa tecnica è diventata il modo standard per affrontare le complessità del responsive web design. Tuttavia, esiste una tecnica per lo sviluppo di griglie modulari reattive senza utilizzare query multimediali. Questa tecnica sfrutta la capacità di un browser di ridisporre il contenuto.

Prima di andare oltre, vale la pena ricordare che il mio progetto richiede solo due elementi HTML strutturali; un elenco ordinato per il contenuto e un articolo che trasformo in una barra laterale quando è disponibile una larghezza sufficiente per consentire a entrambi gli elementi di stare fianco a fianco. Quando la larghezza è insufficiente, questi elementi si impilano verticalmente nell'ordine del contenuto:

 <body> <article>…</article> <ol>…</ol> </body>

L'elenco ordinato costituisce la parte più importante del mio progetto e dovrebbe sempre occupare almeno il 60% della larghezza di una finestra. Per assicurarmi che ciò accada, utilizzo una dichiarazione di larghezza minima:

 ol { min-width: 60%; }

Mentre normalmente raccomando di utilizzare CSS Grid per il layout generale della pagina e Flexbox per componenti flessibili, per implementare questo design capovolgo quel consiglio.

Trasformo l'elemento body in un contenitore flessibile, quindi assicuro che il mio articolo cresca per riempire tutto lo spazio orizzontale utilizzando la proprietà flex-grow con un valore di 1:

 body { display: flex; } article { flex-grow: 1; }

Per assicurarmi che il mio elenco ordinato occupi anche tutto lo spazio disponibile ogni volta che i due elementi si trovano fianco a fianco, gli do un valore di flex-grow ridicolmente alto di 999:

 article { flex-grow: 999; }

L'uso della base flessibile fornisce una larghezza iniziale ideale per l'articolo. Impostando l'avvolgimento del contenitore flessibile per avvolgere, assicuro che i due elementi si impilano quando viene raggiunta la larghezza minima dell'elenco e non c'è spazio sufficiente per farli stare fianco a fianco:

 body { flex-wrap: wrap; } article { flex-basis: 20rem; }

Voglio creare una griglia modulare flessibile che consenta un numero qualsiasi di moduli. Anziché specificare il numero di colonne o righe, l'utilizzo della ripetizione consente a un browser di creare tutti i moduli necessari. il riempimento automatico riempie tutto lo spazio disponibile, avvolgendo il contenuto dove necessario. minmax assegna a ciascun modulo una larghezza minima e massima, in questo caso 10rem e 1fr:

 ol { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-column-gap: 2vw; }

Per evitare che i moduli rimangano vuoti, utilizzo di nuovo grid-auto-flow con un valore di denso. L'algoritmo del browser ridiscende il mio contenuto per riempire tutti i moduli vuoti:

 ol { grid-auto-flow: dense; }

Proprio come prima, alcuni elementi dell'elenco si estendono su due colonne e uno su due righe. Ancora una volta, utilizzo i selettori nth-of-type per indirizzare elementi di elenco specifici, quindi grid-column o grid-row con la parola chiave span seguita dal numero di colonne o righe che voglio estendere:

 li:nth-of-type(4), li:nth-of-type(5), li:nth-of-type(14) { grid-column: span 2; } li:nth-of-type(6) { grid-column: span 2; grid-row: span 2; }

Questo semplice CSS crea un design reattivo che si adatta al suo ambiente senza la necessità di più query multimediali o set di stili separati.

Utilizzando i moderni CSS tra cui Grid e Flexbox, basandosi sulla capacità dei browser di ridisporre i contenuti, oltre ad alcune scelte intelligenti sulle dimensioni minime e massime, questo approccio si avvicina di più al raggiungimento degli obiettivi di un Web veramente reattivo.

Leggi di più dalla serie

1. Decisioni di design ispirate: rivista Avaunt
2. Decisioni di design ispirate: questioni urgenti
3. Decisioni di design ispirate: Ernest Journal
4. Decisioni progettuali ispirate: Alexey Brodovitch
5. Decisioni di design ispirate: Bea Feitler
6. Decisioni progettuali ispirate: Neville Brody
7. Decisioni progettuali ispirate: Otto Storch
8. Decisioni di design ispirate: Herb Lubalin
9. Decisioni progettuali ispirate: Max Huber
10. Decisioni progettuali ispirate: Giovanni Pintori
11. Decisioni di design ispirate: Emmett McBain
12. Decisioni progettuali ispirate: Bradbury Thompson

NB: I membri Smashing I membri Smashing hanno accesso a un PDF dal design accattivante della rivista Andy's Inspired Design Decisions e agli esempi di codice completo di questo articolo. Puoi acquistare il PDF e gli esempi di questo numero, nonché ogni altro numero direttamente dal sito Web di Andy.