Un flash su cosa i designers dovrebbero sapere su HTML5 e CSS3

Di Jared M. Spool

User Interface Engineering

articolo orginale:

A Snapshot on What Designers Should Know about HTML5 and CSS3

14 Agosto 2011

Questo articolo è un estratto di un’intervista che Jared Spool avuto con Stephanie (Sullivan) Rewis e Greg Rewis. È possibile ascoltare l’intervista completa sul loro Podcast o leggere la trascrizione completa.

Jared Spool: Dimmi se anche tu stai vedendo la stessa cosa: I browser sono finalmente sul punto di adottare i cambiamenti dei nuovi HTML5 e CSS3. Già da ora ci si possono effettivamente fare molte cose, anche se non tutto quello che è nelle specifiche, ed in virtù di questo abbiamo una nuova potenza e capacità.

Penso che sia realmente doveroso per un buon designer, capire di cosa si tratta, per poter comunicare in modo intelligente con i propri sviluppatori e comprendere cosa sono in grado di fare. Sei d’accordo?

Greg Rewis: Ceratmente; è un bel cambiamento, ma, ancora più importante, c’è un sacco di confusione su ciò che sta cambiando e su ciò che si può e non si può fare.
Si fa un gran parlare dell’HTML5, ma poi quando si va in profondità, si comincia a dire “Oh, ma non si può ancora fare questo, oh non si può fare quello”.

Penso che probabilmente una delle più grandi sfide per i progettisti, sia tentare di sfrondare tutta la propaganda intorno all’HTML5, se volete, cercando ‘avere la visione della foresta dai singoli alberi’, per usare una metafora zoppicante.

Stephanie Rewis: l’HTML5 non include i CSS3, ma il marketing intorno al nuovo HTML5 Web 2.0 fa certamente credere che sia tutto sotto l’ombrello dell’HTML5.

Il CSS3 è una specifica completamente diversa e per i progettisti è probabilmente più interessante dell’HTML5 stesso.

Il CSS3 ci darà, o già ci sta dando, nuove incredibili funzionalità per un design più flessibile, per un design più succinto, leggero, che è sicuramente meglio per la SEO, l’accessibilità e cose del genere.

Angoli arrotondati, SEO e gradienti

Jared: Quindi quali sono alcuni dei nuovi standard che i browser supportano e che i progettisti possono sfruttare oggi?

Greg: Angoli arrotondati, Jared. Voglio dire, una volta avere angoli arrotondati era un’utopia, giusto?

Jared: Senza dubbio, anzi, credo che il problema del debito pubblico sia dovuto interamente al fatto che tutti i grafici che ci mostrano hanno gli angoli squadrati.

Stephanie: Accidenti, invece si potrebbero risolvere un sacco di cose.

Jared: Esattamente?

Greg: Angoli arrotondati, ombre, l’ombra del testo, queste cose aggiungeranno delle possibilità interessanti per i progettisti.

Un progettista, in questo momento, potrebbe anche pensare: aspetta un secondo, “posso farlo oggi. Vado in Photoshop, disegno una box, gli ci faccio sopra gli angoli arrotondati, oppure scrivo un testo e ci aggiungo un’ombra”.

Ma questo è proprio il problema: sei in Photoshop e non sei in un browser. Una delle cose entusiasmanti di queste nuove funzionalità del CSS3, è l’idea di ridurre la necessità di ricorrere alle immagini stesse.

Non vogliamo dire, un Web senza immagini o grafici, non è quello di cui stiamo parlando. Stiamo parlando di queste nuove possibilità, come l’ombra o l’ombra del testo, che fino ad oggi hanno richiesto ai designer di andare in Photoshop, fare tutto quanto, esportarlo come JPG o PNG trasparente (o, Dio non voglia, una GIF trasparente) per poi consegnarlo ad uno sviluppatore che lo implementi nel design.

Questo ha funzionato bene per lungo tempo, ma ha i suoi limiti; ogni volta che il cliente chiede un cambiamento (ridimensionamento, colore, testo), il progettista deve essere di nuovo coinvolto.

Il designer deve tornare dentro il progetto, passare attraverso un editor di immagini e produrre ancora una volta quell’immagine. Come sapete questo richiede tempo.
Dall’altra parte, dal punto di vista di chi la vede, questa è solo un’immagine, non è un testo selezionabile. Ciò significa che non ottengo alcun beneficio SEO dal testo che è incastonato nei pixel di quell’immagine.

Quindi, se siamo in grado di fare le cose in HTML puro e CSS, nel codice della pagina, che producano quell’espressione creativa, beneficeremo anche del fatto di avere un testo per i SEO.

Non solo possiamo fare un cambiamento, andando semplicemente in un editor di testo e correggendo l’ortografia, ma possiamo anche andare in quell’editor di testo stesso e apportare alcune modifiche al CSS e modificare completamente o aggiornare, l’aspetto del design, così come viene presentato in un browser.

Stephanie: Giusto, potrebbero volere un gradiente verde; ora possiamo fare dei veri gradienti, con il CSS3. Possiamo fare i font reali sul web, adesso. Veri font per il web, non il noioso Georgia e Verdana e Arial.

Siamo in grado di utilizzare effettivamente i veri caratteri, che hanno una licenza d’uso per il web. E possiamo cambiare tutto, dal gradiente, la quantità di arrotondamento degli angoli, alle ombre, i colori di sfondo ed i caratteri, tutto senza mai entrare di nuovo in un editor di immagini; e questo è un grande potere.

Media query

Greg: Penso che approdassi oggi al design, come principiante, direi quasi che sarebbe più emozionante orientarsi verso il ‘mobile’ che verso i browser per i desktop, per via dell’entusiasmo che ferve intorno all’universo ‘mobile’.

La migliore notizia di tutte, comunque, è una nuova grande possibilità del CSS3: ‘media query’. Media query ci permette di progettare effettivamente per i browser mobili e desktop, allo stesso tempo ed avere una risposta veloce, se lo volete, dal dispositivo che esegue il rendering della pagina. Ciò significa che possiamo passare dal desktop all’universo dei tablet, e giù, fino al cellulare, con lo stesso contenuto per tutti, adattato dal CSS.

Jared: Quindi fammi capire meglio la cosa del ‘media query’: in precedenza, prima dell’HTML5 e CSS3 e per la molti server, si doveva realizzare una sorta di rilevatore del dispositivo, per poi inviare la tua pagina per schermi di piccole dimensioni o siti ‘mobile’, che poi possono avere design completamente diversi. Se sono state apportate modifiche sul sito, dovresti fare i cambiamenti in entrambi i posti, contemporaneamente.

Greg: sostanzialmente hai mantenuto due versioni diverse dello stesso sito.

Jared: Ma ora, con questi media query, posso realmente confezionare CSS su misura per i diversi dispositivi.

Quindi ho una sola fase di progettazione. E’ semanticamente scritta nel codice e poi il CSS decide: bene, se la sto guardando su questo dispositivo, allora la mostro in questo modo e se la guardo da quest’altro dispositivo lo mostro in quest’altro modo.

Stephanie: Giusto, ed in gran parte è un buon modo per gestire molti siti.

E non vuol dire che non ci sarà alcun sito dedicato ai dispositivi mobili. Ci sono volte in cui è comunque opportuno avere un sito completamente mobile, ma molti siti trarrebbero beneficio da un solo approccio web. Metti il tuo contenuto e poi mostralo in modi diversi su dispositivi con capacità e dimensioni e risoluzioni differenti.

Greg: Nel nostro workshop UI16, ci troveremo a parlare di questo, infatti uno degli argomenti che tratteremo è: come ci si approccia al design per schermi con stili diversi. Stephanie inizierà una lunga spiegazione sulla sua love story con una certa cosa chiamata Modernizr.

Modernizr

Jared: parlami di Modernizr, perché la gente continua a parlarne e non so cosa sia.

Stephanie: adoro Modernizr.

Io sono una sviluppatrice del front end e quasi tutto quello che sto costruendo proprio adesso, in un modo o nell’altro, usa HTML5 e CSS3, a seconda, ovviamente, delle specifiche del browser del cliente e così via.

Indipendentemente da quanto HTML5 e CSS3 sto inserendo nel progetto, uso Modernizr. Io sono contraria al browser sniffing, che significa usare JavaScript per cercare di capire che browser è e cosa devo servire.

Il problema è che la gente non sta al passo e tanti nuovi browser escono letteralmente ogni settimana. A volte hanno qualcosa che la stringa del browser sniffing non capisce e quindi sbatte l’utente su qualche vecchia, orrenda versione del sito e non verso la versione più moderna e capace. Quindi ci sono un sacco di ragioni per cui non mi piace lo sniffing.

Modernizr è una libreria JavaScript. E’ molto piccola. La ragione per cui mi piace è che verifica le effettive capacità del browser, non cerca di individuare “che user agent è questo?”, invece dice: “cos’è in grado fare questo user agent?” Ed è molto semplice da usare.

Richiede semplicemente una classe sull’elemento HTML e poi includi il JavaScript; ecco come funziona. Quando gli utenti navigando arrivano sul sito, chiamano la pagina e Modernizr testa i loro browser in modo rapido e restituisce tutta una serie di classi sul vostro elemento HTML.

Questo ti dirà cose come sfondi multipli o trasformazioni CSS, non permesse; analizza tutte le nuove proprietà e capacità dell’HTML5 e CSS3 e ti dà un feedback su cosa si può e cosa non si può servire a quel browser.

Poi si può scegliere di salire di livello progressivamente e servire qualcosa di diverso. Diciamo che un browser non gestisce l’immagine sul bordo; ok, perfetto, adesso lo so. Allora scriverò una classe senza immagine sul bordo, come prima parte di quel selettore, per fornirgli un’immagine di bordo piatta, qualcosa di più semplice.

Ma il browser più moderno, che gestisce l’immagine sul bordo, adesso fornisce una bellissima esperienza che è migliorata da quell’effetto. Si può anche trovare attraverso JavaScript, o servire mediante JavaScript, script diversi; è quello che mi piace chiamare, miglioramento regressivo. Il che significa che non importa se questo browser vecchio riceve bordi arrotondati e che lasceremo quello squadrato, ma invece importa che non possano gestire l’archiviazione locale.

Perché in tal caso devo servire un JavaScript che immagazzina i dati nei cookie o qualcosa di simile.

Poi posso memorizzare uno script loader che dice: “oh non c’è memoria locale disponibile quindi servirò questo JavaScript solo ai browser più vecchi”. Ci dà la possibilità di fare un super ‘fine tuning’ per non riversare tutti gli script e le cose che avete bisogno per il vostro sito, sui browser moderni, che non ne hanno bisogno.

Jared: Sembra davvero notevole. Ora, questo può anche aiutarmi a fare in modo che le cose che sto producendo siano il più accessibili possibile?

Stephanie: Sì, sicuramente può aiutare in questo, nel senso che può fare in modo che tutti possano vederlo. Non si vuole usare una tecnica CSS3 che impedisce alla tua gente di vedere le cose.

Diciamo che hai un gradiente con sopra del testo, che o si utilizza una tecnica che se visualizza il testo in modo non corretto, non risulta ben visibile sullo sfondo.
Se si sa che quella tecnica non è applicabile, si può alimentare il browser con un bello sfondo ad alto contrasto, dove qualcosa potrebbe non funzionare correttamente; per esempio un gradevole leggero gradiente.

‘Accessibile’ significa di più che far funzionare la mia pagina per i non vedenti, ‘accessibile’ significa che anche la persona che soffre di tunnel carpale ed ha bisogno attraversare i menù della vostra pagina, sia in grado di accedere a tutti i contenuti e link, incluse le persone ipovedenti.

A tutti noi si abbassa la vista col passare del tempo, se l’utente aumenta la dimensione del testo, è necessario assicurarsi che il design non cada a pezzi. Sono una grande pignola su questo.

Jared: Eccellente. Beh, è stato davvero divertente. Non vedo l’ora di assistere al workshop il 9 novembre ed al prossimo seminario virtuale di Stephanie il 15 settembre. Grazie per tutte le vostre preziose informazioni.

Ascoltate l’intervista completa o leggete la trascrizione integrale.

Due opportunità di imparare di più su HTML5 e CSS3

Sia che dobbiate ancora apprendere questi nuovi vantaggi o che ne abbiate già familiarità, ma non sapete come metterle in pratica, siete fortunati: Giovedi 15 settembre Stephanie terrà un seminario virtuale di 90 minuti su come implementare molte delle nuove caratteristiche dei CSS3. Non sentirete solo parlare dei benefici, imparerete la codifica che sta dietro di essi.

Consideratelo come un’anteprima del workshop di Stephanie e Greg di una giornata alla ‘User Interface 16 conference’, dove faranno un’immersione ancora più profonda, che vi mostrerà come mettere in pratica le nuove funzionalità dell’HTML5 e CSS3.

Dicci la tua

Avete già implementato tattiche di CSS3 e HTML5? Quali funzionalità vi hanno risparmiato tempo? Condividete i vostri pensieri con noi sul nostro blog.

Jared M. SpoolJared M. Spool

Questo articolo è stato ripubblicato con l’autorizzazione di User Interface Engineering. Per altri alrticoli e informazioni, visitate il sito http://www.uie.com/

Traduzione di

Stampa articolo Scarica il file in formato PDF

Elenco Articoli di Jared M. Spool

 Iscriviti alla newsletter


Argomenti correlati: usabilità web.

Lascia un commento