Decizii de design inspirate: Revista Avaunt

Urăsc să recunosc, dar acum cinci sau șase ani interesul meu pentru web design a început să scadă. Desigur, deținând o afacere însemna că trebuia să continui să lucrez, dar să rămân motivat și să ofer cea mai bună gândire clienților a devenit o luptă zilnică.

Privind pe web nu mi-a îmbunătățit motivația. Designul web stagnase, predictibilitatea înlocuise creativitatea, iar ideile păreau mai puțin importante decât datele.

Motivele pentru care mi-a plăcut să lucrez pe web nu mai păreau relevante. Designul își pierduse bucuria. Seturi complexe de instrumente de construcție și procesoare au înlocuit chiar plăcerea simplă de a scrie HTML și CSS.

Când am început să lucrez cu legendarul designer de ziare și reviste Mark Porter, am devenit fascinat de direcția de artă și designul editorial. Fiind cineva care nu a studiat nici la școala de artă, totul despre această zonă a designului era interesant și nou. Am citit toate cărțile despre directori de artă influenți pe care le-am putut găsi și am început să colectez reviste din locurile pe care le-am vizitat în întreaga lume.

Cu cât eram mai inspirat de designul revistelor, cu atât mai repede mi-a revenit entuziasmul pentru designul web. M-am întrebat de ce mulți designeri web cred că designul tipărit este de modă veche și irelevant pentru munca lor. M-am gândit de ce atât de puțin din ceea ce face designul tipărit special este transferat pe web.

Scopul meu a devenit să caut exemple inspiratoare de design editorial, să studiez ceea ce le face unice și să găsesc modalități de a adapta ceea ce am învățat pentru a crea modele mai convingătoare, captivante și mai imaginative pentru web.

Bibliotecile mele sunt acum pline de inspirație pentru design de reviste, dar colecția mea este încă în creștere. Am spațiu limitat, așa că sunt pretențios cu ceea ce iau. Cumpăr o selecție variată și rareori adun mai mult de un număr cu același titlu.

Caut aspecte interesante ale paginilor, tipografii inspiratoare și modalități inovatoare de a combina textul cu imaginile. Când o revistă are o mulțime de elemente de design interesante, o cumpăr. Totuși, dacă o revistă include doar câteva piese de inspirație, recunosc că nu sunt mai presus de a le fotografia înainte de a o pune înapoi pe raft.

Cumpăr cât de regulat pot reviste noi și, cu o săptămână înainte de Crăciun, m-am întâlnit cu câțiva prieteni la Londra. Nicio excursie la „Smoke” nu este completă fără o oprire la Magma și am cumpărat câteva reviste noi. După ce mi-am explicat adăugarea de inspirație, un prieten mi-a sugerat să scriu despre motivul pentru care găsesc designul de reviste atât de inspirat și despre cum revistele îmi influențează munca.

Acea conversație a stârnit ideea pentru o serie despre luarea unor decizii inspirate de design. În fiecare lună, voi alege o publicație, voi discuta despre ce face designul său distinctiv și cum am putea învăța lecții care ne vor ajuta să lucrăm mai bine pentru web.

Ca utilizator entuziast de HTML și CSS, voi explica, de asemenea, cum să implementez idei noi folosind cele mai noi tehnologii; Grilă CSS, Flexbox și Forme.

Mă bucur să vă spun că sunt inspirat și motivat din nou să design pentru web și sper că această serie vă poate inspira și pe voi.

Revista Avaunt: Documentarea extraordinarului

O singură privire la mine vă va spune că nu sunt foarte aventurier. Nu mă consider deosebit de cultă și soția mea glumește regulat despre ceea ce spune că este lipsa mea de stil.

Deci, ce m-a atras la revista Avaunt și la acoperirea acesteia despre „aventură”, „cultură” și „stil”, când există atât de multe reviste concurente și variate?

Adesea îmi ia doar câteva rânduri de pagină pentru a decide dacă o revistă oferă inspirația pe care o caut. Ceva trebuie să iasă în evidență în acele primele secunde pentru ca eu să privesc mai îndeaproape, fie că este vorba despre un aspect de pagină interesant, un tratament tipografic inspirator sau o combinație inovatoare de imagini cu text.

Avaunt are toate acestea, dar ceea ce m-a frapat cel mai mult a fost modul în care directorul său de artă a folosit culoarea, aspectul și tipul în diverse moduri, menținând în același timp o senzație constantă în întreaga reviste. Există fire de design distinctive care parcurg paginile Avaunt. Utilizările îndrăznețe ale unui serif cu șablon și ale fontului geometric sans-serif sunt deosebit de izbitoare, la fel ca și repetarea negrului, albului și roșu pe care designerii lui Avaunt îl folosesc într-o varietate de moduri. Multe dintre alegerile creative ale lui Avaunt sunt la fel de aventuroase ca și poveștile pe care le spune.

O mulțime de reviste își dedică primele rânduri publicității lucioase, iar Avaunt face același lucru. Trecând peste aceste reclame, găsiți pagina de conținut a lui Avaunt și fascinanta sa grilă modulară cu patru coloane.

Acest aspect menține conținutul ordonat în zonele spațiale, dar menține energia făcând fiecare zonă o dimensiune diferită. Acest aspect ar putea fi adaptat la multe tipuri de conținut online și ar trebui să fie ușor de implementat folosind CSS Grid. Sunt dornic să încerc asta.

Pentru titlurile sans-serif, standfirsts și alte elemente de tip care au un impact, Avaunt folosește MFred, conceput inițial pentru revista Elephant de Matt Willey în 2011. Matt a continuat să se ocupe de direcția artistică pentru lansarea Avaunt și a comandat un tipar tip serif pentru șablon. titlurile îndrăznețe ale revistei și cifrele distinctive.

Avaunt Stencil a fost proiectat în 2014 de studioul londonez A2-TYPE, care de atunci l-a făcut disponibil pentru licență. Există multe fonturi stencil disponibile, dar poate fi dificil să găsești unul care combină îndrăzneala și eleganța — ești în căutarea unui stencil serif găzduit pe Google Fonts? Stardos ar fi o alegere bună pentru tipul de dimensiune de afișare. Aveți nevoie de ceva mai unic, încercați Caslon Stencil de la URW.

Utilizarea de către Avaunt a unei grile modulare nu se termină cu pagina de conținut și este baza pentru o răspândire a curiozităților Muzeului Politehnic al Războiului Rece din Moscova, care m-a atras prima dată către revistă. Această răspândire folosește o grilă modulară cu trei coloane și zone spațiale de diferite dimensiuni.

Ceea ce mă fascinează la această răspândire a Războiului Rece este modul în care modulele din pagina verso se combină pentru a forma o singură coloană pentru conținutul textului. Chiar și cu această coloană, proporțiile grilei modulului încă informează poziția și dimensiunea elementelor din interior.

În timp ce designul multor pagini Avaunt este dedicat unei experiențe de lectură fabuloase, multe altele împing grila și își trag stilurile de tipografie de bază în direcții diferite. Text alb pe fundal întunecat, întinderi viu colorate unde obiectele sunt tăiate pentru a se amesteca cu fundalul. Capuci inițiale uriașe care umplu lățimea unei coloane și capace mari cu șablon care domină pagina.

Design-urile jucăușe ale lui Avaunt adaugă interes, iar aranjarea paginilor creează un ritm pe care îl văd foarte rar online. Aceste variații de design sunt menținute împreună prin utilizarea consecventă a Anversului - proiectat și de A2-TYPE - ca tip de literă pentru rularea textului și o temă de culoare negru, alb și roșu care se desfășoară în toată revista.

Studierea designului revistei Avaunt poate învăța și inspira. Cum o grilă modulară poate ajuta la structurarea conținutului în moduri creative, fără ca acesta să se simtă static. (Vă voi învăța mai multe despre grilele modulare mai târziu.)

Cum un set bine definit de stiluri poate deveni fundamentul pentru modele distinctive și diverse și, în sfârșit, cum crearea unui ritm într-o serie de pagini poate ajuta cititorii să rămână implicați.

Data viitoare când treceți pe lângă cel mai apropiat magazin de reviste, trimiteți o copie a revistei Avaunt. Este vorba despre aventură, dar pun pariu că vă poate inspira și modelele să fie mai aventuroase.

Salutați coloanele slabe

Pentru ceea ce pare o eternitate, au existat foarte puține inovații în designul grilei pentru web. Am sperat că provocările designului responsive vor avea ca rezultat abordări creative ale aspectului, dar, din păcate, opusul pare să fie adevărat.

În loc de design-uri grile originale, aranjamentele de conținut în unul, două, trei sau patru blocuri au devenit norma. Grilele cadru, precum cele incluse cu Bootstrap, rămân punctul de plecare pentru mulți designeri, indiferent dacă folosesc acele cadre sau nu.

Este adevărat că există mai multe motive pentru care atât de mult din web arată la fel ca designerii web care folosesc aceeași grilă. La urma urmei, au existat convenții similare pentru reviste și ziare de zeci de ani, dar cumva revistele nu și-au pierdut personalitatea așa cum și-au pierdut multe site-uri web.

Sunt mereu în căutare de inspirație pentru aspect, iar revistele sunt o sursă bogată. Citirea Avaunt mi-a amintit de o tehnică pe care am întâlnit-o cu ani în urmă, dar pe care nu am încercat-o. Această tehnică adaugă o coloană suplimentară îngustă la o grilă de coloane convențională. În designul tipărit, această coloană îngustă este adesea denumită „coloană sau măsură bastardă” și descrie un bloc de conținut care nu se conformează cu restul unei grile. (Aceasta fiind o publicație prietenoasă cu familia, o voi numi „columnă slabă”).

În aceste prime exemple, strângerea unei imagini într-o singură coloană reduce greutatea sa vizuală și deranjează echilibrul compoziției mele. A face ca imaginea să umple două coloane standard deranjează și acel echilibru delicat.

Împărțirea coloanei finale, apoi adăugarea jumătății din lățimea acesteia la alta, creează spațiul perfect pentru imaginea mea și un rezultat general mai plăcut.

Aș putea folosi o coloană subțire pentru a informa lățimea elementelor de design. Acest logo Mini Cooper se potrivește cu lățimea coloanei mele slabe, iar dimensiunea sa se simte echilibrată cu restul compoziției mele.

Uneori, conținutul nu se va potrivi într-o singură coloană, dar combinând lățimile coloanelor standard și subțiri, creez mai mult spațiu și o măsură mai bună pentru rularea textului. Pot plasa o coloană subțire oriunde într-un aspect, oriunde am nevoie de conținutul meu.

O coloană subțire goală adaugă spațiu alb care permite ochiului să se plimbe în jurul unui design. Asimetria creată prin plasarea unei coloane subțire între două coloane standard face, de asemenea, un aspect structurat să se simtă mai dinamic și mai energic.

O altă coloană slabă goală sculptează un jgheab larg în acest design și limitează textul meu rulant la o singură coloană, astfel încât înălțimea acesteia să reflecte formatul vertical al imaginii. De asemenea, pot folosi o coloană subțire pentru a transforma elementele tipografice în elemente de design interesante.

Dezvoltarea cu coloane slabe

Modele ca acestea sunt surprinzător de simplu de implementat folosind CSS-ul de astăzi. Am nevoie de doar patru elemente structurale; un logo, un antet, o figură, plus un articol care să conțină textul meu curent:

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

Încep cu un design pentru ecrane de dimensiune medie, aplicând CSS Grid elementului de corp din prima mea interogare media. La această dimensiune, nu am nevoie de o coloană subțire, așa că dezvolt o grilă simetrică cu trei coloane care se extinde uniform pentru a umple lățimea ferestrei de vizualizare:

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

Folosesc numere de linie pentru a plasa elemente în coloanele și rândurile din grilă. Îmi plasez logo-ul în prima coloană subțire și pe primul rând folosind un selector de atribute de potrivire subșir. Aceasta vizează o imagine cu „logo” oriunde în valoarea sa sursă:

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

Apoi, plasez elementul antet - care conține titlul meu și primul paragraf - în al doilea rând. Utilizarea numerelor de rând de la 1 la -1 răspândește acest antet în toate coloanele:

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

Cu display:grid; aplicat, toți descendenții direcți ai unui container-grilă devin elemente-grilă, pe care le pot plasa folosind zone, numere de rând sau nume.

Acest design include un element de siluetă cu o imagine mare Mini, plus text de lege despre designul original al modelului Cooper. Această cifră este crucială deoarece descrie o relație între img și figcaption. Cu toate acestea, în timp ce această cifră îmi face marcajul mai semnificativ, îmi pierd capacitatea de a plasa img și figcaption folosind CSS Grid, deoarece niciunul nu este descendenți direcți ai corpului în care mi-am definit grila.

Din fericire, există o proprietate CSS care, atunci când este folosită cu atenție, poate depăși această problemă. Nu am nevoie să stilizez figura, trebuie doar să-i modelez img și figcaption. Prin aplicarea display:contents; pentru silueta mea, îl elimin efectiv din DOM în scopuri de styling, astfel încât descendenții săi îi iau locul:

 figure { display: contents; }

Este demn de remarcat faptul că, deși afișarea elimină efectiv figura mea din DOM în scopuri de stil, orice proprietăți care moștenesc - inclusiv dimensiunile și stilurile fontului - sunt în continuare moștenite:

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

Îmi plasez articolul și îi stilez textul pe trei coloane folosind Multi-colon Layout, una dintre proprietățile mele CSS preferate:

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

Este timpul să implementăm un design care să includă o coloană subțire pentru ecrane mai mari. Folosesc o interogare media pentru a izola aceste noi stiluri, apoi creez o grilă cu cinci coloane care începe cu o coloană lată de 1fr:

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

Apoi adaug valori pentru a repoziționa antetul, img și figcaption și articol, amintindu-mi să resetați numărul de coloane pentru a se potrivi cu noua lățime:

 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; }

Schimbarea radicală a modului în care arată un design folosind numai CSS, fără a aduce modificări structurii HTML, mă face să zâmbesc, chiar și după aproape două decenii. De asemenea, zâmbesc când schimb compoziția pentru a crea un aspect dramatic diferit, fără a schimba grila. Pentru acest design alternativ, țintesc un aspect mai structurat.

Pentru a îmbunătăți lizibilitatea textului meu rulant, împart în trei coloane. Apoi, pentru a separa acest bloc de conținut de alte elemente de text, îmi plasez coloana subțire între primele două coloane standard. Nu este nevoie să schimb structura HTML-ului meu. Tot ce am nevoie sunt modificări minore ale valorilor grilei din foaia mea de stil. De data aceasta, valoarea mea de 1 fr lățime a coloanei skinny se află între două lățimi standard de coloană:

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

Îmi plasez antetul în al doilea rând și articolul într-un rând direct dedesubt:

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

Pentru că nici img și figcaption nu sunt descendenți direcți ai elementului body unde mi-am definit grila, pentru a le plasa am nevoie de display:contents; proprietate din nou:

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

În funcție de modul în care le utilizați, introducerea coloanelor subțiri în design-ul dvs. poate face conținutul mai lizibil sau poate transforma un aspect static într-unul care se simte dinamic și energic.

Coloanele subțiri sunt doar un exemplu de învățare a unei tehnici din tipărire și de utilizare a acesteia pentru a îmbunătăți un design pentru web. Aveam mâncărime să încerc coloane slabe și nu am fost dezamăgită.

Adăugarea unei coloane subțire la design-ul dvs. poate fi adesea o decizie inspirată. Vă oferă o flexibilitate suplimentară și poate transforma un aspect altfel static într-unul care este plin de energie.

Proiectarea rețelelor modulare

Revista Avaunt conține o mulțime de machete inspiratoare, dar vreau să mă concentrez în special pe două pagini. Această distribuție conține obiecte „Cold War Design” într-un design care ar putea fi aplicat la o mare varietate de tipuri de conținut.

La prima vedere, grilele modulare pot părea complicate, cu toate acestea, sunt ușor de lucrat. Mă surprinde că atât de puțini web designeri le folosesc. Vreau să schimb asta.

Când utilizați grile modulare cu atenție, acestea vă pot umple designurile cu energie. Sunt excelente pentru a pune ordine în cantități mari de conținut variat, dar pot crea și machete atractive din punct de vedere vizual atunci când există foarte puțin conținut.

Pentru acest design – inspirat de Avaunt – îmi bazez grila modulară pe șase coloane simetrice și patru rânduri uniform distanțate. Modulele grilă definesc plasarea și dimensiunea conținutului meu.

Leagă mai multe module împreună pentru a crea zone spațiale pentru imagini mari și text care rulează într-o singură coloană din stânga. Liniile de delimitare ajută la evidențierea structurii vizuale a paginii.

Acest tip de layout ar putea părea complicat la început, dar, în realitate, este foarte simplu de implementat. În loc să îmi bazez marcajul pe aspectul vizual, încep prin a folosi elementele cele mai potrivite pentru a-mi descrie conținutul. În trecut, aș fi folosit elemente de tabel pentru a implementa grile modulare. Înainte rapid câțiva ani, iar diviziunile au înlocuit acele celule din tabel. Incredibil, acum am nevoie de doar două elemente HTML structurale pentru a realiza acest design; un articol urmat de o listă ordonată:

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

Acest articol conține un titlu, paragrafe și un tabel pentru informații tabelare:

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

Grila modulară a modelelor Mini este cel mai complicat aspect vizual al designului meu, dar marcajul care îl descrie este simplu. Planurile sunt în ordinea datei, așa că o listă ordonată pare cel mai potrivit element HTML:

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

HTML-ul meu cântărește doar 2 Kb și este sub șaizeci de linii. Este o idee bună să validați acest marcaj, deoarece puțin timp petrecut validând devreme va economisi mult mai mult timp pentru depanarea CSS mai târziu. De asemenea, deschid pagina fără stil într-un browser, deoarece trebuie întotdeauna să mă asigur că conținutul meu este accesibil fără o foaie de stil.

Încep să dezvolt un aspect simetric cu trei coloane pentru ecrane de dimensiune medie prin izolarea stilurilor de grilă folosind o interogare media:

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

Articolul și lista ordonată sunt singurii descendenți direcți ai corpului, dar vreau să plasez ca elemente de grilă ceea ce conțin. Eu folosesc display:contents; pentru a-mi permite să plasez conținutul lor oriunde pe grila mea:

 article, ol { display: contents; }

Fiecare element din articolul meu ar trebui să cuprindă toate cele trei coloane, așa că le plasez folosind numere de linie, începând cu prima linie (1) și terminând cu linia finală (-1):

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

Articolele din lista mea ordonată sunt plasate uniform în grila cu trei coloane. Cu toate acestea, designul meu cere ca unele articole să se întimă pe două coloane, iar unul pe două rânduri. Selectorii de tip nth-of-type sunt instrumente perfecte pentru țintirea elementelor fără a recurge la adăugarea de clase în marcajul meu. Le folosesc, cuvântul cheie span și cantitatea de coloane sau rânduri pe care vreau ca elementele să se extindă:

 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; } 

Previzualizându-mi designul într-un browser, pot vedea că nu apare exact așa cum a fost planificat, deoarece unele module de grilă sunt goale. În mod implicit, fluxul normal al oricărui document aranjează elementele de la stânga la dreapta și de sus în jos, la fel ca limbile occidentale. Când elementele nu se potrivesc cu spațiul disponibil într-o grilă, algoritmul de plasare a grilei CSS lasă spațiile goale și plasează elementele pe următoarea linie.

Pot suprascrie valoarea implicită a algoritmului aplicând proprietatea grid-auto-flow și o valoare densă pentru containerul meu grid, în acest caz corpul:

 body { grid-auto-flow: dense; }

Rând este valoarea implicită a fluxului automat al grilei, dar puteți alege și coloană, coloană densă și rând densă. Utilizați grid-auto-flow cu înțelepciune, deoarece un browser umple orice modul gol cu ​​următorul element din fluxul de documente care se poate încadra în acel spațiu. Acest comportament modifică ordinea vizuală fără a modifica sursa, ceea ce poate avea implicații pentru accesibilitate.

Designul meu de dimensiune medie arată acum exact așa cum am planificat, așa că acum este timpul să-l adaptez pentru ecrane mai mari. Trebuie să fac doar modificări minore stilurilor de grilă pentru a-mi transforma mai întâi articolul într-o bară laterală – care se întinde pe toată înălțimea aspectului meu – apoi plasez anumite elemente din listă în module pe o grilă mai mare cu șase coloane:

 @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; } }

Urmărirea liniilor de plasare a grilei poate fi uneori dificilă, dar, din fericire, CSS Grid oferă mai multe modalități de a realiza un design modular de grilă. Folosirea grid-template-zone este o abordare alternativă și una din punctul meu de vedere nu primește suficientă atenție.

Folosind zonele-șablon-grilă, mai întâi definesc fiecare modul dându-i un nume, apoi plasez elemente fie într-un singur modul, fie în mai multe module adiacente cunoscute sub numele de zone spațiale. Acest proces poate suna complicat, dar este de fapt una dintre cele mai simple și mai evidente modalități de a folosi CSS Grid.

Dau fiecărui element o valoare a zonei grilei pentru a-l plasa în grila mea, începând cu logo-ul și articolul:

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

Apoi, atribui o zonă de grilă fiecăruia dintre elementele mele din listă. Am ales o valoare simplă i+n, dar am putut alege orice valoare, inclusiv cuvinte sau chiar litere precum a, b, c sau d.

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

Grila mea are șase coloane explicite și patru rânduri implicite, a căror înălțime este definită de înălțimea conținutului din interiorul lor. Îmi desenez grila în CSS folosind proprietatea grid-template-areas, unde fiecare perioadă (.) reprezintă un modul grilă:

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

Apoi, plasez elemente în acea grilă folosind valorile zonei grilei pe care le-am definit mai devreme. Dacă repet valori în mai multe module adiacente - fie pe coloane, fie pe rânduri - acel element se extinde pentru a crea o zonă spațială. Lăsarea unui punct (.) creează un modul gol:

 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"; }

În fiecare exemplu de până acum, am izolat stiluri de aspect pentru diferite dimensiuni de ecran folosind punctele de întrerupere a interogării media. Această tehnică a devenit modalitatea standard de a face față complexității designului web responsive. Cu toate acestea, există o tehnică pentru dezvoltarea grilelor modulare receptive fără a utiliza interogări media. Această tehnică profită de capacitatea unui browser de a redistribui conținutul.

Înainte de a merge mai departe, merită să ne amintim că designul meu necesită doar două elemente HTML structurale; o listă ordonată pentru conținut și un articol pe care îl transform într-o bară laterală când există suficientă lățime disponibilă pentru ca ambele elemente să stea una lângă alta. Când lățimea este insuficientă, acele elemente se stivuiesc vertical, în ordinea conținutului:

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

Lista ordonată reprezintă cea mai importantă parte a designului meu și ar trebui să ocupe întotdeauna cel puțin 60% din lățimea unei ferestre de vizualizare. Pentru a mă asigura că acest lucru se întâmplă, folosesc o declarație de lățime minimă:

 ol { min-width: 60%; }

În timp ce în mod normal recomand să folosiți CSS Grid pentru aspectul general al paginii și Flexbox pentru componente flexibile, pentru a implementa acest design, îmi întorc acest sfat.

Fac elementul de corp într-un container flexibil, apoi mă asigur că articolul meu crește pentru a umple tot spațiul orizontal utilizând proprietatea flex-grow cu o valoare de 1:

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

Pentru a mă asigura că lista mea ordonată ocupă tot spațiul disponibil ori de câte ori cele două elemente stau una lângă alta, îi dau o valoare ridicol de mare de creștere a flexibilității de 999:

 article { flex-grow: 999; }

Folosirea flex-basis oferă o lățime de pornire ideală pentru articol. Setând ambalajul containerului flexibil pentru a se înfășura, mă asigur că cele două elemente se stivuiesc atunci când lățimea minimă a listei este atinsă și nu există spațiu suficient pentru ca acestea să stea unul lângă altul:

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

Vreau să creez o grilă modulară flexibilă care să permită orice număr de module. În loc să specificați numărul de coloane sau rânduri, utilizarea repetiției permite unui browser să creeze câte module are nevoie. completarea automată umple tot spațiul disponibil, împachetând conținutul acolo unde este necesar. minmax oferă fiecărui modul o lățime minimă și maximă, în acest caz 10rem și 1fr:

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

Pentru a evita ca modulele să rămână goale, folosesc din nou grid-auto-flow cu o valoare dense. Algoritmul browserului va redistribui conținutul meu pentru a umple orice module goale:

 ol { grid-auto-flow: dense; }

La fel ca înainte, unele elemente din listă se întind pe două coloane, iar unul se întinde pe două rânduri. Din nou, folosesc selectoare nth-of-type pentru a viza anumite elemente din listă, apoi grid-coloană sau grid-row cu cuvântul cheie span urmat de numărul de coloane sau rânduri pe care vreau să le întinde:

 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; }

Acest CSS simplu creează un design receptiv care se adaptează mediului său fără a fi nevoie de mai multe interogări media sau de seturi separate de stiluri.

Prin utilizarea CSS-ului modern, inclusiv Grid și Flexbox, bazându-se pe capacitatea browserelor de a redistribui conținutul, plus câteva opțiuni inteligente privind dimensiunile minime și maxime, această abordare se apropie cel mai mult de atingerea obiectivelor unui web cu adevărat receptiv.

Citiți mai multe din seria

1. Decizii de design inspirate: Revista Avaunt
2. Decizii de design inspirate: chestiuni urgente
3. Decizii de design inspirate: Ernest Journal
4. Decizii de design inspirate: Alexey Brodovitch
5. Decizii de design inspirate: Bea Feitler
6. Decizii de design inspirate: Neville Brody
7. Decizii de design inspirate: Otto Storch
8. Decizii de design inspirate: Herb Lubalin
9. Decizii de design inspirate: Max Huber
10. Decizii de design inspirate: Giovanni Pintori
11. Decizii de design inspirate: Emmett McBain
12. Decizii de design inspirate: Bradbury Thompson

NB: Membrii Smashing Membrii Smashing au acces la un PDF frumos conceput al revistei Andy's Inspired Design Decisions și exemple complete de cod din acest articol. Puteți cumpăra PDF-ul și exemplele acestei probleme, precum și orice altă problemă direct de pe site-ul lui Andy.