facomunica-graphic-web-designer



Home

graphic design
web design
about

blog

contacts
quote

Immagini in scala su mobile e piccoli schermi

Giu 22, 2018Graphic Design

Il problema: Immagini grandi su schermi piccoli

 

Le tue immagini sono senza dubbio un elemento importante del tuo sito web. Attirano l’attenzione, ispirano inviti all’azione e aiutano a raccontare la tua storia o a vendere i tuoi prodotti. Quindi, naturalmente, vorrai che abbiano il maggior impatto possibile su tutti i dispositivi. Ma prima ancora di iniziare a selezionare le “immagini dell’eroe” che utilizzerai nel tuo sito, è fondamentale capire come il contenuto, le dimensioni e il layout delle tue immagini possono essere modificati quando il tuo web design viene ridimensionato a una dimensione dello schermo più piccola.

Una delle domande più comuni che riceviamo dai clienti durante i nostri progetti di creazione di siti Web riguarda il motivo e il modo in cui le loro immagini appaiono in modo diverso su schermi più piccoli.

Per ottenere l’effetto completo delle tue immagini di grandi dimensioni devi visualizzare l’immagine su uno schermo più largo di 800 pixel, il che significa che probabilmente selezionerai le immagini chiave del tuo sito Web con il design del desktop in prima linea nella tua mente.

Tuttavia, c’è un motivo per cui le agenzie stanno lavorando sempre più a un protocollo “mobile first” quando si tratta di web design ed è che le immagini di grandi dimensioni non si traducono sempre bene su schermi più piccoli. Il ridimensionamento di immagini di grandi dimensioni può causare ritagli inappropriati e può anche significare che alcune immagini perdono il loro significato del tutto insieme.

 

Cosa succede esattamente alle tue immagini?

A seconda del contenuto dell’immagine, possono accadere diverse cose quando le immagini vengono ridimensionate, il che fa sì che l’immagine abbia un impatto completamente diverso da quello previsto.

Esempio 1: ridimensionamento senza ritaglio
È logico che un grande banner orizzontale in stile orizzontale sul desktop non appaia allo stesso modo su uno schermo mobile verticale in stile verticale. La stessa immagine rimpicciolita per adattarsi a un piccolo schermo potrebbe essere ancora visibile, ma è probabile che si perda molta nitidezza e molto probabilmente perderà l’impatto visivo desiderato.

Ridimensionamento Immagine Senza Ritaglio

Esempio 2: ridimensionamento con ritaglio
L’immagine viene ritagliata per adattarsi allo schermo più piccolo, ma così facendo una parte dell’immagine viene persa e l’immagine non ha più alcun contesto in relazione al resto del contenuto della pagina.

Ridimensionamento Immagine Con Ritaglio

Esempio 3: leggibilità del testo
Il testo è spesso sovrapposto o incorporato in “immagini eroi” su un sito web. Ciò può causare diversi problemi quando visualizzi queste immagini su un piccolo schermo. Quando il testo è incorporato, si ridurrà insieme al resto dell’immagine e potrebbe diventare illeggibile.
Se il testo è stato sovrapposto, le dimensioni e il colore del testo utilizzato possono rendere il testo difficile da leggere e l’immagine difficile da vedere, poiché il testo viene regolato per adattarsi allo schermo.

 

Quali sono le soluzioni?

1. Rimuovere l’immagine
In alcuni casi, potresti dover accettare che un’immagine che funziona su un grande schermo, semplicemente non si tradurrà bene su tutte le dimensioni dello schermo nel modo desiderato. In questo caso potresti decidere di scambiare un’immagine diversa o, a seconda dello scopo dell’immagine, potresti decidere di rimuoverla tutta insieme,
In ogni caso, è buona norma non sovraccaricare il tuo sito di immagini, poiché le immagini possono occupare una quantità così grande di spazio sui dispositivi mobili. Le immagini dovrebbero essere limitate solo a quelle che aggiungono valore reale per evitare uno scorrimento eccessivo e creare un’esperienza utente ottimale.

Prendi in considerazione la rimozione dell’immagine se:

  • La chiarezza è scarsa a una dimensione più piccola
  • Il significato dell’immagine viene perso quando viene ritagliata
  • Risulta in una quantità non necessaria di scorrimento
  • Non aggiunge valore intrinseco o contesto ai contenuti della tua pagina

2. Ridimensiona l’immagine
Potrebbe essere necessario ritagliare le tue immagini di grandi dimensioni in un modo particolare per adattarsi a uno schermo più piccolo e ciò potrebbe richiedere un po’ di sperimentazione per trovare la migliore combinazione di ridimensionamento e ritaglio al fine di creare l’immagine più adatta allo spazio disponibile sullo schermo . È importante essere consapevoli che durante questo processo sarà necessario un compromesso su alcuni aspetti, al fine di creare l’immagine più ottimale possibile.

3. Modifica o sposta il testo
Il ritaglio delle immagini, il ridimensionamento e il rimescolamento del testo vanno tutti insieme per creare un design che funzioni su schermi più piccoli. È quasi certo che dovrai apportare alcune modifiche al testo associato alle tue immagini. Ad esempio, il testo può essere visualizzato in un’area secondaria dell’immagine su uno schermo di grandi dimensioni, ma potrebbe essere necessario ritagliare quest’area su schermi di dimensioni inferiori. Pertanto, il testo dovrà spostarsi in una posizione diversa o potrebbe essere necessario modificarlo per adattarlo.

 

Per concludere…

In poche parole, ci saranno sempre alcuni ritagli, ridimensionamenti e modifiche necessari per le tue immagini e il testo che li accompagna, e in alcune aree potrebbe essere necessario un compromesso per creare un’esperienza utente positiva per schermi più piccoli.
Quando esamini le tue immagini, poniti questa domanda chiave: la tua immagine aggiunge valore al tuo sito ed è significativa per gli utenti. In caso contrario, rimuovere l’immagine, in caso affermativo, modificare con attenzione l’immagine in modo da consentirle di mantenere significato e valore e essere consapevoli del fatto che sarà probabilmente necessario un compromesso.

post recenti
5 Caratteristiche Di Un Sito Web Efficace

5 Caratteristiche di un sito web efficace

Un sito web efficace dovrebbe essere intuitivo e coinvolgente, pertinente e facile da usare. I progetti di sito Web FAComunica, hanno l'esperienza, la conoscenza e l'estro creativo per garantire il tuo sito Web efficace che non sia semplicemente...