I siti web responsabili sono fondamentali per la tua attività. Essere reattivi offre un modo semplice per mantenere la coerenza con il tuo marchio e sito web su tutti i principali dispositivi. E devi assicurarsi di scegliere banner per siti web sensibili. Hai mai provato a caricare un sito web con il tuo telefono solo per trovare un pasticcio sconnesso sullo schermo? Questo è ciò che accade se un sito non è responsabile - o mobile amichevole.

Le immagini sono uno degli aspetti più frustranti dei siti web reattivi, in particolare immagini banner / full width. Queste sono le cose che più probabilmente si rompono. O non visualizzare correttamente sullo schermo. Perché questo accade? Per capire questo, spiegheremo cosa significa per il tuo sito web essere sensibile. (Per ulteriori informazioni, vedere: Questo è ciò che sembra un sito di grande consulente. )

La chiave per essere responsabili

Siti web sensibili riducono orizzontalmente le dimensioni del tuo sito web. Ciò significa che quando il sito cambia orizzontalmente, tutto sul tuo sito web viene riposizionato. Questo è ciò che viene chiamato layout fluido. Poiché i siti web sensibili riducono e modificano i layout a seconda del tuo dispositivo, può essere difficile vedere tutti i dettagli di un'immagine del sito web se la pagina non risponde. Le bandiere sono particolarmente dure, dal momento che sono molto grandi e quasi sempre piene di dettagli.

Di seguito ho fornito alcune best practice per te quando scegli le bandiere per immagini reattive con i siti web di consulenti.

Come scegliere banner per siti web responsabili

Assicurarsi che la dimensione della foto non sia troppo piccola. Raccomandiamo che le immagini banner per siti web sensibili siano almeno 2000px per 600px per la migliore immagine di qualità. Qualsiasi cosa inferiore a questa dimensione (per la larghezza o l'altezza) provocherà un'immagine sfocata. Maggiore è l'immagine, più spazio dobbiamo giocare e tagliare la parte destra del tuo banner.

Provare a scattare immagini senza fuoco. La scelta delle immagini banner che non hanno un focus principale, ad esempio un paesaggio, è una delle immagini migliori da avere sul banner dei tuoi siti web. Non importa il dispositivo, lo spettatore sarà in grado di distinguere i dettagli dell'immagine. Poiché non esiste alcuna messa a fuoco, possiamo mettere l'immagine senza preoccuparsi di come il sito verrà ridimensionato sui dispositivi. Ecco alcuni esempi:

Come si può vedere, l'immagine si restringe orizzontalmente, ma dal momento che il paesaggio è così grande, i clienti possono ancora vedere ciò che è lo sfondo.

Scelta di un'immagine con messa a fuoco. Diciamo che vorresti una foto di una persona o di un oggetto sul tuo sito web come un fuoco. Quando si utilizzano foto con una messa a fuoco, è molto importante mantenere l'obiettivo principale al centro dell'immagine. Dal momento che le immagini banner rispondenti sembrano ridursi orizzontalmente, perdiamo gran parte dei lati (spazio bianco) delle immagini. (Per la lettura relativa, vedere: Questa cosa può rovinare il sito web della tua società di consulenza. )

Negli esempi, è possibile vedere la roccia e l'individuo sono al centro dell'immagine. Ciò consente un'immagine pulita e ridimensionata.

Soprattutto, prova le tue immagini. Il modo migliore per testare le tue immagini è provarlo sul tuo sito web. Testare le immagini vi aiuterà anche a capire che tipo di foto fanno e non funzionano. Puoi provarti da soli o lavorare con il nostro team di supporto impressionante. (Per la lettura correlata, vedere: Come il contenuto del tuo sito può attrarre i clienti. )

-Questo articolo è stato scritto da Shaheen Mahani e prima apparso su siti di consulenza.