Da quando abbiamo adottato il responsive design, definendo i componenti delle interfacce, stabilendo i breakpoint e pensando in maniera content-out invece che canvas-in, abbiamo imparato che è molto più di un semplice cambiamento nelle tecniche che usiamo. Dobbiamo cambiare il modo in cui parliamo dei (e agiamo sui) principi di buon responsive design. In questo estratto dal Capitolo 5 del suo nuovo libro “Responsive Design: Patterns & Principles, Ethan Marcotte esplora i framework filosofici e pratici che possono guidare il nostro lavoro responsive.
Argomento: Responsive Design
Il concetto che ha dato il via al redesign di migliaia di siti. Per anni, i web designer hanno invidiato il design per la stampa per via dei suoi layout precisi, lamentandosi del fatto che i contesti variabili in cui si trova l’utente sul web rovinano i propri design. Il responsive design sostiene che dobbiamo cambiare il nostro modo di progettare per far diventare virtù questi vincoli. Utilizzare le griglie fluide, le immagini flessibili e le media query per abbracciare la variabilità del web.
Passare al responsive
Ogni organizzazione è diversa, con i propri processi interni, i bisogni degli stakeholder e le aspettative degli utenti, perciò non c’è un modo giusto per affrontare un progetto di redesign responsive. Quello giusto è quello che va bene per la vostra azienda, come spiega Karen McGrane nel suo nuovo libro Going Responsive. Questo estratto esamina i pro e i contro di diversi approcci a progetti responsive, dalla beta release al grande lancio, passando per tutto quello che sta in mezzo, così che possiate capire quale si adatti meglio al vostro team.
Usiamo adesso le immagini responsive
‘ascesa del responsive web design ha messo in moto designer e developer per trovare un modo per inviare immagini responsive ad un’ampia serie di larghezze di device diverse. In gran parte grazie agli sforzi del Responsive Issues Community Group (RICG), possiamo ora inviare immagini di qualità diverse basandoci sulla viewport dell’utente piuttosto che su un intricato setup server-side. Chen Hui Jing ci introduce ai nuovi tipi di selezione delle immagini e ci mostra in che modo possiamo farle funzionare per noi.
Pensare in maniera responsive: un framework per l’apprendimento futuro
Il responsive web design ha cambiato tutto del modo in cui pensiamo e lavoriamo sul web e, da cinque anni a questa parte, stiamo ancora esplorando i modi migliori per avvicinarci alla nostra professione. Se vogliamo un web che sia davvero universale, dobbiamo considerare i nostri utenti, il nostro medium e i nostri team in modi nuovi e flessibili. Osservando da dove siamo venuti e verso cosa ci stiamo muovendo, Paul Robert Lloyd propone un framework filosofico per il nostro lavoro sul responsive web.
Interpolazione live dei font sul Web
Tutti vogliamo progettare delle esperienze tipografiche grandiose e contemporaneamente soddisfare una gran varietà di utenti su numerosi devices. Ma i font oggi non sono flessibili e non si ridimensionano. Possiamo risolvere questo problema rendendo i webfont più come font di sistema e consci del loro contesto, e l’interpolazione live dei web font (la modifica del design di un font nel browser) può aiutarci a raggiungere il nostro obiettivo. Andrew Johnson ci mostra come.
Pianificazione per la performance
Dovremmo costruire siti che non sono solo responsive, ma sostenibili, accessibili globalmente e, beh, responsabili, come suggerisce Scott Jehl nel suo nuovo libro, Responsible Responsive Design. I nostri approcci ai siti web responsive devono considerare device in continua mutazione, reti limitate e contesti inaspettati. In questo estratto dal Capitolo 3, Scott discute i tempi di page load e la consegna responsabile del codice.
Immagini responsive in pratica
Quando creiamo un design responsive, il nostro contenuto fluisce elegantemente ed efficacemente in ogni device. Tutto il nostro contenuto, eccezion fatta per le immagini. Ora non più. Eric Portis ci guida alla scoperta del nuovo elemento picture e di altri attributi che ci permettono di inserire nel markup più sorgenti alternative. Scoprite adesso come usare le immagini responsive: mandate le migliori immagini per ogni contesto, tagliate il peso della pagina e velocizzate la performance.
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.
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.
Progettare Web App Offline-first
Pensiamo sempre che i nostri utenti siano come noi: con gli ultimi device, con il software più recente e con le connessioni più veloci. E mentre noi manteniamo un autentico zoo di vecchi device e browser per i nostri test, passiamo la maggior parte del tempo a creare partendo dalla comodità dei nostri moderni e sempre connessi device desktop. Ma cosa succede quando i nostri utenti scendono nella metropolitana, si imbarcano su un aereo, vanno online in campagna o semplicemente si trovano nell’angolo sbagliato della stanza, quello in cui non arriva internet? La verità è che l’essere offline è un fatto della vita, ma ci sono dei modi per progettare per quando non si è collegati. Alex Feyerke ci racconta tutto.
