Share
Mentre ci spostiamo nel 2015 è il momento perfetto per affrontare "The State of Responsive Web Design".
Stiamo andando a rivisitare ciò che sappiamo su RWD, ciò che è stato lasciato al margine negli ultimi tempi, i nuovi trucchi che possiamo incorporare nel nostro gioco oggi e quello che sta arrivando all'orizzonte.
Prima di iniziare, iniziamo definendo cosa intendiamo realmente quando diciamo "Responsive Web Design".
Quando Ethan Marcotte ha originariamente coniato il termine cinque anni fa nel suo articolo su A List Apart, ha citato reti fluide, immagini flessibili e domande dei media come tre "ingredienti tecnici" di RWD.
L'immortale illustrazione di accompagnamento di Kevin CornellTuttavia ha immediatamente qualificato queste specifiche dicendo:
"... ma richiede anche un modo diverso di pensare".
Da quell'articolo del 2010 abbiamo visto una continua evoluzione della tecnologia utilizzata dalle persone per accedere a Internet, così come l'emergere di numerosi nuovi ingredienti tecnici che possono essere aggiunti al nostro toolkit di sviluppo.
Utilizziamo ancora griglie fluide, immagini flessibili e query multimediali, ma queste tre cose da sole non costituiscono più un quadro completo di ciò che implica Responsive Web Design.
Le tecnologie e le tecniche di web design sono in uno stato di flusso perenne, quindi la definizione di RWD dovrebbe idealmente darci un modo diverso di pensare ciò sarà altrettanto applicabile dopo altri cinque anni di cambiamenti come è oggi.
A mio avviso, questo modo di pensare può essere riassunto come segue.
"Responsive Web Design è un approccio alla creazione di siti web che può rispondere a tutti i dispositivi di navigazione Web conosciuti, con distribuzione dei contenuti e interazione dell'interfaccia utente ottimizzata nella massima misura possibile per tutti i visitatori. "
Concentrandoci sul modo di pensare che sta alla base del responsive web design piuttosto che su specifici ingredienti tecnici, rimaniamo liberi di impegnarci per i migliori nuovi modi di creare siti reattivi nel panorama in continua evoluzione del nostro settore.
Mentre ci sono certamente molte cose che sono cambiate in RWD, ci sono anche molte cose che sono rimaste sostanzialmente le stesse e che molti sviluppatori concorderanno nell'essere buone pratiche.
Ecco alcuni degli aspetti più ampiamente accettati dell'attuale RWD così come lo conosciamo.
Sappiamo tutti che abbiamo bisogno di un elenco di possibili risoluzioni di visualizzazione purché il braccio, densità di pixel multipli e varie dimensioni di visualizzazione.
Dobbiamo soddisfare più metodi di input, ad es. dire addio alla dipendenza da mouse hover e rendere gli elementi dell'interfaccia utente touch friendly.
Dobbiamo utilizzare Media Queries per implementare le modifiche ai nostri layout come e quando sono necessari.
Sappiamo che i breakpoint dovrebbero essere posizionati non su larghezze predeterminate, ma piuttosto sul punto in cui il design "si rompe" e garantisce l'aggiustamento.
Le nostre immagini devono essere di dimensioni ridotte in modo da non essere né troppo grandi né troppo piccole in varie dimensioni del display.
Anche altri media, come i lettori video e audio, devono comportarsi nello stesso modo fluido.
Dobbiamo includere un meta tag viewport (e, guardando avanti, l'equivalente CSS) in modo che i nostri layout si comportino come ci aspettiamo che:
Ci sono alcune filosofie e tecnologie che in passato sono state incorporate nel web design reattivo, o almeno non escluse a priori, ma sono state gradualmente eliminate dal quadro con alternative migliorate.
Considera la seguente raccolta di dispositivi di navigazione Web:
Tenete presente che questa lista è interamente composta da casi d'uso del mondo reale e attuale.
Supponiamo che il mio sito disponga di una serie di caratteristiche di dimensioni ridotte, touch-friendly, specifiche per dispositivi mobili e funzionalità di progettazione specifiche per desktop specifiche per il mouse di dimensioni maggiori. A che larghezza devo impostare le query multimediali per implementare le mie funzionalità "mobile" e "desktop" in modo che tutti gli utenti di questi dispositivi abbiano un'esperienza di prima classe?
Il nostro elenco comprende una manciata di esempi diversi, ma ci sono centinaia, se non migliaia, di casi d'uso extra là fuori che lanciano chiavi addizionali nelle opere.
La realtà è che oggi non c'è più alcuna chiara distinzione tra dispositivi mobili e desktop, quindi la soluzione migliore è quella di soddisfare contemporaneamente tutti i metodi conosciuti di navigazione web.
Se i tuoi siti sono costruiti da zero per rispondere magnificamente a tutti i casi d'uso noti, non solo quelli tradizionalmente definiti come mobili e desktop, avrai creato la forma di risposta più ampia possibile.
Innanzitutto, abbiamo rinunciato a provare a creare layout basati su pixel fissi interamente in Photoshop perché non erano abbastanza fluidi o flessibili per gestire lo spettro emergente dei requisiti di visualizzazione.
Ora, stiamo anche iniziando a rinunciare a creare layout di pixel fissi nel nostro codice, praticamente per lo stesso motivo. Costruendo invece i nostri layout utilizzando una combinazione di rem, em e % valori, i nostri siti rimangono sempre completamente scalabili e flessibili.
Con l'approccio unitario flessibile, i progetti possono essere scalati in su e in giù in modo uniforme cambiando un singolo valore di base. Le impostazioni del carattere e dello zoom del browser degli utenti possono essere pienamente rispettate e supportate. Diversi problemi relativi alle dimensioni della vista possono essere risolti immediatamente. Soprattutto, la leggibilità dei contenuti e l'accessibilità possono sempre essere mantenuti.
I telai frontali "Big 2" stanno già sbarcando The Good Ship PX e si imbarcano su Flexible Unit Land.
Bootstrap 4 è in lavorazione e sarà interamente rem / em / % basato, lasciando il px layout basati su Bootstrap 3. E Foundation 5 ha già completato la sua transizione a lavorare con unità flessibili.
I giorni della buona vecchia unità di px che tutti abbiamo imparato a conoscere così bene nel corso degli anni stanno volgendo al termine.
Potrebbe ben presto ritrovarsi ad accomodarsi su una comoda sedia nella casa di riposo, accanto ai suoi vecchi amici dei giorni di gloria, Supporto IE6 e animazioni Flash animate.
Parlando di Flash ...
Certo, potremmo aver visto le intestazioni di animazioni Flash scomparire qualche tempo fa, ma continuiamo a vedere video, presentazioni e giochi Flash dipendenti in modo abbastanza regolare. Non sto parlando solo di piccoli siti hobbisti: vedo siti importanti e molto trafficati che mostrano ancora questo messaggio se non si utilizza Flash e si tenta di guardare il loro materiale video:
È molto comune che i dispositivi mobili non supportino Flash, quindi affidarsi a questi per fornire contenuti non è l'approccio più sicuro.
Infatti, per ragioni principalmente di sicurezza e stabilità, i browser Web stanno iniziando ad allontanarsi dal supportare plugin come Flash, Silverlight e Java del tutto, a favore di una tecnologia alternativa che funziona esclusivamente tramite inclusioni native del browser..
È giunto il momento di iniziare a far scorrere i media basati su plug-in e di passare a una nuova era di tecniche di visualizzazione dei media.
Alcune di queste tecnologie sono quasi nuove di zecca e alcune sono in circolazione da un po ', ma sono in costante miglioramento, ma tutte hanno una cosa in comune: sono entrati nel mondo RWD che vanno oltre il focus originale su griglie flessibili, immagini fluide e domande dei media.
Solo perché Flash e le sue controparti sono in svantaggio, non significa che non possiamo ancora avere cose belle. Video, audio, animazioni e persino giochi 3D e completi sono ancora molto nel mix grazie a HTML5 e ai bonus basati su CSS3 e JavaScript che introduce nel mix.
Dove un tempo avevamo i plug-in del browser, ora abbiamo player HTML5 video e audio nativi, animazioni CSS3, strumenti come Google Web Designer, Canvas, WebGL e un elenco sempre crescente di nuove interessanti novità.
Il nuovo elemento HTML5 e elementi.
Ci consente di eseguire controlli sulla dimensione del viewport e la densità dei pixel del dispositivo e quindi caricare la versione più adatta di un'immagine in base ai risultati.
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 consente
Ulteriori informazioni su come tutto funziona in Suggerimento rapido: come utilizzare l'immagine HTML5 per immagini reattive.
Perché avere icone a dimensione fissa quando puoi avere il ridimensionamento completo della libertà con una modifica a una singola impostazione della dimensione del carattere in CSS?
Attraverso incredibili librerie di font web come Font Awesome, Entypo, Typicons e altro, puoi avere tutti i tipi di immagini nei tuoi siti, dai razzi alle graffette ai loghi dei social media. Ma poiché sono forniti come caratteri e non come immagini, puoi ricolorarli e ridimensionarli tutti tramite CSS.
Ciò significa che puoi assicurarti che le tue icone rispondano bene alle dimensioni del viewport in cui si trovano, sempre bello e facile da vedere e da interagire in base alle esigenze.
Flexbox è impostato per risolvere molti dei più grandi mal di testa che i web designer hanno cercato di sedare per anni.
C'è solo un problema: i tassi di utilizzo dei browser che non lo supportano sono ancora troppo significativi in molti casi d'uso per consentire a Flexbox di andare completamente al lavoro. Se stai lavorando su un progetto che esclude IE8, IE9 e Opera Mini, hai a disposizione.
Tuttavia, CanIUse.com fissa la percentuale di utilizzo globale di questi tre browser rispettivamente al 3,18%, 2,13% e 2,82%. Al momento non esiste un fallback affidabile per Flexbox. Ciò significa che su un sito con traffico medio-pesante stai monitorando mensilmente centinaia di migliaia di utenti che si trovano in un sito danneggiato.
Vogliamo tutti che Flexbox diventi lo standard nella gestione del layout in modo che possiamo smettere di sognare modi per eseguire quelle che dovrebbero essere attività di layout relativamente semplici, e non appena i tre segni rossi rimanenti su questo grafico CanIUse svaniscono, è previsto che accada.
Abbiamo parlato di componenti web poco fa, e sono ancora diretti verso di noi come la via del futuro, avvicinandoci alla rottura nel mainstream giorno per giorno.
Prima abbiamo menzionato il video, Audio e immagine elementi e quanto sono utili per il responsive web design. Quando i componenti web entrano in vigore, ognuno di noi sarà effettivamente in grado di creare elementi personalizzati proprio come questi, per qualsiasi scopo che dobbiamo compilare. Inoltre, i componenti web saranno condivisibili, il che significa che c'è una quantità praticamente illimitata di nuovi elementi reattivi che potrebbero diventare utilizzabili nei nostri progetti.
Questo essenzialmente democratizza l'HTML, che è un po 'enorme.
Se c'è un nuovo elemento di cui il mondo potrebbe davvero fare un grande uso, non avremo bisogno di aspettare l'implementazione del browser: basterà vedere uno sviluppatore open source mettere insieme qualcosa e prendere la generosa decisione di condividere il proprio lavoro.
Ad esempio, abbiamo menzionato in precedenza che RWD richiede un posizionamento multimediale flessibile e ciò include la possibilità di consentire ai supporti incorporati iframe come i video di YouTube di ridimensionare e mantenere le proporzioni.
Lo sviluppatore Joselito Junior ha creato e aperto un componente web che fa proprio questo, usando questo semplice HTML:
Maggiori informazioni su questa affascinante nuova tecnologia in Come creare i propri elementi HTML con i componenti Web.
Poiché la tecnologia cambia di minuto in minuto, è estremamente importante per noi rimanere concentrati sugli obiettivi sottostanti del web design reattivo, e non rimanere troppo attaccati a un qualsiasi modo di fare le cose. In questo modo ci assicuriamo di essere sempre aperti alla scoperta di nuovi modi per creare esperienze migliori per le persone che utilizzano i nostri siti.
Perché ciò accada, dobbiamo tenere sempre le orecchie a terra, ascoltando gli ultimi sviluppi sia nei dispositivi di navigazione web che nelle tecniche di web design.
Se desideri rispolverare le tue tecniche di progettazione web reattiva, potresti voler controllare il mio corso Responsive Web Design Revisited. In poco più di due ore ti passo attraverso tutto ciò che devi sapere per creare un sito web completo e reattivo con tecniche fino all'ultimo minuto. I primi due video sono gratuiti, quindi vai avanti e ottieni un'anteprima del sito che creerai e tutto ciò che imparerai.
Ti auguro un ottimo 2015 ed ecco un web design reattivo in continua evoluzione!
Accentsconagua