beta 1.0
Test
Elenco siti recensiti Segnala un errore Informazioni BLOG
Condivi su FacebookCondivi su Facebook Share on Google+Condividi su Google+ Richiedi preventivo refactory del tuo sito.Richiedi preventivo refactory del tuo sito. Metti RoadToResponsive nel tuo sitoMetti RoadToResponsive nel tuo sito
Tutti gli articoli






11/11/2013 -

Guida beginner

Layout flessibili

La pratica si basa sulla progettazione di una griglia flessibile, in grado di ridimensionarsi dinamicamente con lo schermo a qualsiasi dimensione. Le griglie spesso sono realizzate con misure percentuali oppure in em.
Come ulteriore aiuto, CSS3 ha introdotto nuove unità di lunghezza relative, in relazione alla dimensione del browser. Queste sono vm (larghezza finestra), vh (altezza finestra), Vmin e Vmax (minima e massima altezza del viewport).
L’utilizzo di dimensioni relative è motivato dal fatto che le dimensioni del viewport cambiano spesso, sia tra diversi dispositivi che all’interno del dispositivo singolo, per esempio in seguito ad una rotazione.
È possibile sfruttare anche altre proprietà CSS come min-width e max-width, e i corrispettivi per le altezze.
A volte questo approccio può non bastare, in quanto le dimensioni troppo ridotte degli schermi impedirebbero una facile lettura dei contenuti. Per ovviare a questo problema si utilizzano dunque le media queries.


  Condivi su Facebook Share on Google+      Tag:  Manuale  Guida  Layout
Introduzione
Guida beginner
1 lezione

Introduzione

La struttura di un sito deve quindi oggi adeguarsi ai nuovi dispositivi, in modo da soddisfare questa enorme fetta di utenti.  La soluzione per queste esigenze è diventata il Responsive Web Design, abbreviato in RWD.


Tag:  Manuale  Guida
Responsive vs. Adaptive vs. Mobile
Guida beginner
2 lezione

Responsive vs. Adaptive vs. Mobile

Responsive indica la reattività di un sito ad i cambiamenti imposti dall’utente, per esempio la rotazione del dispositivo da verticale ad orizzontale, oppure lo zoom utilizzando due dita.


Tag:  Manuale  Guida
Media queries
Guida beginner
3 lezione

Media queries

Il concetto è quello di poter specificare stili diversi a seconda delle dimensioni dello schermo. 


Tag:  Css  Manuale  Guida  Layout
Mobile first
Guida beginner
4 lezione

Mobile first

Se state pensando di realizzare un sito compatibile con dispositivi mobili allora vi risulterà particolarmente comodo adottare la filosofia del mobile-first, ovvero pensarlo prima per dispositivi mobili e poi per desktop.


Tag:  Css  Manuale  Guida  Layout
Viewport
Guida beginner
5 lezione

Viewport

Buona parte degli odierni dispositivi mobili lavora piuttosto bene nel visualizzare i siti.
Un valido aiuto è però offerto dall'opportunità di utilizzare le caratteristiche del viewport, cioè dimensione, scala e risoluzione.


Tag:  Manuale  Guida  Layout  Html
Media flessibili
Guida beginner
6 lezione

Media flessibili

L'ultimo ed importante aspetto nel web design riguarda i media flessibili. Al cambiamento delle dimensioni del viewport non sempre segue il cambiamento dei contenuti multimediali, caratteristica però desiderata.


Tag:  Css  Manuale  Guida  Layout