Trucchi per un design reattivo

by Elixir Consultant

• 0
• 3.1K
• Uncategorized

Trucchi per un design reattivo

Introduzione

Con i nuovi dispositivi come smartphone, iPad, tablet, che costituiscono i principali dispositivi chunk attualmente utilizzati dai consumatori, la spinta per un design reattivo sta diventando sempre più forte tra i proprietari di siti web di tutte le forme. Nel prossimo futuro il web design reattivo sarebbe il modo migliore per raggiungere i consumatori su qualsiasi tipo di dispositivo, con qualsiasi dimensione dello schermo.

Layout reattivo
La creazione di layout reattivi è un nuovo metodo per la progettazione di siti web. Ci sono alcuni utili trucchi CSS che possono essere utilizzati per creare e distribuire rapidamente un design reattivo che si regola automaticamente in base alle dimensioni dello schermo utilizzato per visualizzare il contenuto del sito.

Larghezza minima e massima altezza per le immagini
Una delle maggiori sfide che la maggior parte dei progettisti incontra durante la progettazione di un layout reattivo è che le immagini rappresentano un problema serio quando si ridimensionano i contenuti per soddisfare le esigenze di qualsiasi dimensione dello schermo. Questo perché le immagini sono spesso dimensionate in termini di pixel assoluti piuttosto che di valori relativi. La chiave per un design reattivo è, naturalmente, trasformare le definizioni assolute di larghezza e altezza in valori relativi che possono ospitare facilmente desktop, laptop, tablet e smartphone.

Fare questo con un’immagine è in realtà facile, ma la maggior parte degli sviluppatori semplicemente non sono a conoscenza della corretta costruzione dei CSS da utilizzare quando si definisce un’immagine in un foglio di stile. Invece di utilizzare un’altezza e una larghezza in pixel, è possibile utilizzare una “max-width” e una “max-height” per regolare più facilmente l’immagine in base alle dimensioni dello schermo utilizzato.

L’affermazione di cui sopra indica che la dimensione dell’immagine è controllata da un elemento chiamato “max-width. Come suggerisce il nome, questo impedisce all’immagine di diventare più grande di quanto richiesto dal disegno. L’obiettivo di max-width è quello di evitare che l’immagine superi la larghezza delle colonne del sito, costringendo gli utenti a scorrere in due direzioni diverse.

La larghezza minima, d’altra parte, assicura che il contenuto non diventi troppo piccolo per essere utile. I progettisti possono applicare “min-width” a cose come titoli, blocchi di contenuto o elementi della barra laterale, per evitare che si restringano un po’ troppo. Entrambi gli elementi possono essere usati insieme per controllare più facilmente l’esatta dimensione e il ridimensionamento di qualsiasi elemento della pagina.

Stile dei caratteri
I valori relativi formano il design. Questo ridimensionerà il carattere insieme alla dimensione dello schermo, rendendolo facilmente leggibile e naturale su un dispositivo di qualsiasi dimensione.

I design reattivi utilizzano una serie di colonne di larghezza relativa per ridimensionare il contenuto quando la dimensione dello schermo di un dispositivo supera uno o più “punti di rottura”. Questi valori relativi, tuttavia, possono funzionare solo quando sono accoppiati con i margini e l’imbottitura relativi. Invece di specificare il riempimento come 5 pixel, prova a specificare l’elemento come 1% della larghezza o altezza della pagina. È facile come cambiare il simbolo “px” in un simbolo di percentuale e aiuterà il sito ad aumentare o diminuire le dimensioni del sito in modo molto più efficace.

Gestione degli URL
Il problema di URL molto lunghi è che contengono un sacco di caratteri, senza spazi e la capacità di rovinare drammaticamente il fascino di un design reattivo su un dispositivo più piccolo. Questo problema è facile da eliminare creando una classe speciale che circonda lunghi URL quando appaiono all’interno del contenuto di un sito web. Utilizzando l’elemento “word-wrap”, i CSS possono effettivamente rompere l’URL in pezzi che si adattano all’interno della larghezza definita dell’area di contenuto.

La parola si romperà su una seconda riga, o su tutte le righe di cui ha bisogno, non appena raggiunge il bordo dell’area del contenuto. Lo scorrimento verticale sarà facilmente eliminato.

Conclusione
Con alcuni semplici trucchi CSS, è davvero abbastanza facile creare un sito web ridimensionato per soddisfare le esigenze di smartphone e tablet.

Se abbinato a un design reattivo basato su colonne, questi trucchi saranno l’ultimo pezzo del puzzle per determinati designer.