I designer hanno usato le griglie per secoli e dopo più di 20 anni di attesa, sono finalmente approdate nel browser. Questa è la storia di CSS Grid. Ci sono volute molte persone nel posto giusto al momento giusto perché succedesse.
Argomento: Layout & Grids
I layout delle pagine web: modi, mezzi e significati. Grid e regole: colonne fisse, flessibili, fluidi, liquide ed elastiche. Ponderiamo le 500 viewport “standard” che possono essere supportate dai device Android. Dimensione, colore e contrasto. Centrare o non centrare. Scalare il testo e le colonne. Oltre i pixel. Layout e genere. Paradigmi per la stampa e approcci viewport-agnostic. Una nuova estetica. Lasciate che il web faccia il web.
CSS Grid in pratica: aggiungere Grid a un design esistente
CSS Grid è qui ed è più facile di quello che potreste pensare. Eric Meyer ci mostra come usare Grid in un design esistente facendo in modo che funzioni anche in browser non grid. Che foto! E un paio di “capito!”.
L’email può essere responsive?
Che le si ami o le si odi, non si può certo negare la popolarità delle email HTML. Inoltre, come il web prima di lei, la inbox è ufficialmente diventata mobile, con oltre il 50% delle email aperte sui device mobile. Tuttavia, il design delle email è una pratica scandalosamente datata. (Vi ricordate com’era scrivere codice prima che i web standard diventassero… standard?). Ma la programmazione di email non emdeve/em essere una lezione di frustrazione. Sebbene i designer di email debbano ancora creare i layout usando le tabelle e assegnargli stili tramite attributi HTML e (o mamma!) stili inline, un certo numero di intrepidi designer sta prendendo le moderne tecniche pionieristiche per il web e le sta applicando all’arcaica pratica dell’email design. Jason Rodriguez ci mostra come applicare i principi del responsive web design al regno, frustrante ma essenziale, dell’email design.
Creare style guide
Una style guide, nota anche come pattern library, è un documento sempre in evoluzione che descrive in dettaglio il codice front-end per tutti gli elementi e per tutti i moduli che compongono un sito web o un’applicazione. Inoltre, documenta il linguaggio visuale del sito, dagli stili per l’header alla palette di colori. In breve, una style guide ben fatta è una guida onnicomprensiva a cui può far riferimento l’intero team quando deve decidere sui cambiamenti e sulle iterazioni da fare su un sito. Susan Robertson ci mostra come creare e mantenere una style guide che aiuti tutti, dai product owners e product producers ai designer e agli sviluppatori a mantenere il brand e gli obiettivi di un sito in continuo mutamento.
Layout content out
Le griglie vanno più che bene per dividere una tela predefinita e guidare il modo in cui il contenuto rientra in una pagina, ma quando si progetta per la natura fluida del web, si ha bisogno di qualcosa di più responsive. Entrano quindi in gioco le proporzioni, che gli architetti, gli scultori e i book designer hanno tutti usato nel loro lavoro come aiuto per impostare il tono delle loro composizioni e per riportare le dimensioni del proprio materiale dallo schizzo al prodotto finale. I designer possono applicare un processo simile al web concentrandosi sul tono e sulla forma del nostro content first, per poi lavorare verso l’esterno per progettare dei sistemi di griglie fluide basate sui rapporti che consentono di creare armonia tra il contenuto, il layout e lo schermo. Nathan Ford fa un passo avanti verso layout web più sofisticati e incentrati sul contenuto.
Consideriamo anche gli schermi grandi
Da più di tre anni ormai stiamo creando design responsive e abbiamo a nostra disposizione delle librerie di pattern per il piccolo schermo e dei portfolio che provano le nostre abilità. Ma per quel che riguarda gli schermi più grandi? Mentre siamo abituati ad usare un design liquido per i breakpoint più piccoli, permettendo al nostro contenuto di espandersi e di contrarsi al bisogno, pochi di noi considerano quello che succede oltre la larghezza massima di circa 960 pixel, che può lasciare molti pixel inutilizzati sugli odierni display desktop. Mike Pick esplora il modo in cui si usa lo spazio negativo, la dimensione, la densità e gli strumenti di layout come le griglie, i moduli e le colonne per andare oltre la barriera del layout da 1024 pixel.
La griglia infinita
I grid system sono una componente chiave del graphic design, ma sono sempre stati pensati per pagine dalle dimensioni finite. Finora. Oggi progettiamo per un medium che non ha dimensioni finite, un medium che cambia forma per adattarsi meglio all’ambiente, in grado di mostrare un unico layout su uno smartphone, su un cartellone in Times Square e su tutto quello che sta tra questi due estremi. Progettiamo per una tela infinita e perciò, dobbiamo conoscere i grid system. Scopriamo le tecniche e le linee guida che possono aiutarci a dare una struttura al contenuto su qualunque schermo questo venga visualizzato.
L’estetica del Web
Oggi, con tutti i dispositivi che riescono a connettersi a internet, è diventato più semplice, praticamente necessario, accettare la natura flessibile del web. Il responsive web design è una best practice emergente e i nostri layout stanno cominciando a diventare più flessibili, ma, spesso, l’innovazione si concentra sulle implementazioni tecniche mentre sembra che si ignori l’estetica visiva. Mettiamola in un altro modo: stiamo adottando il responsive ma dimenticandoci del design. Adesso è il momento per cercare un’estetica propria di questo medium.
Più pixel più problemi
I dispositivi mobili hanno PPI sempre più alti, seguiti dai desktop computer e dai laptop in questo nuovo trend. Non c’è modo di evitarlo: i display ad alta densità di pixel o Retina stanno diventando mainstream e, come possiamo aspettarci, i nostri siti web appaiono leggermente sfuocati in tutto questo splendore retroilluminato. Ma prima di seguire d’impulso la direzione che ci spinge a sovradimensionare tutti i nostri siti, dobbiamo identificare quali problemi ci pongono e capire qual è il modo più responsabile di procedere, tenendo in mente prima di tutto i nostri utenti.
Un esempio di CV responsive
I veterani brizzolati del job hunting sanno fin troppo bene che un brillante curriculum vitae e un colloquio praticamente perfetto potrebbero ancora lasciarvi senza il lavoro dei vostri sogni. La concorrenza è feroce e non finisce mai. Trovare nuovi modi per distinguersi nell’implacabile economia di oggi è vitale per la sopravvivenza di noi designer/developer. Fortunatamente, il maghetto degli standard web nonché mobile web developer Andrew Hoffman ha trovato un modo dandy per differenziarci e che tra l’altro è perfetto per i lettori di citeA List Apart/cite. Vediamo come creare un curriculum semplice in HTML5/CSS3 che si adatti bene alle varie dimensioni della viewport, che sia semplice da aggiornare e mantenere e che non diventi mai obsoleto.
