Interrompere le risoluzioni dello schermo
Viviamo in un momento così eccitante nel mondo del web. La tecnologia e gli standard stanno procedendo a un ritmo forse più veloce ed entusiasmante che mai. Man mano che le cose cambiano, anche le nostre abitudini e un settore che ritengo abbia visto cambiamenti maggiori rispetto alla maggior parte dovrebbero essere i cambiamenti di risoluzione che i nostri dispositivi stanno attualmente eseguendo.
La risoluzione è una cosa divertente da misurare; non è un cambiamento di dimensione fisica, ma un cambiamento di chiarezza. Non sta rendendo le immagini, più luminose o più ricche di colore, ma rendendole più dense. È anche qualcosa che le persone raramente capiscono il valore di fino a quando lo vedono da soli.
Certo, quando abbiamo un assaggio di display ad alta risoluzione, siamo agganciati. E tutti desideriamo che i nostri siti Web (e i siti Web dei nostri clienti) siano fantastici sui dispositivi che stanno sfoggiando questi display. Molti web designer stanno correndo verso questo obiettivo creando immagini per ogni nuova risoluzione che arriva sulla nostra strada. O, come lo chiamo in questo articolo, "inseguendo risoluzioni dello schermo".
Un'introduzione a SVG
Molti di noi sanno cosa sono gli SVG (Scalable Vector Graphics). Lo abbiamo visto sul sito Web W5C HTML5, sotto "3D, grafica ed effetti". SVG è una tecnologia HTML5 standard, che visualizza immagini con codice. O qualcosa.
Almeno, questa è la risposta generale che ho ottenuto quando ho chiesto informazioni sulla grafica SVG. Non è davvero qualcosa a cui le persone sono interessate, perché il suo valore non è completamente compreso.
Voglio mostrarti come evitare "inseguire risoluzioni dello schermo", e solo così accade che lo standard SVG può aiutarci a fare proprio questo.
Lo stato della grafica retina
Quando dico "retina graphics", mi riferisco a tutti i dispositivi che hanno una risoluzione dello schermo superiore a quella dei display tradizionali, con una risoluzione superiore a 72ppi (pixel per pollice).
La famosa Apple ha infranto la barriera del 72ppi con l'iPhone 4, un dispositivo con un nuovo fantastico display ad alta risoluzione, che sembra diverso da qualsiasi altra cosa abbiamo visto prima. Tranne quando lo hai usato per navigare sul web ... il web sembrava spazzatura.
Il web ha avuto immagini ottimizzate 72ppi. Al momento della stesura di questo, la maggior parte del web lo fa ancora, due anni dopo il lancio di iPhone 4.
Ora, abbiamo tutti i tipi di dispositivi con grafica Retina di qualità. Si sta lentamente diffondendo su tutta la linea di prodotti Apple, estendendosi a iPod Touch, iPad e persino all'ultimo MacBook Pro. Gli smartphone stanno spuntando ovunque con schermi ad alta risoluzione, tanto che a questo stadio un display a risoluzione "standard" sembra quasi vecchio.
Dipende ancora dalla risoluzione
Quando la community del web design ha superato il problema delle immagini sfocate con immagini 2x caricate condizionatamente (immagini che sono state create per essere due volte le dimensioni delle loro controparti originali, caricate solo su dispositivi ad alta risoluzione), il web sembrava di nuovo buono, per la maggior parte . Alcuni designer hanno persino pubblicizzato i loro siti web come "indipendenti dalla risoluzione".
Ovviamente, quello che avrebbero dovuto realmente pubblicizzare i loro siti era "ottimizzato per due risoluzioni dello schermo".
I dispositivi continueranno a migliorare, le risoluzioni continueranno a migliorare e il Web continuerà ad essere apprezzato su un numero crescente di fattori di forma. E l'inevitabile futuro @ 3x? Che dire di @ 4x? Che dire se lo "1x" standard diventa inutile? Cosa rende 3x "@ 3x" e non "@ 2.5x"?
Davvero disordinato
Inoltre, questo tipo di tecnica è difficilmente diffuso. Scorro il web sul suddetto MacBook Pro con Retina Display, e la maggior parte del web è purtroppo esattamente dove è sempre stato dall'iPhone 4: sfocato. Creare di nuovo tutte le tue immagini web è un compito arduo, specialmente quando l'intero mondo del web design progetta con bitmap per così tanto tempo.
Web unzoomable
Ancora oggi, con le nostre immagini @ 2x, non possiamo ancora ingrandire le pagine web senza che queste diventino di nuovo brutte. Il testo gestisce uno zoom proprio bene, ma in confronto, le immagini si limitano a gridare per quelle future esportazioni @ 4x (qualcosa che nessuno riterrà appropriato per servire solo nella remota possibilità che qualcuno possa voler ingrandire l'icona 4x nella tua icona RSS) .
Diventando veramente risoluzione indipendente
Il problema è con le immagini bitmap. Abbiamo sempre saputo che non sono di alto livello e ora non è diverso. Ciò di cui abbiamo bisogno è la grafica vettoriale sui nostri siti web. La grafica vettoriale è calcolata da una serie di istruzioni, piuttosto che da una griglia in cui ogni pixel rappresenta un colore. Entra, SVG.
Taglia unica
Dal momento che i grafici SVG sono grafica vettoriale (da cui il nome "Scalable Vector Graphics"), appariranno meravigliosi nelle risoluzioni dello schermo di ieri, di oggi e anche di domani. Inoltre, grazie alla natura formulaica della grafica vettoriale, puoi ingrandire qualsiasi dispositivo e le immagini rimarranno magnifiche.
Tempi di caricamento più rapidi
Creare un'immagine da 2000px per 2000px, per un web designer, suona a dir poco ridicolo. Ci vorrebbe troppo tempo per caricarsi, porterebbe in ginocchio alcuni dispositivi mobili e la versione 4000 x 4000 px "@ 2x" sarebbe una follia. E come le risoluzioni vanno sempre meglio, è semplicemente insostenibile. Con SVG, poiché è un formato vettoriale, non importa se l'immagine è 20px o 2000px; il tempo di caricamento sarà esattamente lo stesso. L'unica cosa che fa la differenza per i tempi di caricamento è la complessità di ogni file di immagine.
Puoi usarlo oggi
SVG potrebbe non essere supportato su tutta la linea, ma Modernizr può rilevarlo. Servendo una versione SVG e non SVG, puoi sfruttare tutti i vantaggi di SVG, lasciando i browser legacy con un PNG @ 1x. È così semplice:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Limitazioni di SVG
Non è difficile creare grafica SVG da qualsiasi immagine basata su vettori. Molte app professionali come Adobe Illustrator e Inkscape possono esportare in SVG in modo nativo. Tuttavia, ci sono alcune cose che devi sapere sugli SVG per il web.
Non possono contenere immagini bitmap di alcun tipo.
Certo, puoi aggiungerli nelle applicazioni di authoring SVG come Illustrator o InkScape e salvare il tuo lavoro come SVG, ma non renderanno dove importa: il tuo browser web. La procedura guidata CSS sarà necessaria per caricare una bitmap sopra l'SVG dove appropriato.
Può richiedere un caricamento per sempre se complicato
Se realizzi un SVG complicato, ti verrà colpito con tempi di caricamento non dissimili dall'immagine 2000px x 2000px sopra citata. Non vorrai disegnare un dipinto complesso in formato SVG, per esempio.
Devi mantenerlo semplice
App come Illustrator e Inkscape possono fare molto più di quanto il tuo browser web possa gestire. Sono app di illustrazione in piena regola, non app di creator SVG web. In effetti, è sicuro assumere che il 90% della funzionalità offerta da tali tipi di applicazioni non sarà disponibile per gli spettatori sul Web. Se hai familiarità con il software vettoriale, dovrai imparare modi alternativi per creare gli effetti che hai imparato ad amare.
Prova ad imparare la lingua
Il codice SVG non è qualcosa che puoi "vedere nella tua mente" come puoi quando leggi HTML. È una serie di istruzioni mappate l'una rispetto all'altra, elemento per elemento, strato per strato. Sfortunatamente, a partire da oggi, probabilmente dovrai immergerti di tanto in tanto, dato che ci sono alcuni risultati che Adobe Illustrator non offre.
Ad esempio, le immagini in Illustrator hanno una tela su cui disegni; è una larghezza impostata di un'altezza impostata. È fantastico, ma se vuoi controllare quei dettagli nel browser, hai bisogno che tali informazioni vengano tolte dallo stesso SVG (nota: alcuni browser interpretano il tuo CSS indipendentemente da qualsiasi dimensione SVG dichiarata, ma non tutti lo fanno). Non è particolarmente difficile, ma può essere un mal di testa. Vale la pena dedicare un po 'di tempo alla conoscenza della lingua, in modo da poter manipolare ulteriormente gli SVG.
SVG in the Wild
Loghi
I loghi dovrebbero in genere essere comunque in un formato vettoriale, quindi sono un ottimo modo per portare SVG nei progetti del tuo sito web. Usando il markup sopra, hai tutto ciò di cui hai bisogno per portare i tuoi primi elementi SVG online.
Icone
Le icone sono un ottimo candidato per SVG. Tanto che ho creato un set completo di icone usando la grafica SVG. La natura scalabile di SVG significa che le icone possono essere utilizzate a qualsiasi dimensione, adattando una vasta gamma di design del sito.
animazioni
Le animazioni rappresentano un'ottima opportunità per l'utilizzo grafico SVG. Poiché le animazioni sono in genere legate a larghezza e altezza fisse, SVG contribuisce in qualche modo ad aiutare le animazioni a reagire. Flash ha utilizzato elementi grafici vettoriali, ora anche le animazioni HTML5.
Immagini di sfondo
Le immagini di sfondo sono sempre state un punto delicato per gli sviluppatori web; i potenziali tempi di caricamento, come ho detto sopra, possono essere pazzi. Le immagini di sfondo SVG possono essere grandi quanto vuoi; hanno ancora tempi di caricamento rapidi a condizione che non siano davvero complessi.
Conclusione
Tutto sommato, l'indipendenza dalla risoluzione è un obiettivo fantastico per i web designer e gli sviluppatori. Significa anche che i loro gusti di design saranno obsoleti prima che le loro immagini del sito siano. Mentre è importante avvicinarli con gli occhi aperti, è abbastanza chiaro vedere come la grafica SVG può avvicinarti a un futuro di indipendenza dalla risoluzione totale.
Quando carichi un sito SVG su un dispositivo ad alta risoluzione come un iPad 3 e ingrandisci, sarai venduto.
Spero che questo articolo contribuisca in qualche modo a incoraggiare il pensiero indipendente dalla risoluzione nel web design e sviluppo, e spero che abbia incoraggiato alcuni di voi a pensare a come SVG può funzionare per il vostro prossimo sito.
Sono stato nel pool SVG per un po ', e devo dire che l'acqua non è mai stata più bella.
Sei un SVG convertito o servi bitmap scalati per display retina? I vettori sono il futuro della grafica web? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine vettoriale via Shutterstock.