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.

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.

Perché Sass?

Ero un riluttante sostenitore di Sass. Scrivo fogli di stile a mano! Non ho bisogno d’aiuto! E sicuramente non voglio aggiungere della complessità extra al mio workflow. Vade retro! Così dice il designer, mago di CSS e co-fondatore di Dribbble Dan Cederholm all’inizio del suo nuovo libro citeSass For Web Designers/cite, pubblicato oggi da A Book Apart. Tuttavia, lo scettico convertito scopre presto che il popolare pre-processore CSS può essere un potente alleato anche per il più appassionato artigiano del front-end design/development. Dan non ha mai imparato nulla di CSS senza condividerlo (ed è davvero bravo come insegnante) e in questo esclusivo estratto dal Capitolo 1 di Sass For Web Designers, avrete un assaggio di come Dan ha imparato a smettere di preoccuparsi ed usare Sass per avere più controllo sui suoi fogli di stile e siti.

Il design del codice: organizzare JavaScript

Il codice ben progettato è molto più semplice da mantenere, ottimizzare ed estendere, rendendo così più efficienti gli sviluppatori. Ci sono tre aspetti del code design, di alto livello e linguaggio-agnostici, che sono la chiave per raggiungere questo nirvana: l’architettura di sistema, la manutenibilità e la riusabilità. Si possono raggiungere tutti e tre con il module pattern, la cui struttura estendibile si presta a una solida architettura di sistema e ad una codebase manutenibile. Anthony Colangelo ci mostra come creare codice in componenti ben organizzati che possono essere riutilizzati in progetti futuri.

Scrivere JavaScript testabile

Man mano che JavaScript assume sempre più responsabilità, abbiamo bisogno di una codebase affidabile, che sia accuratamente testata. Gli integration test si concentrano sui modi in cui i pezzi di un’applicazione lavorano insieme, ma non ci dicono se le unità individuali di funzionalità si comportano come ci aspetteremmo. Qui è dove entra in gioco lo unit testing e sarà difficile scrivere degli unit test fino a che non scriveremo del JavaScript testabile. Rebecca Murphey ci spiega come risparmiare tempo alla lunga scrivendo del codice per l’applicazione più pulito e testando, testando, testando.

Piccola guida all’utilizzo di Node

In Migliori mockup nel browser con Node.js, Garann Means ci ha spiegato perché Node.js rende più facile ed efficiente la progettazione di applicazione e come cominciare ad usarlo. Adesso è ora di vedere il nuovo processo di design in azione. In questa guida, creeremo una feature per un fittizio negozio di arte, completo di demo live e repository GitHub. Seguiteci da casa (o dal vostro cubicolo) e avrete un mockup che imita le interazioni che avrebbe con il server di produzione proprio lato client, senza aver bisogno di dati hard-coded o di workaround temporanei.

Migliori mockup nel browser con Node.js

Progettare direttamente nel browser ha moltissimi benefici, come produrre dei risultati più accurati ed esaurienti, e rimuovere lo step aggiuntivo di conversione di un file immagine in markup e CSS. Ma anche i siti progettati direttamente nel browser magari richiedono l’inserimento di contenuto, la simulazione di alcune interazioni con il server e la creazione di JavaScript temporaneo: tutte cose non utilizzabili nel sito live. Non sarebbe bello se potessimo passare dalla progettazione di layout e di interazioni alla progettazione dell’intero client side dell’applicazione durante lo stesso processo? Garann Means nel primo dei suoi due articoli ci dice che possiamo e ci spiega come Node.js può velocizzare il nostro processo di design.

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.

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.

Environmental design con la Device API

Alcuni fattori del mondo reale come le batterie scariche e il segnale scarso possono far diventare un incubo anche un’eccellente esperienza digitale. Questi fattori esulano dal nostro controllo e, fino a poco tempo fa, non c’era nulla che potessimo fare, mentre adesso potrebbe esserci. Tim Wright ci spiega in che modo migliorare le esperienze utente in condizioni che cambiano costantemente (e che a volta sono orribili), riflettendo sull’environmental design e sulle Device API.