Share
Il nuovo iPad è stato rilasciato lo scorso mese e, tra le altre cose, vanta un incredibile Retina Display con una risoluzione di 2048 per 1536 pixel. Praticamente non appena è stato annunciato, l'attenzione si è rivolta agli sviluppatori di app native e al loro lavoro per ridimensionare le app fino alla risoluzione più elevata.
Quello era discutibilmente l'obiettivo sbagliato. Relativamente poco è stato pensato in termini di web, e come si sarebbe visto sul nuovo Retina Display in attesa dell'annuncio. Ci ha lasciato un internet di testo incredibilmente nitido, ma immagini ridicolmente terribili e di bassa qualità. È ora di ottimizzare, quindi in questo tutorial andremo a pianificare come progettare con il Retina Display in mente.
Questo è probabilmente abbastanza ovvio, ma può ancora essere trascurato da alcuni. Con progressi significativi nei CSS, l'uso delle immagini nella struttura di un sito può essere abbastanza minimo, o addirittura inesistente. Ciò conferisce a questi siti un enorme vantaggio quando si tratta di compatibilità con Retina Display perché la grafica generata da testo e CSS si ingrandisce senza ridurre la qualità. Per lo stesso motivo, il testo appare misurabilmente migliore su un display Retina.
Un sito su cui stavo lavorando non aveva bisogno di un singolo aggiornamento del suo tema per apparire alla grande sul display Retina; la mancanza di immagini significava che non c'era nulla da aggiornare. Certo, non tutti i siti saranno totalmente sans le immagini, ma minimizzare il loro uso ridurrà lo sforzo richiesto per ottimizzare il Retina Display.
Generalmente, c'è un passo in questa tattica: minimizzare l'uso dell'immagine laddove non è realmente necessario.
Naturalmente, il sito Web di Apple è ottimizzato per apparire incredibilmente nitido e nitido sul display Retina. Nei giorni precedenti l'annuncio dell'iPad, Apple ha iniziato ad aggiornare il proprio sito Web per offrire immagini reattive; elementi che cambiano a seconda che tu stia navigando su un nuovo iPad o meno.
Il metodo di Apple è semplice in linea di principio. Il sito Web si carica normalmente, ma poi usa JavaScript per sostituire le immagini pertinenti se stai navigando su un nuovo iPad. Se visiti un nuovo iPad, otterrai le immagini ottimizzate, mentre qualsiasi altro browser visualizzerà le impostazioni predefinite.
Un esempio di questo è il testo dell'eroe di Apple sulla pagina del prodotto dell'iPad, usando il seguente codice nel file stesso.
Per ragioni di semplicità, non condividerò i loro script effettivi, ma essenzialmente verificherò prima se il browser si trova su un dispositivo con Retina Display, quindi controlla l'esistenza di un'immagine 2x (ci arriveremo in un minuto) e, se entrambe le condizioni precedenti sono vere, visualizza l'immagine 2x.
La convenzione del suffisso 2x indica la controparte "Retina" per il file image.png sarebbe image_2x.png. Questo proviene da iOS, che visualizza automaticamente un @ 2x immagine in un'app nativa quando esiste. Sfortunatamente, noi web designer non otteniamo il lusso della ricerca e della visualizzazione automatica, quindi dobbiamo elaborare metodi di emulazione che con i nostri script e le nostre query.
Questo però ha un prezzo. Usando questo metodo, l'utente finale carica tutti e due l'immagine non Retina e Retina, il che significa che la pagina finisce con una maggiore dimensione del file. Non solo, lo scripting di Apple significa che più richieste vengono inviate al e dal browser, con conseguente ulteriore tempo di caricamento della pagina. Naturalmente, se si continua a ridurre l'uso delle immagini, questo problema verrà ridotto.
Mentre Apple usa JavaScript, un metodo piuttosto efficace, c'è un'alternativa; utilizzando le query multimediali CSS per migliorare la condizione di stile con la densità di pixel del dispositivo.
Prima di entrare in questo, è importante notare che, in definitiva, il display dell'iPad è ancora 1024x768 px in "pixel CSS". Permetterò a Dave Hyatt di spiegare.
La maggior parte degli autori di siti Web ha tradizionalmente pensato a un pixel CSS come a un pixel di dispositivo. Tuttavia, quando entriamo in questo nuovo mondo ad alto DPI in cui l'intera UI può essere ingrandita, un pixel CSS può diventare più pixel sullo schermo. Ad esempio, se imposto un ingrandimento dello zoom di 2x, allora 1 pixel CSS verrebbe effettivamente rappresentato da un quadrato 2 × 2 di pixel del dispositivo.
Pertanto, il metodo che stiamo utilizzando non sarà indirizzato all'iPad in base alla sua risoluzione perché semplicemente non funzionerebbe. A tutti gli effetti, la risoluzione dell'iPad è ancora di 1024x768 px secondo il browser, e il targeting di questa risoluzione riguarderebbe anche tutte le precedenti generazioni di iPad. Allo stesso modo, il targeting della nuova risoluzione di 2048x1536 pixel con le query multimediali non avrebbe alcun effetto sul nuovo iPad.
Invece, possiamo scegliere come target usando il min-device-pixel-ratio query. Quella query indica al browser di caricare uno stile specifico basato sul rapporto tra i pixel del dispositivo e i "pixel CSS" di cui sopra. Nel case per iPad dotato di display Retina, questo è due (1024: 2048 e 768: 1536 semplificato fino a 1: 2).
Pertanto, possiamo caricare un foglio di stile "retina" in base al rapporto pixel del dispositivo.
Ovviamente, utilizziamo il prefisso WebKit poiché il browser dell'iPad è Safari, un browser WebKit, ma anche perché la query multimediale sembra essere disponibile solo tramite WebKit per ora. Dal momento che gli stili si sovrappongono (come dice il nome "CSS"), semplicemente ordinando correttamente il tag sopra, le regole in quel foglio di stile sovrascriveranno quelle per i dispositivi normali specificate in precedenza.
Se non vuoi mettere tutto in un foglio di stile separato, puoi utilizzare le query multimediali in linea per specificare porzioni del tuo foglio di stile solo per i dispositivi dotati di Retina Display, in questo modo:
Accentsconagua
@media (-webkit-min-device-pixel-ratio: 2) #element background-image ('image-2x.png'); Nota: Mentre usare lo schema di denominazione "2x" è un modo utile di organizzare le immagini, non sentitevi obbligati a farlo. Puoi dare un nome alle tue immagini come preferisci e, a differenza delle app native, non è necessario che siano neanche lontanamente simili.
Ovviamente, l'utilizzo di questa query multimediale non è in alcun modo specifico per l'iPad. Infatti, la stessa logica verrà attivata durante l'esplorazione del tuo sito su qualsiasi dispositivo con densità di pixel simile che utilizzi lo stesso rapporto tra pixel CSS e dispositivo, incluso l'iPhone 4 e l'iPhone 4S. Se vuoi scegliere come target solo l'iPad, puoi semplicemente combinare la query rapporto pixel con una larghezza, per specificare solo i dispositivi dotati di Retina Display della risoluzione dei rapporti dell'iPad.
Non è un caso che il tuo sito abbia un bell'aspetto senza ottimizzare, ma ha un aspetto migliore con. Devi solo visitare un sito ricco di immagini, ma non ottimizzato, per capire quanto terribili immagini non Retina si presentino sul nuovo iPad. E, in ultima analisi, è necessario assistere effettivamente ai risultati. Se non hai accesso a un nuovo iPad, ti consiglio vivamente di fare un viaggio in un Apple Store per dare un'occhiata.
Mentre Apple ha venduto milioni di unità, nel grande schema dei browser, è ancora una piccola preoccupazione. Tuttavia, con potenziale Retina Display equipaggiato MacBook all'orizzonte già da quest'estate, mettere in campo ora potrebbe davvero ripagare in seguito.
