Quali sono le migliori pratiche che le persone seguono rispetto alle immagini su finestre più grandi?
Per quale dimensione del browser dovremmo progettare? Significa come gestiamo i monitor ad alta risoluzione e quale% di utenti ha schermi di grandi dimensioni?
Come possiamo gestire al meglio l'altezza delle immagini degli eroi, dato che dobbiamo davvero decidere con quale risoluzione dello schermo andare?
Ovviamente, tutto ciò è conforme alla filosofia della griglia a 12 colonne;)
Risposte:
Asprilla,
Mentre i commenti sopra menzionano ottimi punti tecnici, suggerisco di adattare il tuo lavoro a un particolare cliente, che inizia guardando il Google Analytics del loro sito attuale - Rapporti / Tecnologia / Browser e OS / Risoluzione dello schermo. In questo modo, trascorrerai saggiamente il tuo tempo e il budget del tuo cliente affrontando le esigenze specifiche del tuo cliente invece di implementare le linee guida generali. In realtà abbiamo dovuto avvisare i nostri clienti occasionalmente di non progettare in modo completamente reattivo semplicemente perché il loro traffico non desktop non avrebbe giustificato la spesa.
Ci sono molte cose da tenere a mente quando si offrono immagini agli spettatori.
- Mantieni le proporzioni dell'immagine uguali alle dimensioni originali
Facciamo questo per evitare che l'immagine venga distorta e per evitare che le immagini risultino sfocate. Possiamo mantenere lo stesso rapporto dimensionale o tagliare parti che non si adattano.
Quando si utilizza un <img>elemento o qualcosa di simile, questo è abbastanza semplice, richiede solo l'uso di un set widtho heightOR set max-widtho max-height.
Tuttavia, nel caso di un'immagine con larghezza di visualizzazione completa, questo è un po 'più complesso. Esistono diversi modi CSS per farlo , il migliore dei quali è background-size:covercome il primo esempio collegato nell'articolo e nella risposta di Talkingrock .
Inoltre, ora abbiamo la possibilità di utilizzare le funzionalità che si trovano nelle specifiche delle immagini reattive, incluso srcsete l' <picture>elemento, che sono abbastanza utili. Ne parlo più avanti in questa risposta.
- Dai agli spettatori solo le immagini di cui hanno bisogno
Per consentire un caricamento più rapido della pagina e impedire agli utenti di trasferire più dati, è di vitale importanza fornire all'utente finale solo l'immagine o le immagini di cui ha bisogno, quando ne ha bisogno. Ciò significa che serviamo loro un'immagine della stessa dimensione o solo leggermente più grande di quella che stanno usando il viewport e in attesa di caricare immagini che non verranno visualizzate immediatamente fino a dopo il caricamento iniziale della pagina.
Possiamo servire un'immagine di dimensioni più appropriate usando i CSS usando le @mediaquery quando utilizziamo le immagini di sfondo. Le immagini non nella query multimediale in uso non vengono caricate . Consiglierei di utilizzare almeno tre dimensioni di foto (il che significa almeno 3 query multimediali), ma avere un paio in più potrebbe essere saggio in termini di prestazioni. Di seguito è riportato un esempio, ma di solito dovrebbe coincidere con alcuni punti di interruzione generali per il layout del tuo sito.
@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
... background-image(imageURLforLargeScreens.png); ...
}
Ma ammettiamolo: non siamo bravi a scegliere i punti di interruzione né siamo perfetti nella scelta delle dimensioni dell'immagine data una certa dimensione dello schermo. Non sarebbe bello se potessimo lasciare che qualcosa facesse questo "magicamente" per noi?
La grande notizia è che ora possiamo !
Con la specifica delle immagini reattive, possiamo consentire al browser di decidere tutto questo per noi, a condizione che lo aiutiamo un po '. La srcsetproprietà sempre così utile può essere utilizzata con un <img>o un <picture>elemento. Per cambiare la risoluzione come stiamo facendo qui, dovremmo usare un <img>elemento.
Di seguito è riportato un esempio dell'HTML necessario per consentire srcsetdi svolgere il proprio lavoro. Per di più, puoi leggere l' ottimo articolo di Yoav Weiss sull'argomento. L'esempio è tratto da esso.
<img src="cat_500px.jpg"
srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
width="500" alt="lolcat">
Nota a margine: se devi servire la stessa immagine con dimensioni diverse a determinate dimensioni della finestra, puoi utilizzare l' sizesattributo.
Non sto dicendo che usare srcsetsia necessariamente meglio che usare un'immagine di sfondo CSS, non ho fatto abbastanza lavoro da solo per dirlo con certezza, ma è potenzialmente un modo migliore.
Inoltre, per aiutare con le prestazioni possiamo "caricare lentamente" le immagini che inizialmente non saranno visibili. Ciò significa che impediamo il loro caricamento iniziale ma iniziamo a caricarli non appena il caricamento della pagina iniziale è terminato. In questo modo possiamo far sì che lo spettatore veda la pagina il prima possibile e riempia alcuni dettagli in seguito. Ecco un modo per farlo, non entrerò nei dettagli in questo momento.
- Assicurati che sia mostrato il contenuto nell'immagine che vuoi mostrare
Se abbiamo le dimensioni corrette e le prestazioni eccezionali è fantastico, ma se lo spettatore non vede ciò che vogliamo che vedano, non ha senso. Se mostriamo l'immagine completamente tutto il tempo, questo non è un problema, ma se dobbiamo ritagliare l'immagine, questo può essere un problema.
Possiamo ritagliare background-imageusando CSS usando background-sizee background-position(e una specie di utilizzo clip, ma di solito è usato per forme più artistiche e complesse). I dettagli esatti varieranno da un'immagine all'altra a seconda di come viene implementata.
La seconda opzione è usare l' <picture>elemento. Lo usiamo quando vogliamo che solo una parte dell'immagine venga mostrata, come visto qui , ma ecco un semplice esempio in pratica (tratto dal fantastico articolo di Jason Grigsby su questo argomento).
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The president giving an award.">
</picture>
Voglio ribadire, se hai solo bisogno di fare il cambio di risoluzione non usare l' <picture>elemento , basta usare l' <img>elemento con srcset. L'unica volta in cui abbiamo bisogno <picture>dell'elemento è per questa direzione artistica, che significa ritaglio, ecc.
C'è anche la possibilità di fare un po 'di ritaglio sul lato server, usare una maschera SVG o fare qualcosa con Canvas, ma questo è un po' al di fuori dell'ambito di questa risposta.
I punti di interruzione specifici non sono così importanti. Come per tutto il design reattivo, è importante fare il meglio che possiamo per tutte le finestre, ma non ci sono query multimediali che saranno perfette per tutti i siti.
Il tempo di caricamento della pagina è molto importante e le immagini possono rallentare di molto il tempo di caricamento iniziale. Assicurati di caricare le immagini che verranno immediatamente visualizzate prima, quindi altre. Cerca di evitare che le immagini (come i JPEG) mostrino parte dell'immagine mentre carica il resto. Ottimizza anche tutte le tue immagini in modo che abbiano la dimensione del file più piccola possibile pur mantenendo la quantità di qualità richiesta.
È importante ricordare che le immagini, nella maggior parte dei casi, dovrebbero essere un accessorio, non una necessità. Consiglio di testare sempre l'aspetto di una pagina Web senza immagini per assicurarsi che sia utilizzabile.
Nota : possiamo usare un polyfill chiamato Picturefill per servire browser meno recenti che non supportano la specifica delle immagini reattive.
Ho imparato queste cose attraverso la ricerca durante l'ultimo anno e la sperimentazione negli ultimi giorni per questo caso d'uso specifico.
Scegli un'immagine con un singolo punto focale o nessun punto focale.
Il tuo file di immagine sorgente dovrà essere enorme (minimo 5000 x 5000) se vuoi servire molte immagini dipendenti dalla risoluzione.
Per la versione verticale, è necessario utilizzare un formato di 9w:16h.
Per la versione orizzontale, è necessario utilizzare un formato di 4w:3h.
All'interno di entrambe le immagini, esiste un'area sicura per i contenuti in cui è possibile garantire che una parte dell'immagine venga vista o sia above the fold come si dice in Klingon.
Le aree di sicurezza contenuti per entrambe le immagini, sulla base di questi cinque proporzioni: 3:2, 4:3, 5:3, 16:10e 16:9, è approssimativamente i primi tre quarti di entrambe le immagini.
srcsetè il Santo Graal per l'implementazione di immagini reattive. <picture>probabilmente sarà ancora meglio in futuro, ma srcsetper ora è il re. Controlla la risposta di Zach Saucier per maggiori informazioni al riguardo.
Queste immagini dovrebbero coprire quasi tutti gli schermi. Ridimensiona il pannello di anteprima per vedere le diverse immagini. Il fallback dovrebbe essere quello di una delle immagini di fascia media, ma ho collegato alla pagina in cui ho acquisito l'immagine invece come una sorta di attribuzione minore.
Ho cercato di mantenere breve questa risposta (riscritta 3 volte), anche se posso fornire le giustificazioni per le mie affermazioni, non l'ho fatto perché avrebbe gonfiato molto questa risposta. Spero che tu possa dedurre le giustificazioni dall'immagine sopra e vedere le prove del mio esempio jsFiddle.
Su uno 4:3schermo:
Su uno schermo molto ampio:
Su un cellulare verticale:
Ecco alcune informazioni aggiuntive che potresti trovare utili.
Statistiche sulle dimensioni dello schermo
Le dimensioni dello schermo popolari variano, quindi ecco alcuni siti statistici che elencano l'utilizzo delle dimensioni dello schermo in percentuale, le tendenze del browser, i sistemi operativi e altro ancora.
Eroe e immagini di grandi dimensioni
Esiste una soluzione CSS semplice e straordinaria per Hero e altre immagini di grandi dimensioni. Lo è background-size:cover. È utile perché copre l'intero div senza distorcere l'immagine con dimensioni dello schermo diverse o se il div genitore cambia forma (più / meno testo ...). Funziona ritagliando i bit dell'immagine per mantenere le giuste proporzioni, e puoi anche posizionare lo sfondo in modo che le parti importanti mostrino sempre (centro al centro, in basso a destra ...).
Un altro vantaggio è che visualizza l'immagine come sfondo, in modo che testo e altre informazioni possano essere facilmente aggiunti al div. Funziona anche come sfondo a grandezza naturale. Ecco un esempio di JSFiddle con cui giocare che utilizza la dimensione dello sfondo: copertina come sfondo a schermo intero e un altro che utilizza un div Hero . Ridimensiona la finestra JSFiddle e modifica il posizionamento CSS per vederlo funzionare.
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Il supporto del browser per dimensioni di sfondo (CanIUse.com) è molto buono, ed ecco una correzione per IE7 e IE8 .
Una soluzione popolare a tutte le diverse dimensioni di visualizzazione dei dispositivi (desktop / tablet / palmare) è quella di creare un sito Responsive che si riposiziona per adattarsi alle varie dimensioni dello schermo dalla TV a grande schermo, al palmare. Se sei interessato a questo, ecco un buon tutorial di livello intermedio: http://www.elated.com/articles/responsive-web-design-demystified/ .
I design reattivi funzionano con i layout di griglia e, se il sito è basato su pixel, esiste una formula che converte le dimensioni dei pixel in percentuale equivalente. Una rapida ricerca usando i termini "griglia reattiva a 12 colonne" e "calcolatore della griglia reattiva a colonne" ha rivelato molte risorse utili come wireframe reattivo a 12 colonne, calcolatrici e altro. Ecco un esempio: http://onepcssgrid.mattimling.com/
Prova a progettare per la compatibilità con la più piccola risoluzione del viewport:
Desktop: 800x600 / 1024x768 (in pixel)
telefoni cellulari più vecchi: 320x480 (in pixel)
tablet: 800x1280 (in pixel)
Scegliendo la risoluzione più bassa, ti assicuri che il design funzionerà per le persone con risoluzioni più piccole e risoluzioni più grandi.
Mi sembra che siate entrambi interessati alle finestre per dispositivi diversi piuttosto che alle dimensioni del browser.
Il browser è la finestra completa utilizzata per la navigazione web visiva. Questa area include input, schede e barre degli strumenti dell'URL di navigazione.
Il viewport è l'area del browser che mostra un sito Web renderizzato. Di solito è sotto le barre degli strumenti e l'URL. Questa è l'area alla quale i designer sono generalmente più interessati.
Per quanto riguarda la decisione sulla risoluzione dello schermo, devi prima chiederti: su cosa verrà visualizzato principalmente? Se è per uso interno in un'azienda, possiamo immaginare che molto probabilmente verrà utilizzato su un laptop o desktop. Se intendeva essere utilizzato in viaggio, possiamo immaginare che verrà utilizzato principalmente su dispositivi mobili.
La tendenza attuale per il web design è "Mobile First". È qui che un sito Web è progettato per dispositivi mobili prima di essere reso reattivo per altre piattaforme. Questo perché sempre più persone utilizzano dispositivi mobili per l'accesso a Internet anziché desktop o laptop.
Si possono trovare locali finestra Taglie molto utile per imparare a conoscere le dimensioni del riquadro di visualizzazione. Questo sito offre la vista per molti dispositivi mobili e alcuni desktop. Dovrebbe consentire di esplorare la varietà di dimensioni della finestra.