Lo Stato del Responsive Web Design

Entriamo or ora nel 2015, ed è il momento ideale per affrontare “Lo Stato del Responsive Web Design”.

Andiamo a rivisitare ciò che sappiamo del RWD, ciò che è stato lasciato per strada negli ultimi tempi, i nuovi espedienti che possiamo inserire nel nostro lavoro attuale, e ciò che è in arrivo all'orizzonte.

La Storia fino ad ora

Prima di addentrarci, cominciamo col definire ciò che effettivamente intendiamo quando diciamo “Responsive Web Design".

Quando Ethan Marcotte coniò originariamente il termine cinque anni fa nel suo articolo su A List Apart, citò griglie fluide, immagini flessibili, e le media query come i tre "ingredienti tecnici" del RWD.

Tuttavia, egli ha subito qualificato queste specifiche dicendo:

“...ma richiede anche un modo di pensare differente.”

Da quell'articolo del 2010 abbiamo visto una continua evoluzione nella tecnologia che le persone utilizzano per accedere a Internet, così come la nascita di vari nuovi elementi tecnici che possono essere aggiunti al nostro toolkit di sviluppo.

Usiamo ancora griglie fluide, immagini flessibili e media query, ma questi tre strumenti da soli non creano il quadro completo di ciò che il Responsive Web Design comporta.

La tecnologia e le tecniche web design sono in un perpetuo stato di continuo cambiamento, quindi la definizione di RWD dovrebbe idealmente darci un modo differente di pensare che sarà altrettanto applicabile dopo altri cinque anni di cambiamento, così come lo è oggi.

A mio avviso, questo modo di pensare può essere riassunto come segue.

“Il Responsive Web Design è un approccio alla creazione di siti web in grado di rispondere a tutti i dispositivi di navigazione web noti , con distribuzione di contenuti e l'interazione utente ottimizzata al massimo grado possibile per tutti i visitatori.”

Concentrandoci sul modo di pensare che soggiace al Responsive Web Design piuttosto che su specifici ingredienti tecnici, siamo liberi di raggiungere nuovi modalità per creare siti responsive nel paesaggio in continua evoluzione della nostra industria.

Il Responsive Web Design come lo conosciamo

Se certamente da un lato ci sono molte cose che sono cambiate nel RWD, ci sono anche diversi elementi che sono rimasti sostanzialmente gli stessi e che molti sviluppatori concordano nel definirli buone prassi.

Ecco alcuni degli aspetti più ampiamente accettati del RWD attuale così come lo conosciamo.

Supportare più tipi di visualizzazione

Sappiamo tutti che abbiamo bisogno di soddisfare una lista di possibili risoluzioni dello schermo con lunghezza pari fino al vostro braccio, varie densità di pixel e varie dimensioni viewport.

Supporto di più meccanismi di input

Dobbiamo soddisfare molteplici metodi di input, ad esempio dire addio alla dipendenza del passaggio del mouse e rendere gli elementi dell'interfaccia utente touch friendly.

Utilizzo di Media Queries e punti di interruzione

Abbiamo bisogno di utilizzare le Media Queries per sviluppare aggiiustamenti ai nostri layout quando e dove siano necessari.

Sappiamo che i punti di interruzione non devono essere messi a larghezze predeterminate, bensì nel punto in cui il disegno "rompe" e richiede la regolazione.

Visualizzazione flessibile dei Media

Le nostre immagini devono essere dimensionate in modo fluido così che non siano né troppo grandi né troppo piccole nelle varie dimensioni del display.

Anche altri media, come i lettori audio e video, hanno bisogno di comportarsi con la stessa modalità fluida.

Usare il Meta Tag Viewport

Dobbiamo inoltre includere: viewport meta tag (e, guardando in avanti, l'equivalente CSS) così che i nostri layout si comportino come prevediamo:

1

<meta name="viewport" content="initial-scale=1.0">

Sulla via per l'uscita

Ci sono un paio di filosofie e tecnologie che in passato sono state incorporate nel responsive web design, o almeno non escluse a titolo definitivo, ma ora gradualmente eliminate dal quadro per alternative migliorate.

Pensare “Desktop” vs. “Mobile”

Si consideri il seguente insieme di dispositivi per la navigazione web:

• Un Acer eMachine Netbook 10.1 pollici 1024x600 senza interazione touch.
• Un Panasonic Toughpad Tablet 20 pollici 3840x2560 con sola interazione touch.
• Una Ultra HD TV 78 pollici 3840x2161, con una Xbox che utilizza IE per navigare con le gestualità Kinect e comandi vocali.
• Un monitor 27 pollici ruotato in modalità ritratto in esecuzione a 1020px di larghezza per 1980px di altezza.
• Un monitor 24 pollici 1920x1080 con le impostazioni utente del browser al 125% di dimensione zoom e 20px di dimensone di default dei caratteri, in cui si naviga con una tastiera di assistenza e nessun mouse.

Considerate che questa lista è composta interamente da casi di utilizzo mondo reale, presenti oggigiorno.

Diciamo che il mio sito ha una serie di caratteristiche di piccole dimensioni, touch-friendly e specifiche per il mobile, e caratteristiche di design di maggiori dimensioni, mouse-dipendenti, specifiche per il desktop. A che larghezza devo impostare le media query per distribuire le mie caratteristiche "Desktop" e "mobile", in modo che tutti gli utenti di questi dispositivi abbiano una esperienza di prim'ordine?

La nostra lista copre una serie di casi diversi, ma ci sono centinaia se non migliaia di casi d'uso alternativi che gettano ulteriori barriere nel nostro lavoro.

La realtà è che oggi non c'è più alcuna distinzione tra i dispositivi mobile e desktop, quindi il modo migliore di procedere è quello di soddisfare contemporaneamente tutti i sistemi conosciuti di navigazione web.

Se i vostri siti sono costruiti da zero per rispondere magnificamente ad ogni caso d'uso conosciuto, non solo a quelli tradizionalmente definiti come mobile e desktop, avrete creato la forma di risposta a più ampia portata possibile.

Codice basato su Fixed-Pixel “px”

In primo luogo, abbiamo rinunciato a creare layout basati su pixel fisso interamente in Photoshop perché non erano fluidi o abbastanza flessibili per gestire lo spettro emergente delle possibilità del viewport.

Ora, stiamo anche iniziando a rinunciare a creare layout a pixel fissi nel nostro codice, più o meno per la stessa identica ragione. Costruendo invece i nostri layout utilizzando una combinazione di valori rem, em e %, i nostri siti saranno sempre e completamente scalabili e flessibili.

Con l'approccio di unità flessibili, i designs possono essere scalati in alto e in basso in modo uniforme, modificando un singolo valore di base. Le impostazioni di zoom e carattere del browser date dall'utente possono essere pienamente rispettate e sostenute. I vari problemi di dimensioni viewport possono essere immediatamente risolti. Ancora più importante, la leggibilità dei contenuti e l'accessibilità possono sempre essere assicurate.

I "Big 2" frameworks front-end stanno già lasciando la Brava Nave PX e stanno imbarcando i loro voli per la Terra dell'Unità Flessibile.

Bootstrap 4 è in lavorazione e sarà interamente basato su rem / em / %, lasciandosi alle spalle i layouts basati su px di Bootstrap 3. E Foundation 5 ha già completato la sua transizione per lavorare con unità flessibili.

I giorni della buon vecchia unità px che tutti abbiamo imparato a conoscere così bene nel corso degli anni stanno per concludersi.

Presto si troverà in una comoda poltrona nella casa di riposo, accanto ai suoi vecchi amici dai giorni di gloria, supporto per IE6 e intestazioni Flash animate.

Parlado di Flash...

Contenuto dipendente da Flash (e altri plugin browser )

Certo, un po' di tempo fa abbiamo potuto veder sparire le intestazioni animatein Flash, ma stiamo ancora vedendo video Flash-dipendenti, presentazioni e giochi che girano su una base abbastanza regolare. Non sto parlando solo di piccoli siti di hobbisti -vedo siti importanti e con grande traffico che ancora visualizzano questo messaggio se non si utilizza Flash per cercare di guardare il loro materiale video:

È molto tipico per i dispositivi mobili non supportare Flash, quindi affidarsi ad esso per distribuire contenuti non è l'approccio più sicuro.

Infatti, per ragioni essenzialmente di sicurezza e stabilità, i browser web stanno cominciando ad allontanarsi del tutto dal supporto di plugin come Flash, Silverlight e Java, a favore della tecnologia alternativa che funziona esclusivamente con inclusioni native del browser.

È giunto il momento di iniziare ad abbandonare i media basati su plug-media, e fare una transizione verso una nuova era di tecniche di visualizzazione dei media.

Debuttanti nel mondo RWD

Alcune di queste tecnologie sono quasi nuove di zecca, e alcune sono già in giro da un po' ma in continuo miglioramento, ma tutte hanno una cosa in comune: sono debuttanti nel mondo RWD, che va oltre l'attenzione originale per griglie flessibili, immagini fluide e media query.

Media potenziati da HTML5

Solo perché Flash e le sue controparti sono in caduta, non significa che non possiamo più avere belle cose. Video, audio, animazioni, e persino giochi 3D completi sono ancora pienamente nel mix grazie all'HTML5 e alle chicche basate su CSS3 e JavaScript che esso porta nel mix.

Dove una volta avevamo plugin del browser, ora abbiamo il video HTML5 nativo e lettori audio, animazioni CSS3, strumenti come Google Web Designer, Canvas, WebGL, e una lista sempre crescente di chicche nuove e interessanti.

Utilizzare <picture> per la gestione di Immagini Responsive

Il nuovo elemento HTML5 <picture> crea un tipo di funzionalità per le immagini simile a quella che si vede già ben consolidata per gli elementi <video> and <audio>.

Esso permette di effettuare controlli sulla dimensione del viewport e sulla densità di pixel del dispositivo e quindi caricare la versione più adatta di un'immagine a seconda dei risultati del controllo.

Non è ancora completamente supportato nativamente nei browser, tuttavia c'è un polyfill molto solido chiamato Picturefill (di Scott Jehl, l'uomo dietro Responsible Responsive Design) che permette a <picture> di essere impiegato immediatamente.

Per saperne di più sul suo funzionamento Quick Tip: Come utilizzare HTML5 “picture” per Responsive Images.

Icone per i Font

Perché avere icone a dimensione fissa quando si può avere la completa libertà di ridimensionare tutto con il cambio di una singola impostazione di dimensione del carattere nel CSS?

Attraverso incredibili librerie di font web come Font Awesome, Entypo, Typicons e molte altre, è possibile avere tutti i tipi di immagini nei vostri siti, da razzi a graffette a loghi di social media. Ma dato che sono forniti come font e non immagini, è possibile ricolorarli e ridimensionarli tramite CSS.

.Ciò significa che è possibile assicurare che le icone rispondano bene alle dimensioni del viewport in cui si trovano, e che siano sempre belle, facili da vedere e se necessario di facile interazione.

In arrivo all'orizzonte

Flexbox

Flexbox è impostato per risolvere molte delle più grandi emicranie che i web designer hanno cercato di sedare per anni.

C'è solo un problema: i tassi di utilizzo dei browser che non lo supportano ancora troppo significativi per Flexbox per poterci lavorare senza problemi. Se state lavorando su un progetto che esclude il supporto per IE8, IE9 e Opera Mini, allora usatelo.

Tuttavia, CanIUse.com segna la percentuale di utilizzo globale di questi tre browser rispettivamente al 3,18%, 2,13% e 2,82% . Al momento non c'è ancora un fallback affidabile per Flexbox. Ciò significa che su un sito con traffico da medio a pesante si possono osservare, su base mensile, centinaia di migliaia di utenti che approdano ad un sito non funzionante.

Noi tutti vogliamo che Flexbox diventi lo standard nella gestione del layout in modo da poter smettere di inventare metodi per eseguire operazioni su layout che dovrebbero essere relativamente semplici, e accadrà non appena i tre segni rossi rimanenti su questo grafico CanIUse spariranno.

Web Components

Abbiamo parlato di web components un po' di tempo fa, e stanno puntando verso di noi come la strada del futuro, avvicinandosi di giorno in giorno alla loro entrata nel mainstream.

Prima abbiamo menzionato gli elementi video, audio e picture e come siano utili per il responsive web design. Quando i web components arriveranno in forza, ognuno di noi sarà effettivamente in grado di creare elementi personalizzati proprio come quelli citati, per raggiungere qualsiasi scopo prefissato. Oltre a questo, i web components saranno condivisibili, nel senso che ci sarà una quantità praticamente illimitata di nuovi elementi responsive che potranno diventare utilizzabili nei nostri designs.

Questo essenzialmente democratizzerà l'HTML, che è una fatto enormemente importante.

Se c'è un nuovo elemento di cui il mondo potrebbe realmente fare grande uso, non avremo bisogno di aspettare il browser per la sua implementazione - ci serve vedere uno sviluppatore open source mettere assieme qualcosa e prendere la generosa decisione di condividere il suo lavoro.

Ad esempio, abbiamo detto in precedenza che il RWD richiede il posizionamento per media flessibili, e questo comprende il consentire a iframe con media incorporati come i video di YouTube di scalare e mantenere le sue proporzioni.

Lo sviluppatore Joselito Junior ha creato e reso open source un web component ch fa proprio questo, utilizzando questo semplce HTML:

1

<responsive-embed ratio="16:9">

2

  <iframe src="//www.youtube.com/embed/UpuJS4LO_Ms" frameborder="0" allowfullscreen></iframe>  

3

</responsive-embed>

Puoi approfondire questa affascinante nuova tecnolgia in How to Create Your Own HTML Elements With Web Components.

In Conclusione

Poiché la tecnologia è in continua evoluzione di minuto in minuto, è estremamente importante per noi rimanere concentrati sugli obiettivi di fondo del responsive web design, e non troppo attaccati a qualsiasi modalità univoca di fare le cose. In questo modo assicuriamo che saremo sempre aperti a scoprire nuovi modi per creare esperienze migliori per le persone che utilizzano i nostri siti.

Perché ciò accada, abbiamo bisogno di mantenere sempre le nostre orecchie a terra, per ascoltare gli ultimi sviluppi sia nei dispositivi di navigazione web e sia nelle tecniche di web design.

Se vuoi migliorare le tue tecniche per il responsive web design, potresti dare un'occhiata al mio corso Responsive Web Design Revisited. In circa due ore percorro tutto ciò che serve sapere per creare un sito web responsive completo fino alle tecniche minimali. I primi due video sono gratis, quindi andate a vedere l'anteprima del sito potrete creare, e tutto quello che imparerete.

Auguro un grande 2015, e un responsive web design sempre in evoluzione!