Il 31% degli Americani che accede a internet da un dispositivo mobile afferma che quello è il modo con cui si collegano sempre o la maggior parte delle volte. Per questo gruppo, se il vostro contenuto non esiste sul mobile, non esiste del tutto. Il governo degli USA ha proposto una grande iniziativa per rendere il contenuto dei siti federali mobile-friendly. Karen McGrane ci spiega perché tutto questo è importante e cosa possiamo imparare.
Argomento: Design
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.
L’estetica del Web
Oggi, con tutti i dispositivi che riescono a connettersi a internet, è diventato più semplice, praticamente necessario, accettare la natura flessibile del web. Il responsive web design è una best practice emergente e i nostri layout stanno cominciando a diventare più flessibili, ma, spesso, l’innovazione si concentra sulle implementazioni tecniche mentre sembra che si ignori l’estetica visiva. Mettiamola in un altro modo: stiamo adottando il responsive ma dimenticandoci del design. Adesso è il momento per cercare un’estetica propria di questo medium.
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.
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.
Creare libri con CSS3
Sebbene storicamente sia stato difficile, nel caso migliore, creare dei libri in PDF di qualità pari a quella della stampa partendo dal solo markup, CSS3 ci mette ora a disposizione Paged Media Module, che ha come obiettivo la formattazione dei libri stampati. I media Paged esistono come pagine finite, come libri e riviste piuttosto che lunghi segmenti di testo su cui fare scrolling, come la maggior parte dei siti web. Con un solo foglio di stile CSS, gli editori possono prendere il contenuto sorgente XHTML e metterlo in un PDF sistemato e pronto per la stampa. Potete prendere il sorgente XHTML, bypassare i software di desktop page layout come Adobe InDesign e confezionarlo come un ePub Media. È un workflow leggero e adattabile, che vi dà dei libri bellissimi in maniera più rapida. Nellie McKesson, eBook Operations Manager in O’Reilly Media, spiega come creare libri con CSS3.
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.
Diciamo no al grassetto simulato
I browser possono fare cose terribili ai caratteri. Se il testo ha come stile bold o italic e la famiglia del carattere non include un font bold o italico, i browser compenseranno questa mancanza cercando di crearsi da soli degli stili bold e italic. Il risultato sarà una goffa imitazione del design del carattere reale e può diventare particolarmente atroce con i font web. Alan Stearns di Adobe condivide con noi delle tecniche e ci dà dei suggerimenti su come essere sicuri che le regole @font-face corrispondano al font-weight e agli stili dei font e che ci sia una regola @font-face per ciascuno stile utilizzato dal contenuto. Se state passando parte del vostro tempo a scegliere un bel web font per il vostro sito, dovete a voi stessi e ai vostri utenti l’essere sicuri che stiate effettivamente usando un web font – e solo un web font – per visualizzare il contenuto del vostro sito in tutta la sua gloria.
