Media queries e layout responsive

Cosa sono i layout responsive? E’ presto detto, sono quei layout che rispondono alle variazioni di screen in cui andiamo a visualizzare il nostro sito web. Esempio semplice per tutti? Un sito al giorno d’ oggi deve essere visibile su almeno tre supporti differenti: computer, tablet e mobile.

Per fare questo ci vengono in aiuto le Media Queries che altro non sono che delle dichiarazioni per istruire il nostro css a gestire la formattazione del nostro sito in base alla dimensione rilevata del dispositivo da cui stiamo visitando. Queste semplici istruzioni che aiutano a rilevare appunto il media che ci sta visitando sono alcune delle novità di css3.

Nella maggioranza dei casi il codice html è uguale in tutte e 3 le modalità di visualizzazione mentre tutto il lavoro viene demandato al css intercettando il max-width e min-width (larghezza massima e minima) da noi dichiarati nel richiamare la parte di formattazione che ci riguarda. Per esempio per una visualizzazione smartphone il minimo sarà 321px e il massimo 480px mentre per il tablet giocheremo su un minimo di 481px per una massimo di 768px.

Naturalmente il web è già pieno di tutorial e blog sull’argomento, non vi rimane che provare a costruire un piccolo sito responsive e cimentarvi con le media queries. Il tutto può apparentemente sembrare facile fino a quando elaboriamo dei piccoli esempi con qualche div e un menù basilare, diventa molto più complesso quando ci dobbiamo scontrare con un vero e proprio sito web responsive. Ovviamente in questo caso subentra la bravura del designer.

Ma HTML 5 nel frattempo che fine ha fatto? Voci di corridoio ci dicono che diventerà uno standard del W3C solamente nel 2022. Vero? Falso? Rimane sempre da tenere conto che Google ha deprecato i nuovi marcatori in quanto per lui completamente inutili.

Tutto ancora da giocare.