Apple sta spingendo il settore tecnologico in avanti aumentando la densità dei pixel sugli schermi di iPhone e iPad. Questo è fantastico dal punto di vista dell'utente, ma come web designer o sviluppatore minaccia letteralmente di cambiare completamente il modo di costruire siti web.
Sei pronto per il web design HD? Sai come appariranno i tuoi siti su una nuova generazione di schermi ad alta risoluzione? Quali passi puoi intraprendere per prepararti e quali sono le competenze necessarie per rimanere rilevante negli anni a venire? Continuate a leggere per scoprirlo.
Quando Apple parla, noi ascoltiamo
Sto usando Macs fedelmente dai 9 giorni di OS, non tanto quanto alcuni vecchi temporizzatori, ma abbastanza a lungo da bere il Kool-aid e diventare completamente dipendente da tutte le cose di Apple.
Ricordo che quando vedevo un logo Apple significava che il prodotto era qualcosa di una nicchia, un valore anomalo che solo gli individui testardi della società usavano in un palese tentativo di andare contro la corrente principale, la cultura che amava Windows.
"Se scegli una casa a caso, troverai almeno un iPod, iPhone e / o iPad all'interno."Attraverso un'impressionante trasformazione basata sulla dedizione alla creazione di prodotti innovativi di nuova generazione, la piccola compagnia perdente è diventata la società più preziosa del pianeta. Potrebbe non esserci un Mac su ogni desktop in America, ma se scegli una casa a caso, troverai almeno un iPod, iPhone e / o iPad all'interno.
Non cerco eloquentemente per convertirti al mio culto, voglio semplicemente stabilire che Apple è un motore e uno shaker nel settore tecnologico. A nessuno importava quali fossero le nuove funzionalità di Newton, ma quando Apple rilascia un nuovo dispositivo iOS, il mondo si ferma e ascolta pazientemente ciò che i maghi di Infinite Loop ci dicono che il futuro sarà simile.
Apple scommette su alta risoluzione
Fino a poco tempo fa, Apple non aveva nulla a che fare con il nostro fascino per una migliore risoluzione dello schermo. I televisori HD più grandi e migliori sono stati al centro dei consumatori e delle aziende di elettronica per un decennio. Un marketing intelligente unito a una tecnologia impressionante per creare un'insaziabile sete di schermi ad alta definizione, programmazione via cavo e film.
Per la maggior parte però, questa tendenza è rimasta lontana dall'informatica. Certo, ci sono schermi cinematografici enormi e meravigliosi, ma la densità dei pixel non è mai stata tale da richiedere un importante cambio di paradigma. Cioè, fino a poco tempo fa.
Quando l'iPhone 4 è crollato a metà del 2010, è arrivato con una sorpresa: la? Retina? schermo, che ci ha sconvolti raddoppiando la vecchia risoluzione con uno stupefacente 326 pixel per pollice (per un confronto, un iMac da 27 "è 109ppi) .Questo era un punto di svolta: c'erano molte speculazioni su come ridimensionare questa tecnologia a un prezzo conveniente sarebbe essere quasi impossibile, ma Apple ha fatto proprio questo, raddoppiando anche la risoluzione sull'iPad di terza generazione, che arriva a un 264ppi leggermente più basso ma comunque splendido.
Perché questo cambia completamente come fai il tuo lavoro
E allora? Grazie per la lezione di storia, ma questo è un blog di design, giusto? A chi importa della densità dei pixel di un iPad? Come web designer, lo sai, se lo conosci ancora o no.
Il problema è evidente proprio qui su questo sito così come ogni altro che visiterai oggi. Vai avanti, prendi un'immagine dal web e aprila in Photoshop. Ora apri la finestra di dialogo Dimensione immagine. Vedi qualcosa di interessante?
I web designer hanno sempre avuto un piccolo vantaggio rispetto ai designer di stampa: possiamo usare grafica a bassa risoluzione. Perché è un vantaggio e non uno svantaggio? Poiché i file PSD con livelli ad alta risoluzione possono rallentare la scansione della macchina, le immagini in alta risoluzione costano molto più denaro, le immagini ad alta risoluzione richiedono sempre un caricamento sul Web; La lista potrebbe continuare all'infinito.
Il problema è chiaro, però, quell'immagine in alto arriva a soli 72ppi mentre il nuovo iPad è 264ppi! (Questo semplifica eccessivamente l'argomento, leggi questo articolo per ulteriori informazioni sulla possibilità o meno di visualizzare le immagini a 72ppi.)
Pensa a cosa significa. Apple ha display retina sull'intera linea iOS: iPod Touch, iPhone e iPad. Ciò significa che milioni di persone navigano sul Web ogni giorno su schermi ad alta risoluzione che non visualizzano correttamente le immagini. Non commettere errori, questa tendenza peggiorerà solo con il recupero di altri produttori di dispositivi e Apple esplora i modi per portare più densità di pixel al prossimo posto ovvio: il mercato dei laptop.
Cosa sai fare?
Il problema della densità dei pixel è interessante. Il web rappresenta così tante diverse tecnologie che si uniscono in armonia che può essere caotico se una di queste tecnologie procede in anticipo e sconvolge l'equilibrio.
Stiamo assistendo all'emergere di schermi a risoluzione più elevata, ma il nostro contenuto è ottimizzato solo per i vecchi schermi. Inoltre, pensate a quanto pazzi gli sviluppatori di siti web sono circa i tempi di caricamento delle pagine con immagini a bassa risoluzione, ora immaginate quanto rallentamento otterreste su un sito pesante come Pinterest se fosse improvvisamente pieno di immagini da 326ppi!
Pure HTML e CSS Web Elements
La buona notizia è che ci siamo preparati per anni in questo modo e non lo sapevamo nemmeno. L'ascesa di CSS3 e HTML5 ha spinto in avanti la nozione di ridurre il numero di immagini che usiamo nel nostro markup.
In questi giorni la maggior parte degli elementi dell'interfaccia utente sono visualizzati nel browser, il che significa che si adattano perfettamente a qualsiasi schermata che si lancia su di loro.
Per illustrare, ecco come appare quando eseguo lo zoom su un pulsante di download basato su immagini sul mio iPhone 4.
Ora, se guardo lo stesso pulsante creato con le stesse dimensioni in pixel ma renderizzato usando i CSS, posso ingrandire quanto voglio con zero degrado dell'immagine.
È una cosa bella no? La morale qui è che l'? Immaginario? la tendenza ha dato i suoi frutti a lungo termine e ci ha messo molto meno a preoccuparci di quanto non avremmo avuto gli schermi retinici quando abbiamo usato le immagini per gradienti, ombre, angoli arrotondati e praticamente qualsiasi altro stile avanzato.
È importante notare che gli oggetti renderizzati con canvas HTML5 e JavaScript possono raggiungere una scalabilità simile.
SVG
SVG, o grafica vettoriale scalabile, sono un altro passo importante sulla strada verso l'indipendenza dalla risoluzione. Questa tecnologia è in circolazione da secoli ma ha visto solo di recente il supporto cross-browser con IE9 che finalmente salta sul carro.
Quando penso a SVG, penso ad Adobe Illustrator. Questa app è principalmente utilizzata per la creazione di grafica basata su vettori con scalabilità infinita. A sua volta, SVG porta questa stessa funzionalità alla grafica web.
Quasi tutto ciò che è possibile creare in Illustrator e in altre app di modifica vettoriale può essere facilmente esportato come file SVG e implementato sul Web come un oggetto scalabile.
Il vantaggio qui su CSS sembra inizialmente sfumato, ma diventa chiaro quando si lavora con immagini complesse. È facile creare pulsanti semplici con i CSS, ma quando si parla di costruire, il logo Starbucks, le cose diventano davvero complicate e complicate.
In alternativa alle ore e alle ore di manipolazione dei CSS e forse centinaia di linee di codice per un singolo oggetto (supponendo che sia possibile anche con i CSS), potresti semplicemente esportare una versione vettoriale del logo Starbucks come SVG e incorporarla nel tuo web pagina in solo un minuto o due! Clicca qui per vedere un esempio dal vivo di questo. Assicurati di ingrandire con Command + e guarda come l'immagine si adatta perfettamente.
Per ulteriori informazioni su come implementare SVG nel tuo sito, consulta queste grandi risorse:
- Risoluzione Indipendenza con SVG
- Utilizzo di SVG per sfondi flessibili, scalabili e divertenti, Parte I
- Giocando con SVG Design
Ma che dire di foto?
Questo è tutto a posto, ma dato che abbiamo affrontato il web design senza immagini con l'interfaccia utente per così tanto tempo, non è poi così tanto di una palla curva fare qualcosa in più con SVG. Il vero problema sta nelle foto sul web.
Le foto sono immagini raster e in quanto tali non fanno altro che schiacciare il sogno di un vero web design indipendente dalla risoluzione. Non importa cosa tiriamo fuori dalla nostra valigia di trucchi per il web design, non possiamo aggirare questa limitazione.
Per ora, questo significa offrire immagini diverse a dispositivi diversi. Questo fa schifo, ma non vuoi che le schermate di retina non vengano caricate in quelle enormi immagini e non vuoi servire immagini "sucky" agli schermi retina, quindi questa è l'unica soluzione.
Questo può essere ottenuto attraverso le query multimediali e la funzione di rapporto pixel del dispositivo. Ad esempio, Hal Gatewood ci mostra come possiamo indirizzare l'iPad di terza generazione:
Che dire delle immagini HTML incorporate?
Il metodo sopra è tutto a posto, ma funziona solo con le immagini di sfondo CSS. Cosa succede se vuoi incorporare un'immagine usando HTML? Inoltre, questo ha implicazioni drastiche anche per il video, quindi come puoi pubblicare video personalizzati su schermi ad alta risoluzione?
Sfortunatamente, non esiste una vera risposta usando puro HTML. Forse il bisogno diventerà così grande che vedremo qualcosa di simile in futuro, ma per ora, sei sfortunato.
L'unica soluzione è quella di passare a qualcosa di più potente come JavaScript. Bdoran.co.uk ha un rapido esempio di come rilevare l'iPhone 4 con JavaScript o PHP che dovresti controllare.
Questo ovviamente presenta enormi problemi per i web designer che cercano di restare con HTML e CSS e non hanno familiarità con JavaScript e altre tecnologie web avanzate. All'improvviso, questo gruppo non può nemmeno presentare contenuti semplici in un modo ottimizzato per la visualizzazione sulla maggior parte dei dispositivi.
Conclusione
Non importa se ami Apple o se odi assolutamente tutto quello che rappresentano, la realtà è che se sei un web designer, l'aumento del display della retina sta per dare il via a una tendenza che cambierà radicalmente il tuo modo di costruire siti web .
A questo punto abbiamo alcune linee di azione da esplorare: le pagine HTML5, JavaScript, CSS3, SVG e media query comprendono il tuo arsenale di armi con cui attaccare il problema dei tuoi contenuti visualizzati a 264ppi.
Speriamo che nel prossimo futuro vedremo più robuste opzioni per servire diverse immagini e video HTML incorporati ai dispositivi corretti.
Lascia un commento qui sotto e facci sapere i tuoi pensieri su tutto questo. Sei eccitato dalle nuove possibilità o intimidito dal territorio incerto? Inizierai presto a ottimizzare il tuo lavoro per gli schermi Retina? L'hai già fatto?