Se si deve creare un sito web per hotel visualizzabile correttamente su tutti i dispositivi come tablet, computer portatili e computer desktop, e su qualsiasi risoluzione dello schermo, bisogna utilizzare un design reattivo. Questo tipo di grafica, si adatta automaticamente alle varie risoluzioni e ai vari dispositivi e permette una visualizzazione sempre ottimale dei contenuti del sito stesso.
Ma come si procede alla creazione di siti web reattivi? In realtà è più facile di quanto si pensi con l’utilizzo di Media Query.
Media Query è un modulo CSS3, diventato standard raccomandato dal W3C nel mese di giugno 2012. Media Query permette agli sviluppatori web di creare un sito in grado di reagire alle varie risoluzioni e di riformattare i siti web già esistenti con un risparmio di tempo notevole. Media query può essere utilizzato anche per nascondere gli stili di Internet Explorer, senza utilizzare i commenti condizionali, utilizzando due fogli di stile separati.
Le web agency che utilizzano i CMS come WordPress o Joomla, per la realizzazione di siti Web, utilizzano moduli Media Query già presenti nei fogli di stile dei vari template responsive.
Un modulo Media Query è costituito da un tipo di supporto e da almeno un’espressione che limita le funzionalità multimediali del foglio di stile come larghezza, altezza o colore. Il risultato delle query può essere true o false. Se è true significa che il dispositivo specificato nella query corrisponde al dispositivo in uso, quindi la pagina subisce tutte le espressioni e le restrizioni specificate dalla query stessa. Nel caso il risultato fosse false le specifiche della query non si applicano, quindi il sito verrà visualizzato normalmente, senza ridimensionamenti. Questo meccanismo consente l’utilizzo di più query, una per ogni risoluzione, con un risultato migliore a livello di resa grafica, che garantisce oltretutto una migliore navigabilità e usabilità del sito su qualsiasi dispositivo.
