9 regole essenziali per le gallerie di immagini reattive
Il responsive design è una parte essenziale e necessaria dello sviluppo web. Uno dei maggiori problemi con il responsive web design è stato nelle ultime immagini. Molti dibattono il modo migliore per visualizzare le immagini su un sito reattivo. E poi, per quanto riguarda le gallerie di immagini?
Le gallerie di immagini presentano molta più complessità delle singole immagini; ci sono ancora più variabili e cose a cui pensare quando si implementano intere gallerie di immagini reattive sul tuo sito web. Diamo un'occhiata ad alcuni suggerimenti utili per implementare le gallerie di immagini reattive nel modo giusto.
1) Presentazioni: nascondi il navigatore quando possibile
Potresti non avere elementi di navigazione su un tablet o dispositivo mobile, ma su un desktop, è una buona idea nascondere questi elementi finché non sono necessari. Gli elementi come le frecce in avanti e indietro e i punti di navigazione dovrebbero essere impostati per essere visualizzati solo quando qualcuno si muove sopra la galleria di immagini scorrevoli. Questo evita distrazioni ed evita conflitti tra il contenuto e gli elementi di navigazione. L'intera esperienza sembra meno confusa.
2) Evitare troppe immagini di ritratto
Se stai implementando una galleria che è una griglia di immagini, ti consigliamo di scegliere le immagini che sono orientate al paesaggio o quadrate se possibile. Questo rende più facile visualizzarli su un piccolo schermo. Le immagini di ritratto andrebbero bene su uno smartphone in modalità verticale, ma l'ampia area di visualizzazione di un telefono con orientamento orizzontale rende difficile la visione di immagini di ritratti. Il panorama è il migliore, ma puoi accontentarti di un quadrato se il paesaggio non è un'opzione. Tutte le immagini possono essere impostate per adattarsi all'interno di un'area di visualizzazione, ma le immagini di ritratto su uno schermo orizzontale appariranno molto piccole. Le tue immagini non saranno visualizzate come immagini quadrate o orizzontali, che riempiranno più aree dello schermo e appariranno più grandi. Quando selezioni le immagini, assicurati di tenere a mente la persona che le osserva.
3) Usa i gesti su tablet e dispositivi mobili
Le persone amano usare i gesti sui loro schermi tattili. Si sentono più responsabilizzati quando si sente come se stessero facendo scorrere un'immagine, perché l'esperienza è più coinvolgente. Cercare di toccare piccole frecce o punti di navigazione su un dispositivo mobile è troppo noioso. È molto più naturale essere in grado di prendere il dito e scorrere l'immagine su, giù, sinistra o destra.
4) Evita i lightbox: disabilitalo sui dispositivi mobili
Se si dispone di immagini di prodotti, come macchinari o articoli che dovrebbero essere visualizzati più dettagliatamente (tessuto, gioielli, ecc.), Allora ha senso un lightbox con immagini più grandi. Anche allora, dovrebbero essere usati solo sul desktop. Quando si analizzano le dimensioni dello schermo del tablet e dello smartphone, i lightbox devono essere disabilitati. Possono causare un numero di problemi con l'esperienza dell'utente. Se succede qualcosa e la lightbox non ha le dimensioni corrette, potrebbe non essere possibile accedere al pulsante di uscita, o le immagini potrebbero non essere visualizzate correttamente.
5) Quando usi gli elementi di navigazione, rendili discreti
Se hai una galleria di immagini scorrevoli con un numero significativo di diapositive, la navigazione ha senso. Non vuoi far aspettare gli utenti per scorrere tutto. Possono facilmente fare clic alla loro stessa velocità, entrare, ottenere ciò di cui hanno bisogno ed uscire. Quando usi questi elementi, assicurati di inserirli in luoghi che sono fuori mano. Non avere punti di navigazione che vanno sopra il testo o altri collegamenti. Inoltre, evitare controlli eccessivamente complessi. Questi occupano molto spazio, distolgono gli utenti dal contenuto e creano un aspetto disordinato. Avere punti che gli utenti possono cliccare per scorrere o saltare a determinate immagini, e avere frecce in avanti e indietro è sufficiente. Non esagerare!
6) Non mescolare immagini e video
Mescolare media diversi di solito va bene, ma mescolare i video dove non sono previsti può causare problemi. Non si desidera che un utente avvii accidentalmente un video, che riproduce suoni che tutti possono sentire. Separa video e immagini, in modo che sappiano cosa aspettarsi. A nessuno piacciono quei tipi di sorprese.
7) Assicurati che le immagini non scendano oltre la loro larghezza massima
Questo è importante, perché è possibile evitare il ridimensionamento in pixel delle immagini che sono troppo piccole per uno spazio. Le immagini dovrebbero essere abbastanza grandi da riempire il 100% di un dispositivo mobile (per la maggior parte dei casi), ma i siti di dimensioni desktop dovrebbero impostare solo la larghezza massima al 100%. Ho visto alcuni casi in cui qualcuno ha uno di quei grandi display da 27 ", e quando trascinano la larghezza del browser, l'immagine si adegua ad essa, oltre la dimensione desiderata.
8) Ridimensionamento dell'immagine
Se hai una scala di immagini, assicurati che riduca in scala, non in alto. È meglio impostare dimensioni esatte per le tue immagini. Molte volte, una percentuale viene utilizzata per una dimensione, mentre l'altra dimensione è impostata su Auto. Ad esempio, se vuoi che un'immagine si estenda per il 50% della larghezza del browser, devi impostare la larghezza dell'immagine su 50% e l'altezza su automatico .
9) Evitare l'uso di didascalie delle immagini
Le didascalie delle immagini o qualsiasi altro testo di accompagnamento possono causare tutti i tipi di problemi per te e i tuoi utenti. Il primo problema è che è difficile adattarsi al testo su un dispositivo mobile. Con gli smartphone, hai uno spazio limitato così com'è, ma provare ad aggiungere del testo può far sentire l'intera esperienza confusa e ammassata insieme. Un altro problema è che la quantità di testo che è possibile utilizzare è limitata. Aggiungendo una didascalia, o qualsiasi testo aggiuntivo, si aggiunge la variabile del testo reattivo nel mix. Devi considerare le interruzioni di parole e in che modo più righe di testo finiranno per guardare insieme alla tua immagine. Se il testo è usato come una sovrapposizione, devi anche preoccuparti di dove cade sopra l'immagine. Il testo chiaro su un'area chiara dell'immagine renderà il testo illeggibile. Il contrasto è fondamentale e ogni immagine è diversa.
Conclusione
La linea di fondo quando si parla di qualsiasi aspetto del web design è che deve funzionare bene e avere in mente l'utente. Se nessuno può usare il tuo sito web, non torneranno. Seguendo questi semplici dos e non fare di gallerie di immagini reattive farai in modo che gli utenti non si imbattano in problemi comuni durante la visualizzazione delle immagini.