samd
samd
flazio.svg
flazio.svg

About

Login 

Login 

Confronta

Blog

flazio.svg

Il modo più semplice e veloce per creare un sito web

Per ulteriori informazioni, contattaci:
support@flazio.com 
+39.02 2111 8679
P.IVA 05021040877

Prodotto

Support

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

2013-10-09 15:03

Flazio Team

Come usare Flazio,

Il primo accorgimento prevede l’utilizzo delle griglie.  Le griglie sono già attive alla creazione del sito (qualora non lo fossero, è possibile selezionarle da

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!


facebook
twitter
linkedin
youtube
instagram
whatsapp

© 2013-2023 flazio.com

Partner

pon201420imprcomppayoffeumisergb
ponloghi
sicilykiosk
financial-times3
logo_leaderdellacrescita

Pronto a creare il tuo sito web?