Una chat di dieci minuti con Ethan Marcotte

Web design reattivo. Questo dice tutto. Come l'uomo dietro al movimento più contagioso del web design al momento, Ethan Marcotte ha davvero bisogno di presentazioni. Di recente lui risposto ad alcune delle mie domande (vedi cosa ho fatto lì?), quindi prendi un caffè e scopri cosa ha da dire sui singhiozzi in metropolitana e licenzia le persone al sole?


QHi Ethan, bello averti su Webdesigntuts +! Per quelli che non hanno familiarità con te, potresti riassumerti rapidamente in otto parole?

Progettista. Sviluppatore. Alto. Cattivo con i numeri.


QSeriously però, raccontaci un po 'di quello per cui sei più conosciuto.

Sono un designer / sviluppatore indipendente / qualcosa che vive a Cambridge, nel Massachusetts. Prima di uscire di nuovo da solo alla fine del 2010, ero un direttore di design interattivo nell'incantevole e adorabile Happy Cog. Ma nel corso degli anni ho avuto la fortuna di lavorare con il New York Magazine, la Stanford University, il W3C e il Sundance Film Festival. Più di recente, ho contribuito a lanciare un nuovo sito responsive per The Boston Globe. Adoro questo lavoro.

Più recentemente, suppongo di essere "noto per aver coniato il termine" responsive web design "ad An Event Apart Seattle 2010, per descrivere un modo più flessibile di progettare oltre il desktop. Ho seguito questo discorso con un articolo su una rivista di List Apart e alla fine ho scritto un piccolo libro sull'argomento.

In poche parole, il responsive design è un modo alternativo per progettare il web post-desktop. Storicamente, il nostro approccio principale alla progettazione di dispositivi mobili, tablet o what-have-you era la creazione di siti specifici per i dispositivi, frammentando il nostro contenuto in diversi contesti. Il design reattivo, al livello più basilare, ci consente di combinare layout e query multimediali basati sulla griglia per creare un design più reattivo: uno che si rimodella per adattarsi a diverse gamme di risoluzione.

Comunque. È stato un anno assolutamente folle e meraviglioso.


QHai scritto numerosi articoli sull'argomento, parlato durante gli eventi e pubblicato un libro, è chiaro che ti impegni a promuovere i vantaggi del responsive web design. Sarebbe esagerato definirlo una crociata personale?

Crociata personale? Oh, certo si. Sono la persona più dogmatica su internet e segretamente credo che le persone che non sono d'accordo con me dovrebbero essere licenziate al sole.

Hey! Sto scherzando! Scherzo! (Sono anche incredibilmente basso di caffeina!)

Ma in realtà, la cosa migliore di lavorare sul Web è che non esiste One True Way? di lavorare. Voglio dire, nell'ultimo anno sembra che questo dibattito si sia sviluppato online, uno in qualche modo snocciolato "design mobile" contro "responsive design" in una specie di epico scontro tra Clash of the Titans. Non capisco perché le cose debbano essere così binari: alcuni pubblici trarrebbero beneficio dalle esperienze specifiche del dispositivo, mentre altri trarrebbero beneficio da un approccio più reattivo.

Quest'anno ho lavorato con un grande cliente in cui quest'ultimo è il caso: che gli obiettivi di ciascun "contesto", per così dire, si sovrappongono a un livello così alto che un approccio reattivo era facilmente il migliore. Ma ho lavorato anche su siti in cui era vero il contrario.

In definitiva, si tratta di personalizzare l'approccio alle esigenze del pubblico di un determinato sito, non solo i dispositivi che stanno utilizzando, o i pregiudizi che i designer portano sul tavolo. Se la nostra comunità può fornire più struttura e processo per Come per decidere tra un approccio reattivo o uno specifico del dispositivo, affronteremo il problema giusto.


QI progetti di progettazione reattivi sono un approccio reso possibile grazie agli sviluppi nei CSS. Quali altri strumenti potrebbero migliorare ulteriormente le cose? In altre parole, cosa (se mai) senti ti manca attualmente nel processo?

Uomo. Non poche cose, ad essere onesti.

Innanzitutto, c'è molto che potrebbe essere migliorato sul lato CSS delle cose. Voglio dire, oggi ci basiamo su alcuni strumenti piuttosto vecchi (se affidabili): vale a dire, galleggianti e posizionamento. E sfortunatamente, ciò significa che i siti più reattivi oggi sono vincolati dall'ordine sorgente. Questo può essere aggirato in una certa misura, specialmente se stai pianificando il tuo markup in modo "mobile first", ma per fortuna ci sono alcuni strumenti CSS3 in fase di stesura che ci daranno ancora più flessibilità. Sono particolarmente entusiasta della scatola flessibile e del modulo di layout.

Non è possibile tracciare una correlazione tra la larghezza di uno schermo e la quantità di larghezza di banda disponibile, ma c'è ancora molto lavoro svolto per ottimizzare la consegna delle immagini. Uno dei primi è stato lo script di immagini reattive di Filament Group, ma da allora sono stati creati scads; Jason Grigsby ha avuto un fantastico riepilogo di varie tecniche di immagini reattive, in dettaglio i rispettivi punti di forza e gli svantaggi, che consiglio vivamente.

E infine, penso che la cosa che mi interessa di più è capire come un approccio reattivo possa cambiare il modo in cui gestisco i miei progetti. Per il Boston Globe, il più grande cambiamento per me è stato l'adozione di un approccio più collaborativo tra designer e sviluppatori: enfatizzare la prototipazione rapida come strumento di progettazione e lasciare che l'uso del sito in vari telefoni, tablet e browser informi effettivamente la progettazione del sito. Quindi quale sarebbe un approccio più reattivo alla raccolta dei requisiti? Una strategia di contenuti più reattiva? I fondamenti tecnici, le griglie fluide, le immagini flessibili e le query sui media, sono in realtà solo una parte di un processo di progettazione molto più ampio, uno dei quali sono davvero entusiasta di cercare di capire.


QQuesto lavoro (non necessariamente nel campo del web design) ti ispira al momento?

Ultimamente ho letto molto lavoro di Garret Keiser. Il suo libro sul rumore era meraviglioso, e stavo piangendo apertamente sulla metropolitana quando lessi il suo recente saggio sull'educazione per la rivista di Harper. (Disponibile nella rivista, ma online per gli abbonati.)

Parlando un po 'più visivamente, ho scoperto il lavoro di Dave Mott tramite Dribbble, e sono in profondo smit.


Per concludere, non posso fare a meno di notare i robot che si presentano regolarmente nel tuo lavoro. Molto regolarmente, in realtà. Pensi che potrebbe essere il momento per una vacanza?

POSSO SCATTARE IN QUALSIASI MOMENTO VOGLIO okay sì, forse dovrei passare agli unicorni.