Retina Display Resolution Design: Suggerimenti e trucchi per UI Designer

Vandelay Design può ricevere un compenso da aziende, prodotti e servizi coperti sul nostro sito. Per maggiori dettagli, si prega di fare riferimento alla nostra pagina di divulgazione.

Con l’avvento degli smartphone hi-res e dell’iMac retina sta diventando evidente che web & i progettisti mobili devono considerare i display retina nel loro processo di progettazione. Altri dispositivi stanno arrivando dallo scaffale con una risoluzione del display retina che raggruppa più pixel nello stesso spazio fisico dello schermo.

Ciò significa che il contenuto apparirà più nitido se progettato correttamente. Quindi, come dovrebbe un designer dell’interfaccia utente lavorare per gestire gli schermi retina? Quale tecnologia attuale è disponibile e qual è il modo migliore per gestire la più grande base di utenti?

Mi piacerebbe coprire i metodi più affidabili per la gestione di schermi retina/hi-DPI e la creazione di interfacce che funzionano. Se si segue con questa guida sarete sicuri di andare via con consigli applicabili e soluzioni pratiche per l’enigma display retina.

13" e 15 " Macbook Risoluzioni

Gestione dei dispositivi Retina

Il primo passo è controllare le schermate basate su risoluzioni hi-DPI. Ora che alcuni dispositivi hanno dimensioni @3x ti consigliamo di controllare una serie di risoluzioni dello schermo prima di visualizzare le immagini. Puoi sempre essere al sicuro con le immagini @3x, ma sono anche molto più grandi e richiedono più larghezza di banda per il download.

Questo controllo può essere fatto con srcset ma ci sono molti metodi diversi che usano anche JavaScript. Dai un’occhiata a questo tutorial per maggiori informazioni.

Un bel trucco per le icone retina-ready è quello di utilizzare un iconfont gratuito invece di immagini bitmap. Font Awesome è una scelta molto popolare che è completamente gratuito, open source, e fornisce una libreria di icone tra cui scegliere.

carattere impressionante icone homepage

Un’altra scelta è usare immagini SVG invece di bitmap. Questi SVG sono vettori completamente scalabili che hanno lentamente acquisito il supporto completo del browser.

caniuse controllo svg

L’unica difficoltà è progettare SVG da zero e imparare a esportarli correttamente, il che può essere più complicato del semplice utilizzo di PNG o JPEG. Inoltre SVG non è utile per immagini dettagliate come fotografie poiché è davvero un tipo di file vettoriale.

Ma gli SVG hanno più spazio per l’animazione personalizzata che visualizza nitide a tutte le risoluzioni.

L’obiettivo è decidere i tipi di file e i controlli del browser caso per caso. Alcune immagini sono migliori come JPG e alcuni siti web sono migliori con i controlli retina CSS vs JS. Personalmente preferisco i CSS, ma consiglio di provare entrambi per vedere cosa preferisci.

Immagini di sfondo CSS

Il modo più semplice per gestire sfondi personalizzati è con le immagini di sfondo retina utilizzando la proprietà dimensione sfondo.

Questo è spesso il modo più rapido per controllare le immagini retina perché possono funzionare su tutti i dispositivi, anche i dispositivi non retina. Non fa male avere un’immagine eccessivamente ottimizzata in CSS se non ti dispiace i tempi di caricamento estesi.

Il metodo alternativo sarebbe quello di caricare diversi file CSS basati su controlli JavaScript o controlli del server backend.

Ma forse il modo migliore per gestire i CSS è con una query multimediale CSS retina. Queste query controllano la densità dei pixel e caricano immagini di sfondo diverse per quei dispositivi(regolando anche la dimensione dello sfondo).

CSS è generalmente il modo più semplice per gestire le immagini, ma non può essere utilizzato per le immagini in-post. Questi sono molto più complicati e dovrebbero essere caricati alla massima risoluzione possibile o aggiornati con JavaScript.

Se non sei interessato ai tempi di caricamento, vai con la risoluzione più grande per tutte le tue immagini. In caso contrario, ti consigliamo di caricare manualmente le immagini @2x e @3x con una libreria JavaScript gratuita come Retina.js.

Controlli JavaScript

Se si desidera il massimo controllo sul contenuto della risoluzione retina, è necessario JavaScript. La maggior parte dei visitatori esegue il codice JS ed è il modo più semplice per rilevare le risoluzioni con i metodi JavaScript incorporati.

Troverai molti tutorial gratuiti per rilevare i display retina JavaScript, ma questa è solo metà della battaglia. Una volta che si conosce la risoluzione dello schermo è quindi necessario aggiornare le immagini di conseguenza.

Consiglio di utilizzare una soluzione pre-costruita per risparmiare tempo e mal di testa durante il processo.

Gli sviluppatori non vogliono mai reinventare la ruota. Quindi se qualcun altro ha già risolto questo problema perché dovresti preoccuparti di partire da zero?

L’unico motivo per lanciare la tua soluzione è se hai bisogno di funzionalità personalizzate. In tal caso controlla i link qui sotto per vedere come è possibile implementare un controllo retina JS personalizzato.

Altrimenti continua a scorrere e prendi una delle librerie JS gratuite che ho elencato nella prossima sezione.

  • 5 Modi per supportare display Retina ad alta densità
  • Immagini retina 2x facili con jQuery
  • Servire la grafica Retina al tuo sito Web

Strumenti Retina Open Source

Ci sono decine di strumenti retina personalizzati per rilevare e gestire le immagini retina. Questi non sono sempre i più facili da implementare, ma possono rendere il pubblico molto più felice nel lungo periodo.

Quindi, quale si dovrebbe scegliere per iniziare? Non c’è davvero una risposta sbagliata.

Mi piacerebbe fornire alcuni degli strumenti più popolari e darvi la possibilità di scegliere ciò che funziona meglio per il tuo sito.

Retina.js

retinajs open source javascript

La Retina.js library è una base di codice JavaScript open source gratuita che rileva automaticamente risoluzioni retina e dimensioni dello schermo. Lo script controlla anche se esiste un’immagine ad alta risoluzione esistente seguendo le linee guida di progettazione di Apple, e in tal caso passerà a visualizzare la versione ad alta risoluzione.

Le convenzioni di denominazione seguono un suffisso di @2x prima del tipo di file. Quindi se hai my_image.jpg si vorrà anche avere [email protected] nella stessa cartella.

Questo è uno degli script più semplici perché è davvero solo plug and play. Ma richiede anche una certa conoscenza del contenuto retina per farlo funzionare perfettamente. Se hai appena iniziato, questo è davvero un ottimo script e non puoi sbagliare con la funzionalità predefinita.

jQuery Retina

home page-Comune di Roma

Un’altra opzione è jQuery Retina alimentato dalla libreria jQuery. Funziona in modo leggermente diverso perché funziona su attributi di dati HTML5.

È sufficiente passare un valore URL immagine all’attributo data-retina in ogni tag immagine che richiede un’alternativa immagine retina. Richiede una codifica più difficile, ma è anche il più facile da ripristinare con opzioni personalizzate. La pagina GitHub ha maggiori informazioni con i passaggi di base per l’installazione.

WP Retina 2x

home page-Comune di Roma

Se sei un utente di WordPress, WP Retina 2x potrebbe essere un’ottima alternativa all’aggiunta di un plugin JS da GitHub. Il plugin WP Retina funziona direttamente con WordPress per verificare la presenza di immagini retina dimensioni e li sostituisce automaticamente.

È un’altra soluzione plug-and-play in cui è sufficiente attivare il plugin e lasciarlo funzionare. Super facile da usare e sicuramente una soluzione pulita per gli utenti WP non tecnici.

Denso.js

estensione densejs jquery

Quello che mi piace di più del Denso.libreria js è il supporto per vari rapporti dispositivo. Non tutti i display retina sono semplicemente 2 volte la dimensione. Altri rapporti possono includere 1,5 x o 3x.

Questo plugin rileva automaticamente quale densità dello schermo viene utilizzato e regola le immagini di conseguenza. Ci sono molte opzioni, quindi la personalizzazione non è un problema. Controlla GitHub per iniziare e i documenti online per ulteriori informazioni.

Se siete alla ricerca di più risorse retina display vi consiglio anche questi plugin.

  • CSS Media Query per iPad & iPhone
  • Immagini adattive in HTML
  • Swipebox jQuery Lightbox
  • Grails Retina Images Plugin
  • La scelta di una soluzione di immagine reattiva

Speriamo che questo materiale offre più di abbastanza per aiutarti a gestire immagini e media sui display retina. Dal momento che i CSS si auto-scalano per tutte le risoluzioni, non è necessario preoccuparsi di cose come margini o larghezze di pagina.

Ma i supporti on-page come icone e foto dovranno essere progettati su misura per i dispositivi retina.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.