header blog
logot

BLOG

09/10/2013, 12:03





 Il primo accorgimento prevede l’utilizzo delle griglie.  Le griglie sono già attive alla creazione del sito (qualora non lo fossero, è possibile selezionarle dal menù in alto a destra con l’icona grig



Oggi vi spieghiamo come creare un sito web ottimizzato per i dispositivi mobili. 
Il primo accorgimento prevede l’utilizzo delle griglie.  

Le griglie sono già attive alla creazione del sito (qualora non lo fossero, è possibile selezionarle dal menù in alto a destra con l’icona griglia) e sono costitute da due linee orizzontali e due verticali tratteggiate. 
Ti sveliamo un piccolo trucco: la distanza tra le due righe verticali non è casuale ed è di 960 pixel. Questa dimensione è utilizzata da molti designer, nel realizzare un sito, per avere un buon formato su vari dispositivi, inclusi portatili e telefoni cellulari. 

Il modo più facile per avere un sito ben visualizzabile su dispositivi mobili è dunque, quello di mantenere tutti gli elementi all’interno delle linee verticali.

Altri due modi più complessi e che richiedono un po’ di pratica sono:
- Agganciamento 
- Ridimensionamento

L’agganciamento serve per vincolare gli oggetti della tua pagina web al bordo del browser. Questo significa che se ridimensioniamo la finestra del browser (simulando la dimensione dello schermo dei cellulari) vedremo gli oggetti agganciarsi e seguire il bordo: viceversa se il componente non è agganciato esso finirà fuori dallo schermo. 
In un dispositivo mobile questo potrebbe creare il cosiddetto "effetto scrolling", ossia il sito non entrerà orizzontalmente per intero nello schermo, creando un risultato non piacevole per la navigazione.
Spieghiamo anzitutto come creare un sito predisposto all’uso dell’agganciamento: dal menù in alto a destra cliccando sulla rotellina, troverai la spunta "Agganciamenti".nPer utilizzare l’agganciamento, selezionando un componente con un doppio click vedremo una calamita sulla barra in alto (che non compare se l’opzione non è spuntata).nCliccando sulla calamita potremo agganciare l’elemento scegliendo un punto a nostra scelta: sinistra, destra, su, giù oppure una combinazione di due lati, come ad esempio in alto a sinistra.nPer verificare l’effetto di questa scelta basta ridimensionare la finestra del browser e vedere come si muove l’oggetto al decrescere della dimensione.

Arriviamo infine al "ridimensionamento". Per avviarlo, esattamente come per il caso precedente, la spunta su "Agganciamenti" deve essere attiva.nSeleziona un oggetto con un doppio click: in basso a destra vedremo comparire tre lucchetti. Selezionandone uno, provocheremo il ridimensionamento dell’oggetto proporzionalmente alla dimensione della finestra del browser.  
- Con il lucchetto a destra: l’oggetto sarà ridimensionato solo orizzontalmente 
- Con il lucchetto in basso: l’oggetto sarà ridimensionato solo verticalmente 
- Con il lucchetto in diagonale: l’oggetto sarà ridimensionato in entrambe le dimensioni
Senza usare il "lucchetto" qualunque oggetto rimarrà nella sua dimensione originale, al variare dello schermo del dispositivo.

Ti consigliamo, come già scritto in precedenza, di provare queste tecniche ridimensionando la finestra del browser e analizzando il risultato finale: se non verifichi per bene, rischi di avere una visualizzazione scorretta.  

Buon lavoro!


1
Top 10 News
Newsletter
Archivio

Vuoi Diventare Testimonial Flazio?
Inviaci i tuoi dati e i nostri designer valuteranno il tuo sito!
Ultimi articoli

Pillole di Flazio #2 - Creare un sito perfezionato per i dispositivi mobili

09/10/2013, 12:03

Il primo accorgimento prevede l’utilizzo delle griglie.  Le griglie sono già attive alla creazione del sito (qualora non lo fossero, è possibile selezionarle dal menù in alto a destra con l’icona grig

logofoter