La strada per il web design resiliente
Pubblicato: 2022-03-10Il design aggiunge chiarezza. Usando colore, tipografia, gerarchia, contrasto e tutti gli altri strumenti a loro disposizione, i designer possono prendere un miscuglio disordinato di informazioni e trasformarlo in qualcosa di facile da usare e piacevole da vedere. Come la vita stessa, il design può ottenere una piccola vittoria contro l'entropia dell'universo, creando sacche di ordine dalle materie prime del caos.
Ulteriori letture su SmashingMag: Link
- Eredità CSS, The Cascade e Global Scope: i tuoi nuovi vecchi peggiori migliori amici
- Migliorare le tue capacità di progettazione dell'interfaccia utente con Copywork
- Perseguire il valore semantico
Il Libro di Kells è un manoscritto splendidamente illustrato creato oltre 1200 anni fa. Si è tentati di definirla un'opera d'arte, ma è un'opera di design. Lo scopo del libro è di comunicare un messaggio; i vangeli della religione cristiana. Attraverso l'uso dell'illustrazione e della calligrafia, quel messaggio viene veicolato in un contesto invitante, rendendolo piacevole alla vista.
Il design funziona entro i vincoli. I monaci Colombani che hanno realizzato il Libro di Kells hanno lavorato con quattro inchiostri su pergamena, un materiale fatto di pelle di vitello. I materiali erano semplici ma chiaramente definiti. I designer cenobici conoscevano le tonalità degli inchiostri, il peso della pergamena e, soprattutto, conoscevano le dimensioni di ogni pagina.
Le stampe e la rivoluzione
I materiali e i processi sono cambiati e si sono evoluti nell'ultimo millennio circa. L'invenzione di Gutenberg dei caratteri mobili fu una rivoluzione nella produzione. Mentre per creare una seconda copia del Libro di Kells ci sarebbe voluto tanto tempo quanto per creare la prima, più copie della Bibbia di Gutenberg potrebbero essere prodotte con molto meno lavoro. Anche così, molti dei modelli di progettazione come capolettera e colonne sono stati riportati da manoscritti miniati. Il processo di progettazione fondamentale è rimasto lo stesso: conoscendo la larghezza e l'altezza della pagina, i designer hanno creato una piacevole disposizione degli elementi.
Le tecniche del disegnatore di stampe hanno raggiunto il loro apice nel 20° secolo con l'ascesa dello Swiss Style. Il suo layout strutturato e la chiara tipografia sono esemplificati nel lavoro di designer come Josef Muller‐Brockmann e Jan Tschichold. Hanno formulato sistemi di griglia e scale tipografiche basati sui secoli precedenti di progettazione.
Conoscendo il rapporto tra le dimensioni di una pagina, i designer potrebbero posizionare gli elementi con il massimo effetto. La pagina è un vincolo e il sistema a griglia è un modo per imporre un ordine su di essa.
Portare il tuo talento sul web
Quando il web ha iniziato a conquistare il mondo negli anni '90, i designer hanno iniziato a migrare dalla carta ai pixel. Creazione di siti web killer di David Siegel è arrivato proprio al momento giusto. I suoi intelligenti hack TABLE e GIF hanno permesso ai designer di replicare lo stesso tipo di layout che avevano precedentemente creato per la pagina stampata.
Quei layout TABLE in seguito sono diventati layout CSS , ma il pensiero fondamentale è rimasto lo stesso: la finestra del browser, come la pagina precedente, è stata trattata come un noto vincolo su cui i designer hanno imposto l'ordine.
C'è un problema con questo approccio. Mentre un pezzo di carta o pergamena ha un rapporto fisso, una finestra del browser potrebbe essere di qualsiasi dimensione. Non c'è modo per un web designer di sapere in anticipo quale sarà la dimensione della finestra del browser di una determinata persona.
I designer si erano abituati a conoscere le dimensioni dei rettangoli all'interno dei quali stavano progettando. Il web ha rimosso quel vincolo.
Se non è risolto, non romperlo
Non c'è niente di così spaventoso come l'ignoto. Queste parole dell'ex segretario alla Difesa degli Stati Uniti Donald Rumsfeld dovrebbero essere davvero terrificanti (sebbene all'epoca il consenso generale fosse che suonassero come sciocchezze):
Ci sono noti noti. Ci sono cose che sappiamo di sapere. Sappiamo anche che ci sono incognite conosciute, vale a dire sappiamo che ci sono alcune cose che non sappiamo. Ma ci sono anche incognite sconosciute, quelle che non sappiamo di non conoscere.
Il rapporto della finestra del browser è solo un esempio di un noto sconosciuto sul web. Il modo più semplice per affrontare questa situazione è utilizzare unità flessibili per il layout: percentuali anziché pixel. Invece, i designer hanno scelto di fingere che le dimensioni del browser fossero note. Hanno creato layout a larghezza fissa per una dimensione specifica della finestra.
Agli albori del web, la maggior parte dei monitor aveva una larghezza di 640 pixel. I web designer hanno creato layout larghi 640 pixel. Poiché sempre più persone hanno iniziato a utilizzare monitor larghi 800 pixel, sempre più designer hanno iniziato a creare layout larghi 800 pixel. Alcuni anni dopo, sono diventati 1024 pixel. Ad un certo punto i web designer hanno optato per il numero magico di 960 pixel come larghezza ideale.
Era come se la comunità del web design stesse partecipando a un'allucinazione consensuale condivisa. Piuttosto che riconoscere la natura flessibile della finestra del browser, hanno scelto di accontentarsi di una larghezza impostata come ideale... anche se ciò significava cambiare l'ideale ogni pochi anni.
Non tutti sono stati d'accordo con questo memo in tutto il web.
Dao o dao no
Nel 2000 la rivista online A List Apart ha pubblicato un articolo intitolato A Dao of Web Design . Ha superato la prova del tempo straordinariamente bene.
Nell'articolo, John Allsopp sottolinea che i nuovi mezzi spesso iniziano assumendo i tropi di un mezzo precedente. Scott McCloud fa lo stesso punto nel suo libro Understanding Comics :
Ogni nuovo mezzo inizia la sua vita imitando i suoi predecessori. Molti dei primi film erano come rappresentazioni teatrali filmate; molto presto la televisione era come la radio con immagini o film ridotti.
Con questo in mente, non sorprende che il web design sia iniziato con i tentativi di ricreare i tipi di layout che i designer conoscevano dal mondo della stampa. Come ha detto Giovanni:
I "siti web killer" sono solitamente quelli che domano la natura selvaggia del web, vincolando le pagine come se fossero fatte di carta — Desktop Publishing per il Web.
Il web design può trarre vantaggio dai secoli di apprendimento che hanno informato il design della stampa. Massimo Vignelli, il cui lavoro incarna lo stile svizzero, inizia il suo famoso Canone con un elenco di The Intangibles che include disciplina, adeguatezza, atemporalità, responsabilità e altro ancora. Tutto in quell'elenco può essere applicato alla progettazione per il web. Il Canone di Vignelli include anche un elenco di The Tangibles. Tale elenco inizia con i formati carta.
Il web non è cartaceo. I noti vincoli della carta - la sua larghezza e altezza - semplicemente non esistono. Il web non è vincolato da dimensioni preimpostate. A Dao Of Web Design di John Allsopp ha invitato i professionisti a riconoscere questo:
Il controllo che i designer conoscono nel mezzo di stampa, e spesso desiderano nel mezzo web, è semplicemente una funzione della limitazione della pagina stampata. Dovremmo accettare il fatto che il web non ha gli stessi vincoli e progettare per questa flessibilità.
Questa chiamata alle armi è rimasta inascoltata. I designer sono rimasti nella loro allucinazione consensuale simile a Matrix in cui il browser di tutti aveva la stessa larghezza. È comprensibile. C'è un grande conforto nel credere a una finzione rassicurante, soprattutto quando conferisce l'illusione del controllo.
C'è un altro motivo per cui i web designer si sono aggrappati alla comodità dei loro layout a larghezza fissa. Gli strumenti del mestiere hanno incoraggiato un approccio simile alla carta alla progettazione per il web.
Nave Di Strumenti
È un povero artigiano che incolpa sempre i suoi strumenti. Eppure ogni artigiano è influenzato dalla scelta degli strumenti. Come ha affermato il collega di Marshall McLuhan, John Culkin, "diamo forma ai nostri strumenti e successivamente i nostri strumenti ci modellano".
Quando la disciplina del web design stava emergendo, non esisteva un software creato appositamente per visualizzare i layout sul web. Invece i designer hanno cooptato gli strumenti esistenti.
Adobe Photoshop era originariamente destinato alla manipolazione delle immagini; ritocco di foto, applicazione di filtri, composizione di livelli e così via. A metà degli anni Novanta era diventato uno strumento indispensabile per i grafici. Quando quegli stessi designer hanno iniziato a progettare per il web, hanno continuato a utilizzare il software che già conoscevano.
Se hai mai usato Photoshop saprai cosa succede quando selezioni “Nuovo” dal menu “File”: ti verrà chiesto di inserire dimensioni fisse per la tela su cui stai per lavorare. Prima di aggiungere un singolo pixel, è stata presa una decisione progettuale fondamentale che rafforza l'allucinazione consensuale di una rete inflessibile.
Photoshop da solo non può prendersi la colpa del pensiero a larghezza fissa. Dopotutto, non è mai stato concepito per la progettazione di pagine web. Alla fine, il software è stato rilasciato con l'obiettivo specifico di creare pagine web. Dreamweaver di Macromedia è stato uno dei primi esempi di strumento di web design. Sfortunatamente ha funzionato secondo l'idea di WYSIWYG : What You See Is What You Get.
Se è vero che quando si progetta con Dreamweaver, ciò che si vede è ciò che si ottiene, sul Web non vi è alcuna garanzia che ciò che si vede sia ciò che tutti gli altri riceveranno. Ancora una volta, i web designer sono stati incoraggiati ad abbracciare l'illusione del controllo piuttosto che affrontare l'incertezza intrinseca del loro mezzo.
È possibile superare i pregiudizi incorporati di strumenti come Photoshop e Dreamweaver, ma non è facile. Ci piacerebbe pensare che abbiamo il controllo dei nostri strumenti, che li pieghiamo alla nostra volontà, ma la verità è che tutto il software è un software supponente. Come ha affermato il futurista Jamais Cascio, "il software, come tutte le tecnologie, è intrinsecamente politico":
Il codice riflette inevitabilmente le scelte, i pregiudizi e i desideri dei suoi creatori.
Non c'è da stupirsi quindi che i designer che lavorano con la grana dei loro strumenti abbiano prodotto siti Web che rispecchiavano le ipotesi incorporate in quegli strumenti, ipotesi sulla capacità di controllare e domare le incognite conosciute del World Wide Web.
Morsi di realtà
Entro la metà del primo decennio del ventunesimo secolo, il campo del web design era sostenuto da molteplici presupposti:
- che tutti stavano navigando con uno schermo abbastanza grande da visualizzare un layout largo 960 pixel;
- che tutti avessero accesso a Internet a banda larga, mitigando la necessità di ottimizzare il numero e la dimensione dei file delle immagini sulle pagine web;
- che tutti stavano utilizzando un browser Web moderno con gli ultimi plug-in installati.
Una minoranza di web designer chiedeva ancora layout fluidi. Mi sono annoverato tra loro. Siamo stati tollerati più o meno allo stesso modo di un profeta di sventura all'angolo della strada che indossava un sandwich con la scritta "The End Is Nigh" - una distrazione scomoda ma innocua.
Ci sono stati anche designer che hanno suggerito che Photoshop potrebbe non essere lo strumento migliore per il Web e che potremmo considerare di progettare direttamente nel browser utilizzando CSS e HTML . Tale approccio è stato criticato in quanto troppo vincolante. Come abbiamo visto, Photoshop ha i suoi vincoli ma quelli erano stati interiorizzati da designer così a loro agio nell'usare lo strumento che non ne riconoscevano più i difetti.
Questo dibattito sui meriti della progettazione di composizioni di Photoshop e della progettazione nel browser sarebbe rimasto in gran parte accademico se non fosse stato per un evento che avrebbe scosso per sempre il mondo del web design.
Bloccato all'interno del cellulare
Un iPod. Un telefono. E un comunicatore Internet. Un iPod. Un telefono... capisci? Questi non sono tre dispositivi separati. Questo è un dispositivo. E lo chiamiamo: iPhone.
Con queste parole nel 2007, Steve Jobs ha presentato un dispositivo mobile che potrebbe essere utilizzato per navigare nel World Wide Web.
I dispositivi mobili abilitati al Web esistevano prima dell'iPhone, ma erano per lo più limitati alla visualizzazione di un formato di file ottimizzato per dispositivi mobili chiamato WML . Pochissimi dispositivi possono eseguire il rendering di HTML . Con l'introduzione dell'iPhone e dei suoi concorrenti, i dispositivi palmari erano dotati di moderni browser Web in grado di essere cittadini di prima classe sul Web. Questo ha messo in subbuglio il campo del web design.
I presupposti che avevano costituito la base per un intero settore erano ora messi in discussione:
- Come facciamo a sapere se le persone utilizzano schermi desktop larghi o schermi palmari stretti?
- Come facciamo a sapere se le persone stanno navigando con una connessione a banda larga veloce a casa o con una rete mobile lenta?
- Come facciamo a sapere se un dispositivo supporta anche una particolare tecnologia o plug-in?
L'ascesa dei dispositivi mobili stava confrontando i web designer con la vera natura del web come mezzo flessibile pieno di incognite.
La reazione iniziale a questa realtà appena esposta ha coinvolto la segmentazione. Piuttosto che ripensare al sito Web ottimizzato per desktop esistente, cosa accadrebbe se i dispositivi mobili potessero essere spostati in un silo separato? Questo ghetto mobile si trovava spesso in un sottodominio separato rispetto al sito "reale": m.example.com o mobile.example.com.
Questo approccio segmentato è stato rafforzato dall'uso del termine "Web mobile" invece del termine più accurato "il Web sperimentato sui dispositivi mobili". Nella tradizione delle loro prime allucinazioni consensuali, i web designer pensavano a mobile e desktop non solo come classi separate di dispositivi, ma come siti web completamente separati.
Determinare quali dispositivi sono stati inviati a quale sottodominio ha richiesto il controllo della stringa dell'agente utente del browser rispetto a un elenco in continua espansione di browser noti. Era una gara della Regina Rossa solo per tenersi aggiornati. Oltre ad essere soggetto a errori, era anche abbastanza arbitrario. Anche se una volta sarebbe stato facile classificare, ad esempio, un iPhone come dispositivo mobile, tale distinzione è diventata più difficile nel tempo. Con l'introduzione di tablet come l'iPad, non era più chiaro quali dispositivi dovessero essere reindirizzati all'URL mobile. Forse era necessario un nuovo sottodominio - t.example.com o tablet.example.com - insieme a un nuovo termine come "il tablet web". Ma che dire del "web TV " o del "web frigo abilitato a Internet?"
Noi siamo uno
La pratica di creare siti diversi per dispositivi diversi semplicemente non era scalabile. Andava anche contro un ideale di lunga data chiamato One Web:
Un Web significa mettere a disposizione degli utenti, per quanto ragionevole, le stesse informazioni e servizi indipendentemente dal dispositivo che stanno utilizzando.
Ma questo non significa che i dispositivi con schermo piccolo debbano avere layout di pagina progettati per dimensioni maggiori:
Tuttavia, ciò non significa che le stesse informazioni siano disponibili esattamente nella stessa rappresentazione su tutti i dispositivi.
Se i web designer desideravano rimanere fedeli allo spirito di One Web, dovevano fornire lo stesso contenuto principale allo stesso URL a tutti, indipendentemente dal proprio dispositivo. Allo stesso tempo, dovevano essere in grado di creare layout diversi a seconda dello spazio disponibile sullo schermo.
L'illusione condivisa di un approccio valido per tutti al web design ha cominciato a svanire. È stato gradualmente sostituito dall'accettazione della natura fluida in continua evoluzione del web.
Risposta positiva
Nell'aprile del 2010 Ethan Marcotte è salito sul palco di An Event Apart a Seattle, un raduno per le persone che creano siti web. Ha parlato di un'interessante scuola di pensiero nel mondo dell'architettura: il responsive design, l'idea che gli edifici possano cambiare e adattarsi alle esigenze delle persone che utilizzano l'edificio. Questo, ha spiegato, potrebbe essere un modo per avvicinarsi alla creazione di siti Web.
Un mese dopo ha ampliato questa idea in un articolo chiamato Responsive Web Design . È stato pubblicato su A List Apart, lo stesso sito web che aveva pubblicato dieci anni prima A Dao Of Web Design di John Allsopp. L'articolo di Ethan condivideva lo stesso spirito del precedente grido di battaglia di John. In effetti, Ethan inizia il suo articolo facendo riferimento a A Dao Of Web Design .
Entrambi gli articoli invitavano i web designer ad abbracciare l'idea di One Web. Ma mentre A Dao Of Web Design è stato in gran parte rifiutato dai designer a proprio agio con i loro strumenti WYSIWYG , il Responsive Web Design ha trovato un pubblico di designer alla disperata ricerca di risolvere l'enigma mobile.
L'adiacente possibile
Lo scrittore Steven Johnson ha documentato la storia dell'invenzione e dell'innovazione. Nel suo libro Where Good Ideas Come From , esplora un'idea chiamata "l'adiacente possibile":
In ogni momento nella linea temporale di una biosfera in espansione, ci sono porte che non possono ancora essere sbloccate. Nella cultura umana, ci piace pensare alle idee rivoluzionarie come a improvvise accelerazioni sulla linea temporale, in cui un genio salta avanti di cinquant'anni e inventa qualcosa che le menti normali, intrappolate nel momento presente, non avrebbero potuto inventare. Ma la verità è che i progressi tecnologici (e scientifici) raramente escono dall'adiacente possibile; la storia del progresso culturale è, quasi senza eccezioni, la storia di una porta che conduce a un'altra porta, esplorando il palazzo una stanza alla volta.
Ecco perché il forno a microonde non poteva essere stato inventato nella Francia medievale; sono necessari troppi passaggi precedenti - produzione, energia, teoria - per fare quel tipo di salto. Facebook non potrebbe esistere senza il World Wide Web, che non potrebbe esistere senza Internet, che non potrebbe esistere senza computer, e così via. Ogni passaggio dipende dagli strati accumulati sotto.
Quando Ethan ha coniato il termine Responsive Web Design, una serie di progressi tecnologici era ormai in atto. Come ho scritto nella prefazione al successivo libro di Ethan sull'argomento:
Le tecnologie esistevano già: griglie fluide, immagini flessibili e media query. Ma Ethan ha unito queste tecniche sotto un unico banner, e così facendo ha cambiato il modo in cui pensiamo al web design.
- Griglie fluide. L'opzione di utilizzare le percentuali al posto dei pixel è presente sin dai tempi dei layout
TABLE. - Immagini flessibili. La ricerca condotta da Richard Rutter ha mostrato che i browser stavano diventando sempre più abili nel ridimensionare le immagini. Le dimensioni intrinseche di un'immagine non devono necessariamente essere un fattore limitante.
- Query sui media. Grazie al modello di gestione degli errori dei CSS , nel tempo i browser hanno aggiunto funzionalità su funzionalità. Una di queste caratteristiche erano le query multimediali CSS : la capacità di definire gli stili in base a determinati parametri, come le dimensioni della finestra del browser.
Gli strati erano a posto. C'era anche un desiderio di cambiamento, guidato dall'inarrestabile ascesa del mobile. Ciò che serviva era uno slogan sotto il quale questi potessero essere uniti. Questo è ciò che Ethan ci ha dato con il Responsive Web Design.
Cambiare mentalità
I primi esperimenti di responsive design hanno riguardato il retrofit di siti Web desktop-centric esistenti: conversione di pixel in percentuali e aggiunta di query multimediali per rimuovere il layout della griglia su schermi più piccoli. Ma questo approccio reattivo non ha fornito una solida base su cui costruire. Fortunatamente un altro slogan è stato in grado di racchiudere un approccio più resiliente.
Luke Wroblewski ha coniato il termine Mobile First in risposta all'ascesa dei dispositivi mobili:
Perdere l'80% dello spazio sullo schermo ti costringe a concentrarti. Devi assicurarti che ciò che rimane sullo schermo sia l'insieme di funzionalità più importante per i tuoi clienti e la tua attività. Semplicemente non c'è spazio per detriti di interfaccia o contenuti di valore discutibile. Devi sapere cosa conta di più.
Se puoi dare la priorità ai tuoi contenuti e farlo funzionare all'interno dello spazio ristretto di un piccolo schermo, avrai creato un design robusto e resiliente su cui puoi costruire per schermi di dimensioni maggiori.
Stephanie e Bryan Rieger hanno sintetizzato l'approccio di progettazione mobile first responsive:
La mancanza di una media query è la tua prima media query.
In questo contesto, Mobile First riguarda meno i dispositivi mobili in sé e si concentra invece sulla priorità di contenuto e attività indipendentemente dal dispositivo. Scoraggia le ipotesi. In passato, i web designer si erano imbattuti in ipotesi infondate sui dispositivi desktop. Ora era altrettanto importante evitare di fare supposizioni sui dispositivi mobili.
I web designer non potevano più fare ipotesi su dimensioni dello schermo, larghezza di banda o capacità del browser. Sono rimasti con l'unico aspetto del sito Web che era veramente sotto il loro controllo: il contenuto.
Facendo eco a A Dao Of Web Design , il designer Mark Boulton ha inserito questo nuovo approccio in un contesto storico:
Abbraccia la fluidità del web. Progetta layout e sistemi in grado di far fronte a qualsiasi ambiente in cui si trovino. Ma l'unico modo in cui possiamo fare tutto questo è liberarci di modi di pensare che ci sono stati delle catene. Ci stanno trattenendo. Inizia a progettare dal contenuto, piuttosto che dall'area di disegno.
Questo modo di pensare al contenuto è fondamentalmente diverso dall'approccio canvas-in che risale al Libro di Kells. Chiede ai web designer di rinunciare all'illusione del controllo e di creare una disciplina materialmente onesta per il World Wide Web.
Rinunciare al controllo non significa rinunciare alla qualità. Piuttosto il contrario. Riconoscendo le molte incognite coinvolte nella progettazione per il web, i designer possono creare in modo flessibile, resiliente e fedele al mezzo.
Il web designer texano Trent Walton inizialmente diffidava del responsive design, ma presto si rese conto che si trattava di un approccio più onesto e autentico rispetto alla creazione di modelli di Photoshop a larghezza fissa:
Il mio amore per il responsive è incentrato sull'idea che il mio sito Web ti incontrerà ovunque tu sia, dal dispositivo mobile al desktop completo e ovunque nel mezzo.
Per anni, il web design è stato dettato dal designer. L'utente non aveva altra scelta che soddisfare la richiesta del sito di uno schermo di una certa dimensione o di una connessione di rete di una certa velocità. Ora, il web design può essere una conversazione tra il designer e l'utente. Ora, il web design può riflettere i principi alla base del web stesso.
Nel ventesimo anniversario del World Wide Web, Tim Berners-Lee ha scritto un articolo per Scientific American in cui ribadiva quei principi alla base:
Il principio di progettazione principale alla base dell'utilità e della crescita del Web è l'universalità. Il Web dovrebbe essere utilizzabile dalle persone con disabilità. Deve funzionare con qualsiasi forma di informazione, sia essa un documento o un punto di dati, e informazioni di qualsiasi qualità, da uno stupido tweet a un articolo accademico. E dovrebbe essere accessibile da qualsiasi tipo di hardware in grado di connettersi a Internet: fisso o mobile, piccolo o grande schermo.
Riferimenti
- Un Dao di Web Design di John Allsopp
- Il Canone Vignelli di Massimo Vignelli
- L'apertura e la singolarità del Metaverso di Jamais Cascio
- One Web di Jo Rabin e Charles McCathieNevile
- Responsive Web Design di Ethan Marcotte
- Una tela più ricca di Mark Boulton
- Fit To Scale di Trent Walton
- Lunga vita al Web: un appello per standard aperti e neutralità continui di Tim Berners-Lee