{"id":426,"date":"2014-01-04T11:24:20","date_gmt":"2014-01-04T10:24:20","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/consideriamo-anche-gli-schermi-grandi\/"},"modified":"2014-01-04T11:24:20","modified_gmt":"2014-01-04T10:24:20","slug":"consideriamo-anche-gli-schermi-grandi","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/consideriamo-anche-gli-schermi-grandi\/","title":{"rendered":"Consideriamo anche gli schermi grandi"},"content":{"rendered":"

Con pi\u00f9 di tre anni di responsive web design<\/a> nei nostri portfolio, abbiamo un solido insieme di design pattern per far funzionare i siti web sugli schermi piccoli. Ma per gli schermi pi\u00f9 grandi?<\/p>\n

\u00c8 cosa comune ormai che i siti adottino un layout liquido per i breakpoint pi\u00f9 piccoli, il quale permette al contenuto di espandersi e contrarsi secondo necessit\u00e0 per ottenere il meglio dalla larghezza variabile dello schermo. Al lato opposto dello spettro, tuttavia, molti di quegli stessi siti hanno una larghezza massima di circa 960 pixel, che pu\u00f2 lasciare molti pixel inutilizzati su un attuale schermo desktop.<\/p>\n

Progettare per il grande schermo pu\u00f2 essere complicato: spazio negativo, dimensioni, densit\u00e0 e layout device come griglie, moduli e colonne possono essere cruciali per la gestione della gerarchia e dell’enfasi.<\/p>\n

I grandi schermi di solito hanno un orientamento landscape molto largo: una forma non proprio adatta alla pagina web tradizionale, a scorrimento verticale. Cos\u00ec come con gli schermi pi\u00f9 piccoli, c’\u00e8 una gran variet\u00e0 di dimensioni di schermo e di risoluzioni, ma nel caso degli schermi pi\u00f9 grandi le differenze vengono spesso ingigantite, partendo dagli 11 pollici dei laptop fino ad arrivare ai monitor desktop da 30 pollici.<\/p>\n

Date queste condizioni, non sorprende che molti layout desktop (come quello di A List Apart) siano progettati per andar bene per un monitor con una risoluzione da 1024×768. \u00c8 un retaggio di un’era precedente, in cui i design erano vincolati dalla risoluzione di schermo prevalente tra gli utenti. Oggi, con la maggioranza degli utenti desktop<\/a> su schermi pi\u00f9 larghi di 1024 pixel, una finestra del browser ingrandita a tutto schermo pu\u00f2 far diventare un layout da 960 pixel attentamente sviluppato un monolite<\/a> in un campo vuoto, costituito solo da spazio bianco.<\/p>\n

Ogni anno aumenta il numero di persone che accede ad internet con un dispositivo mobile<\/a> e quindi ha senso concentrare budget e timeline sulla creazione di esperienze utente buone per gli schermi pi\u00f9 piccoli. I layout mobile possono essere perfettamente usabili sui device pi\u00f9 grandi, ma lo stesso non si pu\u00f2 sempre dire per i layout desktop visti sugli schermi pi\u00f9 piccoli.<\/p>\n

Tuttavia, comprendendo anche gli schermi pi\u00f9 grandi, i designer hanno l’opportunit\u00e0 di lavorare all’interno di un “fold” pi\u00f9 grande, presentando all’utente pi\u00f9 contenuto simultaneamente, diminuendo lo scroll sulle pagine pi\u00f9 lunghe e creando una user experience pi\u00f9 ricca e pi\u00f9 ampia. Inoltre, usando le stesse pratiche che abbiamo sviluppato per adattare i layout agli schermi pi\u00f9 piccoli e identificando dei pattern comuni per gli schermi pi\u00f9 grandi, non dobbiamo necessariamente introdurre dei costi o del tempo extra per i nostri progetti.<\/p>\n

\n

Le sfide del contenuto<\/h2>\n

Cos\u00ec come per ogni design, la prima considerazione da fare quando si prendono in considerazione i breakpoint pi\u00f9 grandi \u00e8 il contenuto. La scrittura in forma lunga o breve, la fotografia, l’e-commerce, i video o le applicazioni web possono trarre beneficio da diversi approcci in modi differenti.<\/p>\n

La fotografia, i risultati di ricerca e altro contenuto presentato in un formato a griglia costituiscono dei semplici candidati per gli schermi grandi. Mostrare tanto contenuto quanto pu\u00f2 ospitarne lo schermo permette a un utente di scorrerlo rapidamente e di confrontare i risultati.<\/p>\n

D’altro canto, la lettura di pezzi lunghi \u00e8 una sfida per i breakpoint pi\u00f9 grandi. La lunghezza di riga pi\u00f9 estesa pu\u00f2 rendere difficile seguire il testo riga per riga, mentre le lunghezze di riga pi\u00f9 corte possono dare l’idea di saltare troppo o di far accelerare, rovinando il ritmo e la velocit\u00e0 del lettore.<\/p>\n

Per rendere la lettura pi\u00f9 confortevole, un designer deve dare equilibrio alla larghezza della colonna di testo (la misura<\/a>) rispetto alla dimensione e all’altezza di riga (leading) di ciascuna linea di testo. Classicamente, il numero appropriato di parole per singola colonna di testo equivale a 10 (Josef Muller-Brockmann<\/a>) oppure ogni riga deve contenere tra i 45 e i 75 caratteri (Robert Bringhurst<\/a>). Preso in un altro modo, Bringhurst nota anche che la misura di una colonna convenzionale di un libro \u00e8 circa 30 volte quella della dimensione del carattere usato, ma che questo numero pu\u00f2 ancora variare tra le 20 e le 40 volte la dimensione del carattere.<\/p>\n

Colonne pi\u00f9 larghe possono usare pi\u00f9 altezza di linea (line-height) per rendere pi\u00f9 semplice seguire il testo riga per riga, ma troppa line-height pu\u00f2 causare una separazione eccessiva delle righe, simile a ci\u00f2 che accade con gli articoli di ricerca accademici. In maniera analoga, al crescere della dimensione del testo in una colonna, il numero di righe che possono essere presentate verticalmente sullo schermo diminuisce, aumentando il bisogno di scorrere il testo e rompendo la concentrazione del lettore. Ridimensionare semplicemente il testo per i breakpoint pi\u00f9 grandi \u00e8 una soluzione limitata.<\/p>\n<\/div>\n

\n

Lavorare con i testi pi\u00f9 lunghi<\/h2>\n

The Great Discontent<\/a> dimostra come un sito possa usare l’art direction per adattarsi agli schermi pi\u00f9 grandi senza necessariamente occupare ogni singolo pixel nella finestra del browser. Ogni articolo espande la propria grafica artistica in cima alla pagina per riempire la viewport, con l’effetto di risultare sorprendentemente puro alla prima visualizzazione. Il contenuto principale di ciascun articolo \u00e8 impostato in una colonna centrale relativamente sottile, ma le sidebar, le citazioni e le immagini inline si espandono oltre questa colonna. Facendo uscire questo contenuto dalla colonna principale si crea una forma asimmetrica che fa da complemento alla larghezza piena della grafica in cima alla pagina, dando l’illusione di un’esperienza a finestra intera senza compromessi sulla leggibilit\u00e0. Immagini grandi come queste possono avere un costo, tuttavia, dal momento che l’equilibrio tra la qualit\u00e0 dell’immagine e il peso della pagina<\/a> complessivo devono essere tenuti in considerazione.<\/p>\n

\"The<\/p>\n

The Great Discontent usa una grafica audace in cima ad ogni articolo per riempire la viewport.<\/p>\n<\/div>\n

\"Il<\/p>\n

Il sito di Roger Ebert ingrandisce quasi tutti gli elementi della pagina, riducendo il contenuto visibile.<\/p>\n<\/div>\n

Il sito di Roger Ebert, recentemente rilanciato, gestisce i breakpoint pi\u00f9 grandi semplicemente aumentando la grandezza massima della pagina e degli elementi della pagina in maniera proporzionale. In teoria, questo approccio potrebbe funzionare, ma l’esecuzione non ha avuto completamente successo. Elementi come l’header si ingrandiscono sia verticalmente sia orizzontalmente, con la conseguenza che la quantit\u00e0 di contenuto mostrata prima del fold \u00e8 drasticamente ridotta. Inesplicabilmente, il copy del corpo principale sulle pagine pi\u00f9 ricche di contenuto non si ridimensiona proporzionalmente agli altri elementi della pagina, quindi sembra rimpicciolito rispetto al resto, oltre ad essere impostato a una dimensione che \u00e8 troppo piccola per la misura della colonna centrale.<\/p>\n

\"Medium\"<\/p>\n

Medium sistema i commenti contestualmente, nel margine destro esteso.<\/p>\n<\/div>\n

Usando i margini allargati di uno schermo pi\u00f9 largo per del contenuto correlato o tangenziale, come il layout dei commenti di Medium<\/a> \u00e8 un’altra idea che sembra adattarsi bene alle pubblicazioni pi\u00f9 lunghe. Quando la colonna con il contenuto principale viene ingrandita a tutto schermo sui monitor pi\u00f9 piccoli, si sposta di fianco per mostrare l’area dei commenti; sugli schermi pi\u00f9 grandi, i commenti vengono mostrati nello spazio del margine che si ha a disposizione.<\/p>\n

Inoltre, mi \u00e8 sempre piaciuto l’uso che fa Grantland<\/a> della colonna in basso a destra per le note a margine, che sfrutta gli schermi pi\u00f9 grandi pur mantenendo l’attenzione su una colonna centrale leggibile. Le foto, le figure, gli aside, le citazioni e altro contenuto correlato pu\u00f2 essere esteso nei margini delle viewport pi\u00f9 ampie. Questo permette ai designer di estendere la griglia verticale verso l’esterno per creare variet\u00e0 pur preservando il flusso del testo principale.<\/p>\n

Le CSS feature pi\u00f9 nuove come le columns<\/a> e le regions<\/a> potrebbero costituire dei tool utili per migliorare la lettura di testi lunghi sugli schermi pi\u00f9 ampi. Le colonne basate su CSS sono adesso supportate nella maggioranza dei nuovi browser e potrebbero essere utilizzate all’interno delle sezioni di un articolo per massimizzare l’utilizzo dello schermo pur mantenendo una buona misura per la leggibilit\u00e0 del testo. Se avete uno schermo grande, ad esempio, guardate la mia demo basata sulle colonne<\/a> di questo articolo.<\/p>\n

Come misura di progressive enhancement, i browser pi\u00f9 vecchi che non supportano queste feature potrebbero essere ristretti ad una singola colonna di misura appropriata.<\/p>\n<\/div>\n

\n

Spezzare il contenuto sugli schermi grandi<\/h2>\n

Suddividere il contenuto in “tiles” permette agli utenti di processare l’informazione presente sulle pagine con molto contenuto in maniera rapida ed efficiente ed \u00e8 un trucco adeguato al responsive design, perch\u00e9 permette di impilare facilmente in maniera gerarchica o di sistemarlo in colonne per diversi breakpoint.<\/p>\n

Il vantaggio di questa tecnica per grandi schermi \u00e8 che ogni pezzo o banda di contenuto pu\u00f2 utilizzare un layout diverso per ottimizzarne la lettura o l’impatto. Un buon esempio di questo approccio \u00e8 il sito del consiglio comunale della citt\u00e0 di Manchester<\/a>, che usa diversi gruppi di moduli a larghezze ristrette insieme a un pezzo fotografico a tutta ampiezza per creare impatto ed emozione. Il layout si adatta con fluidit\u00e0 a diverse viewport mantenendo una larghezza e un layout appropriati per il contenuto di ciascun pezzo.<\/p>\n

\"Manchester<\/p>\n

Manchester City Council e i “tiles” di contenuto.<\/p>\n<\/div>\n

\"Juliana<\/p>\n

Juliana Bicycles tratta il contenuto in “tiles” in maniera pi\u00f9 visuale.<\/p>\n<\/div>\n

Juliana Bicycles usa un approccio pi\u00f9 visuale alla suddivisione del contenuto, combinando bande orizzontali con riquadri flessibili per creare un sito responsive ricco e convincente che si ridimensiona anche per le larghezze degli schermi pi\u00f9 grandi. La navigazione \u00e8 ricreata come un carousel a tutta ampiezza della finestra con delle belle fotografie di sfondo. IL contenuto \u00e8 presentato in blocchi modulari e gli spazi tra una colonna e l’altra (gutter) che appaiono tra le “tiles” sono eliminati sugli schermi delle dimensioni di quelli dei tablet e di altri device mobile. Una texture tipo carta riempie gli spazi vuoti tra le “tiles” e aiuta anche a riempire lo schermo nei breakpoint pi\u00f9 larghi. Usando dei moduli basati sull’immagine in questo modo pu\u00f2 essere costoso dalla prospettiva della larghezza di banda, ma \u00e8 un gran modo per far s\u00ec che l’utente navighi rapidamente mostrando piuttosto che dicendo.<\/p>\n

\u00a0<\/p>\n<\/div>\n

\n

Usare le “tiles” con il contenuto modulare<\/h2>\n

L’ovvio vantaggio di uno schermo grande \u00e8 l’abilit\u00e0 di vedere molto contenuto tutto in una volta.<\/p>\n

\"Google<\/p>\n

Google Images mostra quante pi\u00f9 immagini possibili nella viewport.<\/p>\n<\/div>\n

Con del contenuto basato su collezioni come le foto, racchiudere in riquadri pu\u00f2 essere un modo efficace per riempire i grandi schermi. Lo vediamo ogni giorno quando cerchiamo qualcosa in Google Images<\/a>: i risultati si dispongono a riempire la viewport, presentando una gran variet\u00e0 tra cui cercare in una singola scansione.<\/p>\n

\"Pinterest\"<\/p>\n

La pagina a “tiles” di Pinterest utilizza la metafora dell’album dei ritagli o del collezionista.<\/p>\n<\/div>\n

Anche Pinterest<\/a> usa un layout a “tiles” per le immagini, con l’aggiunta di testo e spazio bianco per mitigare quello che potrebbe essere un layout oltremodo pieno. Sugli schermi pi\u00f9 grandi le “tiles” di preview dell’immagine sembrano affiancarsi indefinitamente. Per un sito di collezioni, in cui la user experience consiste nel collezionare ed evidenziare rapidamente le cose preferite, riempire la viewport con delle thumbnails rende pi\u00f9 semplice scorrere rapidamente tra le immagini e creare un soddisfacente senso di completezza.<\/p>\n

\"Uniqlo\"<\/p>\n

L’ampia vista di Uniqlo permette agli acquirenti di confrontare visualmente gli oggetti.<\/p>\n<\/div>\n

Uniqlo<\/a> usa un grande layout a “tiles” che oltretutto appare ben progettato e spazioso. Gli oggetti sono raccolti insieme con grandi header e agiscono da paraurti tra gli insiemi per aggiungere un po’ di spazio per respirare. Affiancare i prodotti in una vasta area permette agli acquirenti di confrontare rapidamente gli oggetti in maniera visuale. Allo stesso tempo, lo spazio bianco, le foto della modella e la variet\u00e0 in dimensione aggiunge raffinatezza al “look and feel” generale e aiuta a rafforzare il punto che il design \u00e8 un importante elemento che contraddistingue la linea di prodotti di Uniqlo.<\/p>\n

N\u00e9 Pinterest n\u00e9 Google Images sono siti responsive o adaptive: entrambe utilizzano un sito separato per gli utenti mobile. Uniqlo \u00e8 solo adaptive per gli schermi pi\u00f9 grandi: sugli schermi pi\u00f9 piccoli viene visualizzato il layout desktop pi\u00f9 stretto. Sebbene questi siti potrebbero non essere dei modelli completi per il responsive design, possiamo guardare a questi come esempi per espandere questo tipo di contenuto.<\/p>\n<\/div>\n

\n

Tecniche grafiche<\/h2>\n

Un’altra tecnica interessante per gli schermi pi\u00f9 grandi \u00e8 basata pi\u00f9 sul design classico per la stampa, piuttosto che ristrutturare o manipolare il contenuto per riempire il browser.<\/p>\n

\"Institut<\/p>\n

Gli elementi nella griglia estendono i bordi della finestra sul sito dell’Institut Choiseul.<\/p>\n<\/div>\n

Institut Choiseul confina il contenuto di ciascuna pagina in una griglia strutturata nel centro della finestra, ma tiene d’occhio efficacemente una presenza sul grande schermo estendendo verso l’esterno un campo di colore dal logo al contenuto principale della pagina verso il bordo sinistro della viewport. Il link “Back to Top” appare nell’angolo in basso a sinistra della viewport quando si scrolla la pagina, un piccolo tocco che tiene d’occhio l’intera finestra per la pagina. La solida griglia e i campi larghi di colore danno al sito un tono sobrio e logico che evoca lo stile da International Design<\/a> degli anni ’50 e ’60.<\/p>\n

\u00a0<\/p>\n

\"Kanselarij<\/p>\n

Kanselarij der Nederlandse Orden inquadra una griglia centrale flessibile in bande di colore asimmetriche.<\/p>\n<\/div>\n

Kanselarij der Nederlandse Orden<\/a> ha uno stile simile, con delle bande di colore asimmetriche che forniscono il background alla griglia flessibile centrata. Poich\u00e9 la griglia si espande come una percentuale della larghezza totale della finestra, il contenuto gioca anche una parte nel riempire lo schermo, ma i campi di colore squadrati aggiungono un livello di sofisticatezza a quello che altrimenti sarebbe un layout piuttosto ordinario.<\/p>\n

Piccoli effetti come un tono di colore o una texture nel background, o rimuovere delle linee squadrate dai bordi di un layout, pu\u00f2 portare molto lontano nella creazione di un senso di completezza nella finestra a tutto schermo. L’uso creativo dell’asimmetria invece dei layout scarni simili a delle torri possono anche fare in modo che i lettori non anneghino nei margini bianchi.<\/p>\n<\/div>\n

\n

Per finire<\/h2>\n

Semplicemente estendendo le tecniche comuni per adattare il contenuto ai breakpoint pi\u00f9 piccoli, notiamo delle opportunit\u00e0 anche per i breakpoint pi\u00f9 grandi. I siti che usano una solida griglia avranno vita pi\u00f9 semplice, cos\u00ec come una griglia ben strutturata non dovrebbe avere alcun problema ad espandersi in uno spazio pi\u00f9 ampio.<\/p>\n

Ovviamente, la considerazione pi\u00f9 importante da fare per qualunque design \u00e8 il contenuto e quindi quello deve essere la base per un qualunque sforzo volto a espandere un design perch\u00e9 riempia un grande schermo. Per lunghe letture \u00e8 importante creare un ritmo e un flusso buoni, cos\u00ec che il testo possa essere letto senza distrazioni. Per i fotografi e i grafici, lo spazio e la dimensione contribuiscono direttamente all’impatto. I siti del governo e quelli orientati ai servizi devono fornire un semplice accesso ai task e alle informazioni. I siti di e-commerce devono rendere semplice per i clienti valutare e acquistare dei prodotti. La densit\u00e0 del layout dovrebbe riflettere il tono del sito: maggior densit\u00e0 per un’esperienza pi\u00f9 attiva, meno per un tono pi\u00f9 lento e riflessivo. Proprio come incorniciare una foto, riempire la viewport pu\u00f2 far sembrare il design pi\u00f9 grande e pi\u00f9 forte, proprio come incorniciare un design in molto spazio bianco pu\u00f2 renderlo pi\u00f9 elegante o pi\u00f9 prezioso.<\/p>\n

Pu\u00f2 essere vero che gli utenti su desktop hanno il lusso di poter ridimensionare la finestra del browser se tutto quello spazio bianco li mettesse a disagio, a differenza degli utenti dei device pi\u00f9 piccoli. Potrebbe anche essere vero che non tutti gli utenti desktop navigano con finestre grandi quanto tutto lo schermo. Ma, proprio come per il mobile, non dovremmo fare delle supposizioni riguardo a quali device gli utenti stanno usando per vedere in questo momento il nostro contenuto, ma soprattutto per il futuro. Gli schermi grandi, in alcuni casi, possono fornire sia una usabilit\u00e0 migliore per gli utenti sia una palette pi\u00f9 ricca per i designer. Sta a noi usare questi bordi estesi a nostro vantaggio.<\/p>\n

Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Da pi\u00f9 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\u00e0. Ma per quel che riguarda gli schermi pi\u00f9 grandi? Mentre siamo abituati ad usare un design liquido per i breakpoint pi\u00f9 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\u00f2 lasciare molti pixel inutilizzati sugli odierni display desktop. Mike Pick esplora il modo in cui si usa lo spazio negativo, la dimensione, la densit\u00e0 e gli strumenti di layout come le griglie, i moduli e le colonne per andare oltre la barriera del layout da 1024 pixel.<\/p>\n","protected":false},"author":818,"featured_media":7000718,"comment_status":"open","ping_status":"open","template":"","categories":[272,273,103,274],"tags":[],"coauthors":[407],"class_list":["post-426","article","type-article","status-publish","has-post-thumbnail","hentry","category-layout-and-grids","category-mobile-multidevice","category-numero-86-4-gennaio-2014","category-responsive-design"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=426"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000718"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=426"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}