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

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.
Questo approccio consentirà di evitare che i dispositivi meno potenti, cioè i mobile, carichino immagini, animazioni e file CSS che poi non verranno utilizzati. Si otterrà quindi un risparmio di banda, di tempo e di potenza avvertibile su mobile e un peggioramento inavvertibile su desktop.
Un buon esempio per spiegare questo concetto consiste nel definire un background di colore omogeneo come base per i mobile, e poi introdurre un'immagine di sfondo SOLO se il dispositivo è desktop, utilizzando le media query con attributi min-width per esempio dai 600 pixel in su.

  Condivi su Facebook Share on Google+      Tag:  Css  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
Layout flessibili
Guida beginner
3 lezione

Layout flessibili

La pratica si basa sulla progettazione di una griglia flessibile, in grado di ridimensionarsi dinamicamente con lo schermo a qualsiasi dimensione.


Tag:  Manuale  Guida  Layout
Media queries
Guida beginner
4 lezione

Media queries

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


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