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!
Argomento: Layout & Grids
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.
Uso di float in CSS
La proprietà float è una risorsa molto utile e potente a disposizione dei web designer/developer che lavorano con HTML e CSS. Purtroppo però, può anche causare frustrazione e confusione se non si comprende appieno il suo funzionamento. Mettete alla prova la vostra conoscenza o fate un ripasso con Noah Stokes, che esplora la teoria ed il comportamento del float e ci guida attraverso le insidie correlate all’uso di float.
Progettare processi di registrazione web per bambini
Progettare siti web per i bambini è un’esperienza affascinante, stimolante, gratificante ed esasperante: state cercando di creare un’esperienza digitale per persone a cui manca la capacità cognitiva per comprendere l’astrazione, state provando a far affezionare al brand delle persone che sono influenzate quasi esclusivamente dai loro pari e state tentando di comunicare dei giudizi di valore soggettivi a persone che vedono le cose solo come bianche o nere. Fortunatamente, è possibile creare una form di registrazione efficace per i bambini basandosi sul loro contesto, sulle loro abilità tecniche e sulle loro capacità cognitive.
Una pagina più semplice
Volete progettare un libro? Ci sono montagne di esempi molto ben progettati che possono ispirarvi. Ma per quel che riguarda i libri digitali? Come potete creare delle esperienze di lettura con typeset eleganti ed estremamente bilanciate quando i tablet rendono i caratteri in maniera differente e supportano diversi font, quando il testo si può espandere in ogni direzione ed il carattere può cambiare dimensione? Craig Mod (Flipboard, Art Space Tokyo) affronta tali questioni e presenta la release iniziale di Bibliotype, una libreria tipografica HTML di base per la lettura su tablet.
Fondamenti del posizionamento in CSS
Se siete un front-end developer o un designer a cui piace programmare, i layout basati sui CSS sono il fulcro del vostro lavoro. Il designer/developer Noah Stokes esamina attentamente la proprietà codeposition/code di CSS per mostrarvi come può essere usata per creare dei layout standard-compliant e senza tabelle mediante i CSS. Mettete alla prova la vostra conoscenza o ripassate il posizionamento statico, relativo, assoluto, fisso ed inherited e come funzionano quando usati insieme per creare qualsiasi layout web che la mente umana possa concepire.
Art Direction e Design
Ovviamente la composizione del vostro design è perfettamente equilibrata, la gerarchia tipografica funziona ed il contrasto perfetto. Ma quando fate un passo indietro ed osservate il vostro lavoro, come vi fa emsentire/em? Il vostro design evoca le giuste emozioni? Dan Mall ci spega la differenza tra art direction e design sul web e ci sfida a ricreare il nostro design, questa volta con dei sentimenti.
L’aspetto di un libro
L’unione di due parole mediante un trattino e l’allineamento giustificato non sono più solo per la carta stampata. Armati di buon gusto, di uno speciale carattere Unicode chiamato “soft hyphen”, ed di un po’ di trucchi JavaScript, potete usare la giustificazione ed i trattini al loro meglio nelle pagine web. Padroneggiate lo “Zero Width Space” Usate la libreria Hyphenator.js per imbottigliare la fama, far fermentare la gloria e mettervi un tappo. Create pagine web che aggiungono i trattini e sistemano la giustificazione al volo, anche quando il layout si riposiziona in risposta ad un cambiamento nella dimensione della viewport.
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.
Gli Standard Web per gli E-Book
Internet non ha rimpiazzato la televisione, che a sua volta non ha rimpiazzato il cinema, che non ha rimpiazzato i libri. Nemmeno gli e-book rimpiazzeranno i libri. Gli e-book sono libri, solo in un formato differente.
