Web Design radio-comandato

Tab, modal overlay, navigazione nascosta: abbiamo sviluppato molti pattern che ci aiutano nella progettazione di design per schermi mobile, ma questi pattern tendono a mostrare e a nascondere il contenuto usando JavaScript, che già di per sé pone delle sfide. Art Lawry esplora delle tecniche per ridurre questa dipendenza da JavaScript usando un’improbabile tool: i radio button.

Accessibilità: l’ingrediente mancante

Se l’economia è la scienza triste, l’accessibilità è stata per molto tempo la branca meno amata del web design and development, nonché la richiesta avanzata di meno da parte dei clienti. La tipografia e le griglie (specialmente quelle flessibili) hanno moltissimi fan. CSS, Sass e i framework attirano grandi folle di appassionati. Ma perfino i front-ender più tosti e i più devoti seguaci delle best practice sembrano ammosciarsi di fronte alle attuali nonché molto migliorate tecniche di accessibilità. Come risultato, mentre la maggior parte di noi è rimasta alla pari con i metodi, le tecnologie e le sfide emergenti del design e dello sviluppo multi-device, specifiche essenziali e ben supportate come WAI-ARIA rimangono dolorosamente sotto-implementate. Anche i migliori tra noi sembrano considerare l’accessibilità un qualcosa che va fatto alla fine del lavoro. Andrew Hoffman spiega i vantaggi e le necessità di un approccio accessibility first.

Migliorare la UX con la performance front-end

Uno studio di Google afferma che aggiungere mezzo secondo alla pagina dei risultati di una ricerca può far diminuire il traffico e le entrate pubblicitarie del 20%. Amazon ha scoperto che per ogni 100 millisecondi in più sul tempo di caricamento, le vendite diminuiscono del 1%. Gli utenti si aspettano che le pagine si carichino in due secondi e dopo tre secondi il 40% di loro semplicemente se ne va. Il messaggio è chiaro: dobbiamo fare in modo che l’ottimizzazione della performance sia una parte fondamentale del modo in cui progettiamo, realizziamo e testiamo ogni sito che creiamo, per ogni dispositivo. Progettare per la performance, misurare i risultati.

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.

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.

Impariamo ad amare le parti noiose di CSS

Il futuro di CSS ci dà molti motivi per cui essere emozionati: da un lato, c’è una vasta gamma di nuovi metodi che rivoluzioneranno il modo in cui creiamo le nostre pagine sul web; dall’altro, c’è un nuovo insieme di effetti grafici che ci permetteranno l’uso di filtri e ombreggiature al volo. Le persone adorano queste cose. I magazine e i blog sono pieni di articoli che li riguardano, ma se questi strumenti sono la parte appariscente di CSS, è ora di dare un po’ di attenzione ai cavalli da tiro del linguaggio. Vediamo quali sono le parti noiose come i selettori, le unità e le funzioni che rivoluzioneranno il modo in cui lavoriamo, sebbene in maniera umile e senza pretese.

ALA Summer Reading Issue

Vi presentiamo la ALA Summer Reading Issue, i nostri articoli preferiti scelti tra i 355 numeri di A List Apart. Potete leggerli (in inglese) anche come epub sul Kindle, sull’iPhone, sull’iPad, su Readmill o altri lettori di e-book.

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.

Application Cache è un idiota

Siamo meglio connessi di quanto non lo siamo mai stati ma non siamo sempre connessi. ApplicationCache permette agli utenti di interagire con i propri dati anche quando si è scollegati, ma insieme a grandi poteri arrivano grandi problemi. Ad esempio, i files provengono sempre da ApplicationCache, anche se l’utente è online, Oh e in certe circostanze, un browser nono può sapere che quel contenuto online è cambiato, il che implica che l’utente ottiene continuamente contenuto vecchio. E… Sì, a seconda di come mettete in cache le vostre risorse, le risorse non messe in cache potrebbero non caricarsi, anche quando l’utente è online. Jake Archibald di Lanyrd fa luce sui rischi di ApplicationCache e condivide con noi strategie, tecniche e code workaround per massimizzare il piacere e minimizzare il dolore sia per l’utente sia per lo sviluppatore. Tutto questo insieme a una demo. Tuffiamoci!