Menu

Responsive Web Design. Mini guida

Torna alle news
04/03/2015
Web design, Responsive Design

COS’È IL RESPONSIVE WEB DESIGN?

ENG = la lingua inglese designa genericamente con l’aggettivo “responsive” tutto ciò che “reagisce o risponde rapidamente e in modo appropriato a uno stimolo”
ITA = in italiano l’aggettivo che rende meglio il termine responsive è “adattativo” o “adattivo”


I CONTENUTI: COSA INSERIRE?



“Non iniziate la progettazione del sito pensando al layout per il desktop. Ma non iniziate nemmeno pensando al layout per il mobile. Pensate invece, prima di tutto, ai contenuti
Jeremy Keith

Fondamentale è porsi le domande giuste in fatto di strategia per la gestione dei contenuti, passando solo in un secondo momento dal “cosa” (quali contenuti) al “come” (tecniche e modalità di presentazione degli stessi).


LA STRUTTURA

IL LAYOUT
La parola d’ordine è semplificare.
Sui dispositivi mobili la modalità ottimale è quella della LINEARIZZAZIONE degli elementi che compongono la pagina.

CANCELLIAMO IL SUPERFLUO



La regola fondamentale, nella realizzazione di pagine responsive, è la capacità di NASCONDERE i contenuti non essenziali. Pertanto, prima di iniziare lo sviluppo, è necessario stilare un elenco dei contenuti da visualizzare sui vari device.


LE 3 FASI DELLA PROGETTAZIONE

FASE 1: GRIGLIE FLUIDE Il layout deve espandersi e restringersi in base alle dimensioni del browser

  • Px VS em
    Sostituzione dei px (unità di misura statica) con gli em (unità di misura proporzionale)
  • Utilizzo delle griglie fluide
    Un fluido è una sostanza che si deforma continuamente (flussi) nell’ambito di un sforzo applicato – Wikipedia Indipendentemente da quali siano il dispositivo o la dimensione dello schermo, le componenti nelle griglie fluide vanno a fluire e ad adattarsi al sistema dell’utente.
  • Gli altri elementi.Ogni elemento del layout deve essere trattato in una proporzione relativa rispetto al contenitore. La grandezza degli elementi che definiscono il layout è definita solo e soltanto in percentuale.
     
FASE 2: IMMAGINI FLUIDE La regola del max-width
La regola css maxwidth vincola la larghezza dell’immagine a quella del suo contenitore.

FASE 3: MEDIA QUERIES Ri-disporre il contenuto adattandolo al dispositivo
I media queries sono attributi CSS che consentono di definire determinati valori per determinate dimensioni del browser

Metti un like

Vuoi saperne di più? Contattaci subito!

Privacy Policy
Ho letto e autorizzo il trattamento dei miei dati personali.


Invia

Non perderti le nostre news

Privacy Policy
Ho letto e autorizzo l'invio della newsletter.