Il Blog di INSTANT WEBSITES

Tag: web design reattivo

Il tag picture

L’introduzione del web design reattivo tramite HTML5 e CSS3 ha introdotto la possibilità di ottenere il ridimensionamento automatico di un’immagine, fino ad occupare lo spazio orizzontale disponibile e mantenendone le proporzioni, tramite la regola:

img { max-width: 100%; height: auto; }

Fino a qui, niente di nuovo; d’altronde, quella sopra esposta è una regola che compare sistematicamente nel foglio di stile base di qualsiasi sito.

Ci sono però dei casi nei quali la semplice reattività di un’immagine non si traduce in un risultato apprezzabile dal punto di vista pratico.

Immaginiamo un’immagine di intestazione che, vista nella viewport di uno schermo ampio, occupa tutta la larghezza ed una certa altezza, ad es. 1920×850 pixel.
Nel momento in cui la viewport viene ridotta e l’immagine ridimensionata proporzionalmente, quest’ultima finirà con il risultare estremamente piccola e quindi inutile dal punto di vista del risultato. Eseguendo i classici “conticini” scolastici, si fa in fretta a capire: nella viewport di uno smartphone, 1920×850 diventa 480×213 pixel.

Per prevenire questo problema, una soluzione tradizionale consiste nel posizionare l’immagine non come elemento <img> bensì come sfondo del contenitore; man mano che la viewport viene ridotta, tale contenitore occupa sempre il 100% dello spazio disponibile ed una certa altezza minima mentre l’immagine di sfondo non si adatta, sicché ne verrà mostrata solo una parte.
Potete vedere un esempio di questa tecnica nella homepage del sito https://ottolina.com/ (grafica del sito by modus comunicazione visiva).

Si tratta di una tecnica funzionale ma con un possibile effetto sgradito: verrà mostrata solo una parte dell’immagine – tipicamente quella centrale – sicché si perderanno molti dettagli della stessa.
E’ indispensabile quindi scegliere un’immagine che mantenga un effetto accettabile anche in tale contesto.

Da menzionare, senza però raccomandarla, un’alternativa molto comoda ma, per così dire, estrema: rinunciare del tutto a mostrare l’immagine stessa quando la viewport scende al di sotto di una certa dimensione.

Esiste una terza possibilità che è finalizzata ad ottimizzare l’esperienza utente al prezzo di una preventiva preparazione di due o più immagini alternative: il tag picture di HTML5.

Continua a leggere

Introduzione al design reattivo – esempi di Media Query

Premessa

In un precedente articolo di questo blog (Introduzione al design reattivo – https://lnx.instantwebsites.it/iwblog/?p=1272) abbiamo introdotto alcuni principi di base del design “reattivo” o “adattivo“.

Per approfondire il discorso, vediamo ora alcuni esempi di Media Query che consentono di subordinare l’applicazione di determinate dichiarazioni (proprietà e relativi valori), all’interno del foglio di stile, alla ricorrenza di condizioni prefissate concernenti la risoluzione video del dispositivo su cui il sito viene visualizzato e/o l’orientamento dello schermo.

Rammentiamo innanzitutto che nella sezione head della pagina occorre inserire quanto segue:

<meta name=”viewport” content=”width=device-width” />

per fare sì che il riferimento sia la risoluzione “reale” del dispositivo (dimensione della viewport) prevenendo lo zoom automatico della pagina che quest’ultimo effettuerebbe per visualizzarla interamente.

E’ anche opportuno impedire che l’utente possa materialmente effettuare lo zoom stesso, completando quanto sopra nel modo seguente:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />

oppure, in modo equivalente:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” />

Rammentiamo inoltre che per impostare le media query ci sono due modi:

1) creare diversi fogli di stile ed eseguirli a seconda del dispositivo impostando le condizioni nella sezione head (Media Feature), come nell’esempio seguente:

<!– foglio di stile comune a tutti i supporti –>
<link href=”css/common.css” rel=”stylesheet” media=”screen” />

<!– media feature compatibili con tutti gli schermi –>
<link href=”css/smartphone.css” rel=”stylesheet” media=”only screen and (max-width: 480px)” />
<link href=”css/tablet.css” rel=”stylesheet” media=”only screen and (min-width: 481px) and (max-width: 767px)” />

2) utilizzare un singolo foglio di stile, inserire le regole comuni, poi quelle specifiche impiegando, appunto, le Media Query come negli esempi che seguono.

Continua a leggere

Categorie
Archivi