Ci sono centinaia di dispositivi che possono accedere al full web, come disse una volta Steve Jobs. Hanno capacità e vincoli differenti, cose come lo stile di input o le dimensioni dello schermo, la risoluzione e la forma. Con tutti questi dispositivi pronti a superare i tradizionali computer desktop per quel che riguarda il traffico web del prossimo anno, abbiamo bisogno di tool che ci aiutino a creare in maniera responsive. Jonathan Smiley ci mostra come tuffarci nel responsive design usando Foundation, un leggero framework front-end che ci aiuta a fare prototipi e siti in produzione in maniera rapida.
Argomento: Responsive Design
Cosa sono e come funzionano le style tile
Come coinvolgere il cliente in un processo di design che abbia successo? Molti dei processi che seguiamo risalgono al design per stampa e alla pubblicità. È ora di far evolvere i nostri deliverable per far sì che il cliente diventi parte attiva nel processo. La “style tile” è un deliverable di design che fa riferimento agli elementi dell’interfaccia del sito attraverso degli insiemi di font, colore e stile che vengono accompagnati da una mappa del sito, da alcuni wireframe e da altri artefatti di user experience. Vediamo come le style tile siano un valido aiuto per allineare le aspettative del cliente e del designer, per rendere più rapida la timeline di progetto, per coinvolgere gli stakeholder nel processo di brainstorming e come svolgano un ruolo essenziale nel responsive design.
Immagini responsive: perché hanno quasi funzionato e cosa ci serve
Con un approccio mobile-first responsive design, se una qualunque parte si rompe, i vostri utenti potranno ancora ricevere un’immagine rappresentativa ed evitare un’inutilmente grande richiesta su un device che potrebbe avere una banda limitata. Tuttavia con l’implementazione da parte di molti dei browser più recenti di una feature di prefetch delle immagini che permette alle immagini di essere prese prima di fare il parsing del body del documento, molti tra i più illuminati web developer stanno abbandonando le immagini responsive in favore dello user agent detection, almeno come soluzione temporanea. Per noi standardisti, l’UA detection ci lascia un cattivo sapore in bocca. Soprattutto, l’UA detection diventerà ben presto insostenibile con il crescere continuo del numero di dispositivi, esattamente come avvenne con il browser detection negli anni bui precedenti agli standard web. Quello di cui abbiamo veramente bisogno, sostiene Mat Marquis, è un nuovo elemento di markup che funzioni nel modo in cui funziona l’elemento video di HTML5. Sembra folle? Così tanto che potrebbe funzionare!
Immagini fluide
Imparate come rendere flessibili le immagini a larghezza fissa e come aggiungerle alle griglie fluide per creare un sito che risponda alla dimensione della viewport senza sacrificare l’estetica. Siamo lieti di presentarvi un estratto dal nuovo libro di Ethan (nonché il quarto titolo di A Book Apart): emResponsive Web Design/em.
Responsive Web Design
I designers hanno bramato la stampa per via dei suoi layout precisi, lamentandosi dei vari contesti d’uso dei propri utenti sul web che compromettono i loro design. Ethan Marcotte sostiene che si debba cambiare il modo in cui pensiamo i nostri design per superare questi limiti: usando le griglie fluide, le immagini flessibili e le media queries, ci mostra come adottare il flusso ed il riflusso delle cose con il web design reattivo.
