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.
Argomento: Responsive Design
Rapporti con i clienti e il web multi-device
Quando si entra in una stanza con un cliente, si è un visitatore dal futuro. Voi, professionisti del web, passate le vostre giornate immersi nei nuovi paradigmi del web multi-device, ma anche per voi il cambiamento e gli aggiustamenti continui derivanti dal vivere su internet possono sembrare travolgenti. Quindi, come pensate possano sentirsi i vostri clienti? Matt Griffin dice che è ora di toglierci di dosso l’atteggiamento mentale ancora presente che abbiamo ereditato dal mondo della pubblicità, le comunicazioni chiuse e il dramma della grande rivelazione, e creare nuovi sistemi basati sull’onestà, l’inclusione e la comunicazione autentica. In questo modo, i nostri clienti diventeranno dei veri partner, piuttosto che persone che aspettano, confuse e ansiose, man mano che impariamo a navigare meglio insieme questo strano universo digitale in continua evoluzione.
Letture Estive
Presentiamo la seconda Summer Reading List di ALA, un insieme di letture scelte dagli editori, tratte dagli archivi recenti di A List Apart, con l’aggiunta di alcuni dei nostri link preferiti al di fuori di ALA. Le scelte di questa estate sono organizzate in gruppi che riflettono il processo di design e come tutte le buone letture estive, sono leggere così da poter essere facilmente portate in viaggio con noi. Tuffatevi!
Progettare per i breakpoint
Testo, navigazione e tabelle… Oh cielo! Cosa deve fare un responsive web designer? Come potete vincolare il vostro design al minimo numero possibile di breakpoint importanti? Dove e quando farete gli sketch per i breakpoint minori? In che modo si deve pensare al contenuto mentre fate gli schizzi? È possibile fare degli schizzi sui device reali e che implicazioni di accessibilità ci sono nel fare questo? Potete trovare le risposte a queste e ad altre profonde domande in questo esclusivo estratto dal Capitolo 7 di Responsive Design Workflow, il nuovo libro di Stephen Hay, disponibile presso New Riders.
Hack your map
Le mappe web hanno fatto molta strada ormai: componenti onnipresenti di molte app, sono diventate anche uno dei trapianti di maggior successo dello spazio mobile. Lo stesso paradigma centrale della UI delle web map – una superficie continua, esplorabile e zoomabile – si è diffuso in tutte le interfacce, ben oltre le mappe. Eppure, a quasi cinque anni dallo storico articolo di Paul Smith, Take Control of Your Maps, le mappe web sono ancora un angolo oscuro per la maggior parte dei web designer. È ora di integrare le mappe nei nostri design in maniera potente, creativa e in nuovi modi progressivamente migliorati. Young Hahn ci inizia al viaggio nei misteri della mappa.
Responsive comp: ottenere un contratto senza mockup
Se create siti web, ci sono buone possibilità che avrete pensato a quale possa essere un processo di design responsive-friendly e probabilmente sarete giunti alla conclusione che aggiungere un mockup per ogni breakpoint non sia un approccio sostenibile. Progettare direttamente nel browser potrebbe essere la risposta, ma potrebbe essere difficile capire da dove cominciare o potreste sentirvi disorientati dalla prospettiva di rinunciare ad una metodologia su cui avete fatto affidamento per molto tempo. Faccia il suo ingresso il responsive comping: questo nuovo processo di web design senza i mockup rende semplice scrollarsi di dosso la scimmia di Photoshop e ricominciare da capo progettando con il vostro vecchio amico browser.
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.
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.
Le immagini responsive e gli standard Web a un punto di svolta
Un responsive design responsabile richiede delle immagini responsive: immagini le cui dimensioni e la cui grandezza del file sia giusta per la viewport e per la larghezza di banda del dispositivo che le riceve. Dal momento che HTML non fornisce alcun elemento standard per questo scopo, utilizzare immagini responsive implica l’uso di alcuni trucchi JavaScript ed accettare che la propria soluzione non andrà bene per alcuni utenti.
Di conseguenza, qualche mese fa, in risposta ad una articolo qui pubblicato, si è formato il W3C Responsive Images Community Group, che ha proposto un elemento “picture” in HTML semplice da capire e capace di inviare immagini responsive. Il gruppo ha anche delineato la funzionalità di “picture“ nei browser più vecchi, utilizzando due polyfill: ossia, Picturefill di Scott Jehl e jQuery Picture di Abban Dunne. Il WHATWG ha risposto ignorando il lavoro della community sull’elemento “picture” e proponendo una configurazione più complessa con l’elemento img set.
Quale dei due standard è migliore e per chi lo è? Quale dei due vincerà? Cosa potete fare per cercare di evitare una crisi noi contro di loro che potrebbe nuocere agli utenti finali e far abbandonare il processo degli standard agli sviluppatori? Mat Marquis di ALA ci spiega i pro e i contro delle immagini responsive ed il punto di svolta degli standard web.
