Di Tara Hornor
Mar 21, 2014
All’interno del mondo meravigliosamente complesso che è il web design, i professionisti affrontano alcuni tecnicismi molto difficili, con la risoluzione dello schermo probabilmente una delle maggiori cause di mal di testa palpitante. A volte questo ingannevolmente piccolo problema può sembrare irrimediabilmente privo di soluzioni, dal momento che risoluzioni e dispositivi cambiano e migliorano costantemente., Tuttavia, ci sono alcune best practice che i web designer e gli sviluppatori possono seguire per progettare un sito web e uno sguardo approfondito alla risoluzione del dispositivo rivela quali sono.
Molti sbagliano il termine per riferirsi alle dimensioni effettive dello schermo. Tuttavia, come sanno i web designer esperti di tecnologia, la risoluzione dello schermo è il termine usato per il numero di pixel che uno schermo contiene orizzontalmente e verticalmente, come 1024 × 768, in cui il primo numero si riferisce ai pixel orizzontali e quest’ultimo si riferisce ai pixel verticali.
Credito fotografico: Design215.,com
La parte confusa arriva quando due delle stesse dimensioni dello schermo hanno risoluzioni dello schermo diverse. Ciò significa anche che diverse dimensioni dello schermo possono avere la stessa risoluzione. Ad esempio, uno schermo da 13 pollici può avere la stessa risoluzione 1280 × 800 di uno schermo da 17 pollici più grande.
Il modo in cui un sito web viene visualizzato su uno schermo sarà molto diverso a seconda delle diverse risoluzioni dello schermo. Ad esempio, due monitor desktop da 17 pollici possono avere risoluzioni diverse, con uno 1024 × 768 e l’altro 1280 × 800., La risoluzione più bassa (1024 × 768) visualizzerà gli elementi in una dimensione maggiore per mantenere il display il più nitido possibile, ma ciò significa anche che meno della pagina si adatta allo schermo. Il monitor ad alta risoluzione sarà in grado di visualizzare più della pagina del sito web, come l’intera piega più un po ‘ sotto, e gli elementi sulla pagina appariranno più piccoli ma più nitidi.
Nel suo consiglio sulle migliori pratiche per la risoluzione dei dispositivi nella progettazione, Jakob Neilson del Neilson Norman Group sottolinea che non si vuole mai progettare un sito web per una dimensione del monitor., Per uno, gli utenti con uber-schermi, come un 30 pollici, non possono mai massimizzare una finestra a causa del loro monitor anormalmente largo. Inoltre, le dimensioni dello schermo sono disponibili in troppe forme e dimensioni. È semplicemente molto più efficiente concentrarsi sulla risoluzione.
In passato, era molto più facile sapere per quale risoluzione progettare. Le alte risoluzioni erano molto costose, quindi la maggior parte degli utenti poteva permettersi solo una delle tre risoluzioni più economiche: 640 × 480, 800 × 600 o 1024 × 768, come menziona Andrew Keir.
Credito fotografico: jorge.,correa via Compfight cc
Tuttavia, oggi ci sono molti più schermi ad alta risoluzione disponibili a prezzi che la maggior parte dei consumatori può permettersi. E poi c’è l’ulteriore considerazione dei dispositivi mobili. Con gli utenti di tablet e smartphone in aumento esponenziale, i web designer non hanno altra scelta che considerare di nuovo queste risoluzioni dello schermo più piccole.
Per fortuna, ci sono alcune best practice per scegliere la giusta risoluzione per progettare un sito web., Ci sono anche alcune opzioni di soluzione per fare in modo che se qualcuno con una risoluzione dello schermo strano o vecchio stile fa visitare il tuo sito web, avranno ancora un’esperienza visiva positiva.
Risoluzioni comuni e la migliore dimensione per il Web Design.
La maggior parte dei web designer e sviluppatori concordano sul fatto che una delle migliori pratiche è quella di ottimizzare un progetto per la risoluzione più popolare con il pubblico. Questo può essere più difficile da definire oggi, però, con così tante risoluzioni diverse disponibili.,
All’inizio del 2012, la maggior parte degli utenti web aveva una risoluzione dello schermo di 1366 × 768, 1024 × 768 o 1280 × 800. Questo è cambiato un po ‘ oggi, tuttavia, e va a mostrare quanto velocemente le dimensioni di risoluzione ottimali cambieranno nel tempo per il web design.
Risoluzione minima dello schermo.
Ad esempio, W3Schools mostra a partire da gennaio 2014, “Il 99% dei tuoi visitatori ha una risoluzione di 1024 × 768 pixel o superiore.”Questo fornisce un argomento abbastanza forte per la ristorazione al minimo di 1024 × 768., Shaun Anderson rivela anche prove statistiche che la maggior parte dei visitatori del sito web ha una risoluzione di queste dimensioni o superiore.
Risoluzioni dello schermo superiore in tutto il mondo.
Ciò che è interessante delle statistiche che Anderson presenta, però, è che solo il 9% in tutto il mondo utilizza 1024 × 768 con il 30% che utilizza una risoluzione di 1366 × 768 e circa il 15% che utilizza una risoluzione del dispositivo designata come “altro”, che più che probabile è l’uso mobile.
Lo studio di Mobify ha analizzato l’attività 2012 di 200 milioni di acquirenti sulla rete Mobify Cloud (siti di e-commerce alimentati da Mobify)., Lo studio ha mostrato alcuni risultati interessanti:
1. il 19,5% dei visitatori ha utilizzato una risoluzione netbook di 1280 × 800.
2. 13,5% usato 1366 × 768.
3. 11.4% utilizzato la dimensione iPhone: 320 × 480.
4. il 7,8% ha usato 1024 × 768, portandolo al quarto posto.
5. 7.3% utilizzato 768 × 1024, comune di iPad e netbook orizzontali da 10 pollici.
6. il 7,3% ha utilizzato laptop più grandi di dimensioni 1440 × 900.
7. 6.5% usato 1280 × 1024, un monitor LCD desktop comune.
8. 6.1% usato 1080 p HD display (1920 × 1080).
9. il 5,1% ha utilizzato la risoluzione widescreen comune di 1680 × 1050.
10. 3.,8% utilizzato il HD + 1600 × 900 dimensioni dello schermo.
Clicca sull’immagine per vedere l’infografica completa di Mobify.
Qual è la dimensione migliore?
Come già accennato, molti sostengono che dovresti almeno ottimizzare i progetti di siti Web per 1024 × 768. Questo dovrebbe rendere un sito web abbastanza buono sulla maggior parte delle risoluzioni e dei dispositivi. Tuttavia, questo può ancora causare un bel paio di problemi, soprattutto con l’aumento dei dispositivi mobili per l’accesso a Internet. Questo è dove i web designer devono davvero conoscere il loro pubblico e, infine, progettare per questo pubblico.,
Cosa succede se non conosci il tuo pubblico e non vuoi limitare il tuo design a una risoluzione specifica? Diamo un’occhiata ad alcune altre best practice per dispositivi e web design.
Un’introduzione alla SVG (Scalable Vector Graphics).
Adam Fairhead presenta un’idea interessante nel suo articolo su WebDesignerDepot, giustamente intitolato “Stop chasing screen resolution”, e il suo punto è esattamente questo. Fairhead ritiene che i web designer non debbano più preoccuparsi delle risoluzioni dello schermo a causa di SVG o grafica vettoriale scalabile., SVG è una tecnologia HTML5 che consente di visualizzare immagini (vettoriali, per l’esattezza) utilizzando il codice, il che rende l’immagine chiara, indipendentemente dalla risoluzione dello schermo di un utente, che è davvero utile quando si crea un sito Web reattivo.
Grafica PPI e Retina.
Fermiamoci un attimo e discutiamo PPI (pixel per pollice), che si riferisce alla risoluzione delle immagini. PPI è influenzata dalla risoluzione dello schermo e la dimensione effettiva dello schermo come determinato dalla lunghezza diagonale in pollici, come dimostrato da questo strumento PPI da DPILove., Sapere quale PPI usare per i siti Web è stato facile in passato: i web designer sapevano che 72ppi avrebbe garantito che le immagini apparissero nitide all’interno di un sito Web ma comunque caricate a una velocità appropriata, semplicemente perché la maggior parte delle dimensioni del monitor erano correlate con le risoluzioni in quanto tali.
Il grosso problema nella risoluzione dello schermo da quando Apple è uscito con l’iPhone4 è con la grafica retina. I dispositivi grafici Retina sono quelli con una risoluzione molto al di sopra degli schermi tradizionali. Perché questo è un problema?, Perché le immagini ottimizzate a 72ppi ora appaiono sfocate su schermi più piccoli che visualizzano verso l’alto di 200ppi.
La grafica Retina dipende dalla risoluzione.
Sono emersi diversi metodi per convertire un sito Web in retina, come l’utilizzo di Sprite CSS o immagini Retina che sono a 2 volte la loro dimensione originale per mantenere l’immagine chiara indipendentemente dalla risoluzione. Fairhead sottolinea, tuttavia, che questi metodi ci rendono ancora dipendenti dalla risoluzione, poiché le risoluzioni continuano ad aumentare, così sarà la necessità di dimensioni dell’immagine.,
E questo ancora non risolve il problema dello zoom su una pagina web, ad esempio su un iPhone. Quando gli utenti tentano di visualizzare la pagina Web a una dimensione zoomabile, le immagini diventano nuovamente sfocate.
La soluzione SVG.
Poiché SVG utilizza la grafica vettoriale, saranno fantastici indipendentemente dalla risoluzione. Le immagini bitmap (immagini retina) sono basate su pixel, quindi poiché un’immagine bitmap è allungata oltre la sua risoluzione pixel ottimale, inizia ad apparire sfocata o “pixelata.”I vettori sono scalabili a qualsiasi dimensione poiché si basano su una formula matematica, piuttosto che su una certa quantità di pixel., Quindi, quando vengono ridimensionati, i vettori appaiono puliti a qualsiasi dimensione a causa delle regolazioni della formula, quindi il motivo per cui i progettisti li usano per creare un sito Web reattivo.
Immagine di credito: arrashthearcher.org
L’altro vantaggio dell’uso della grafica vettoriale piuttosto che delle bitmap è che il tempo di caricamento delle immagini vettoriali è lo stesso, indipendentemente dalle dimensioni. Un’immagine bitmap 2000px × 2000px richiede troppo tempo per essere caricata. Un’immagine vettoriale 2000px non richiede il caricamento di singoli pixel, quindi non importa se il vettore è piccolo come 20px o grande come 4000px.
Limitazioni di SVG.,
Quindi perché SVG non è pubblicizzato come una soluzione di risoluzione completa? Beh, non può contenere immagini bitmap a tutti, per uno. E non possono essere troppo complicati nel design, altrimenti influenzeranno il tempo di caricamento, anche come vettore.
L’ultima grande complicazione con SVG è che è un codice abbastanza difficile da imparare. Adam Fairhead lo spiega in questo modo:
Il codice SVG non è qualcosa che puoi “vedere nella tua mente” come quando leggi l’HTML. È una serie di istruzioni mappate rispettivamente l’una contro l’altra, elemento per elemento, strato per strato.,
Quindi, se un web designer non ha già alcuna conoscenza del codice, la progettazione per SVG potrebbe essere quasi impossibile.
Siti Web a schermo intero.
Altre best practice per la progettazione del dispositivo si riferiscono al tipo di progettazione di un sito web, ad esempio un sito Web a schermo intero, che è un design che riempie l’intera finestra del browser, indipendentemente dalla risoluzione dello schermo. Questo tipo di web design comporta l’utilizzo di un’immagine super grande, come 2560 × 1290, CSS e HTML in modo che il sito web abbia un bell’aspetto sia su risoluzioni di schermo grandi che piccole., Alcuni assolutamente bellissimo sito disegni sono emerse da questa pratica:
Visita il Made in Giorni sito web
Visita il Keecker sito web
Visita il Boschetto sito web
CSS Tutorial.
Usando i CSS, allungare lo sfondo alla larghezza del browser a schermo intero può essere abbastanza facile. Molti tutorial spiegano anche come posizionare l’HTML sulle immagini, ad esempio quando si visualizza l’intestazione e il menu di navigazione., I seguenti sono alcuni tuts eccellenti:
Costruire una straordinaria esperienza mobile a schermo intero – Paul Kinlan
CSS Sfondo a schermo intero (codice suggerimento rapido) – John Surdakowski
Creazione di uno sfondo a schermo intero per i siti Web – Viste Web Design
Layout a schermo intero con transizioni di pagina – Mary Lou
Limitazioni a schermo intero.
Uno dei principali fastidi con la progettazione per i browser piuttosto che la risoluzione è che devi testare la compatibilità cross-browser., E questo ci riporta a un problema molto familiare: come con resolution, devi conoscere il tuo pubblico e i loro browser più comuni. Come con la risoluzione dello schermo, si sta sempre andando a deludere una piccola parte dei visitatori del tuo sito web che utilizzano browser obsoleti.
Responsive Sito Web Design.
Una soluzione molto dibattuta è quella di creare un sito web responsive design. Alcuni credono che i siti Web reattivi siano il massimo in termini di best practice per la risoluzione, dal momento che possono rendere un sito Web bello e coerente su qualsiasi dispositivo.,
Un design reattivo è anche il layout preferito di Google per smartphone, abbastanza interessante.
La progettazione adattiva è un’opzione migliore?
Alcuni progettisti ritengono che un design adattivo sia migliore per la maggior parte dei siti Web a causa del controllo sugli elementi. Questa opzione utilizza un layout fisso che cambia in base al dispositivo utilizzato per accedere al sito web.,
Il vantaggio di un design adattivo, come spiega Ravi pratap in VentureBeat, è che il sito web può essere personalizzato più facilmente per un’esperienza “altamente differenziata che è costruita per l’intento specifico del tuo cliente mobile.”Ma ancora una volta, stiamo incontrando il problema della risoluzione del dispositivo con il design adattivo.
Pixel-Perfetto Responsive Web Design.,
Responsive website design risolve il problema del design adattivo in quanto è fluido, che funziona alla grande per molti siti web, specialmente quelli che vogliono fornire un’esperienza identica su tutti i dispositivi. Alcuni siti web trovano adattivi e reattivi troppo limitanti quando hanno bisogno di un’esperienza flessibile e personalizzata. I design responsive pixel-perfect colmano il divario tra la scelta di creare un sito Web responsive o un sito Web adattivo combinando gli aspetti migliori di entrambi i tipi di design.,
Dando un’occhiata al sito web ProStory su Screenfly mostra la flessibilità del design reattivo.
Come il design adattivo, il design reattivo pixel-perfect consente al sito web di adattarsi a determinate dimensioni. Offre ai progettisti un controllo preciso su ciascun pixel in modo che il sito funzioni esattamente come desiderato su dispositivi diversi. Come il design reattivo, il design pixel-perfect è flessibile e fluido e scala ogni parte del design – immagini, contenuti, ecc. – indipendentemente dalle dimensioni del dispositivo., I progettisti designano semplicemente i punti di interruzione per un sito Web accurato ai pixel, indipendentemente dalla vista. Un bonus? Rientra ancora nel design preferito di Google
Come la risoluzione dello schermo influisce sui designer professionisti.
La risoluzione dello schermo continuerà ad essere un fattore da tenere a mente per i web designer quando creano un sito Web man mano che vengono create risoluzioni più elevate e la tecnologia web si evolve. Questo è il motivo per cui è importante per i web designer conoscere alcune best practice e il pubblico dei loro clienti.,
Diversi clienti vogliono raggiungere il loro pubblico in modi unici e fornire esperienze su misura a seconda di dove il loro pubblico li incontra. Per molti clienti, questo può significare una combinazione di funzionalità, come un design del sito Web reattivo perfetto per pixel con immagini SVG.
Come web designer, è il tuo lavoro essere informato sul modo migliore per aiutare il tuo cliente a raggiungere questi obiettivi e la risoluzione del dispositivo è un pezzo molto importante del puzzle del web design.
