fbpx

Come creare testo, immagini e form responsive

Il responsive web design è ormai considerata un ’arte vera e propria che richiede molta lettura, pratica ed esercizio per poter essere compresa e poi implementata. Per raggiungere questo obiettivo è importante tener conto di alcune regole e concetti che ti permetteranno di realizzare un sito web correttamente visualizzabile su su qualsiasi risoluzione e quindi dispositivo. In primo luogo non si può prescindere da un approccio fluido di progettazione e sviluppo.

In questo video-tutorial ti spiego come sviluppare alcuni elementi di una pagina web (per esempio un sito ad una pagina ). Lasciamo da parte il menù di navigazione che ho già affrontato in molti videotutorial e concentriamoci su HEADER, testo, griglia immagini e modulo contatti.

Dall’esempio che ho realizzato puoi notare come restringendo il browser il sito web si adatta e risponde a qualsiasi dimensione del browser e non risulta quindi compromesso. Per esempio la griglia immagine ad una certa dimensione è composta da 5 foto mentre a dimensioni più piccole da 4 foto e così via.
La stessa cosa succede per il menù di navigazione che a dimensioni grandi è ben visibile orizzontalmente, mentre a dimensioni più piccole si trasforma in un semplice menù a tendina.
Infine il form che è diviso in più colonne a dimensioni più grandi e diventa ad una sola colonna a dimensioni più piccole.
L’obiettivo di è un web designer è di far si che il sito web sia adatto alla dimensione dello schermo che gli utenti stanno utilizzando per visualizzarlo nella maniera corretta ma anche per avere la migliore esperienza visiva

MEDIA QUERY e VIEWPORT

Ma cosa sono queste media query? non sono altro che una ridefinizione dello stile generale. Ad una determinata dimensione ( desktop ) utilizzo uno stile generale ma se la dimensione diminuisce devo usare uno stile che ignora il precedente e lo sostituisce. (override).
Il metodo più corretto è quello di cominciare con la dimensione più piccola (mobile first) e aggiungere uno stile differente man mano che la dimensione diventa più grande. Io preferisco il metodo che comincia dal desktop per arrivare agli schermi più piccoli ed è più semplice soprattutto all’inizio quando si impara la tecnica del responsive web design.

Il metaviewport ci permette di visualizzare i siti web alla corretta larghezza di pixel su dispositivi che non hanno necessariamente quel numero di pixel, come gli iphone che hanno retina display che hanno più pixel rispetto a quelli che stanno mostrando.

 

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “TESTO, IMMAGINI E FORM RESPONSIVE”—

Per piacere seguici e metti mi piace:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento