COSA È UN SITO WEB RESPONSIVE?
Un sito web responsive è un sito che si adatta automaticamente al dispositivo che lo visualizza rimanendo sempre chiaro facile da navigare.
Provate a restringere orizzontalmente la finestra del browser… vedete che le informazioni si spostano e si adattano? Questo è un sito responsive.
E’ fondamentale per determinate tipologie di siti web (ad esempio quelli di Ristoranti, Agriturismi e Bed and Breakfast) ed è sempre più importante perchè i modi di fruire la rete sono ormai molto eterogenei.
Molte delle persone che sviluppano siti web non hanno una grande conoscenza dei css. E’ normale del resto, se non sei un professionista uno dei vantaggi di Joomla e Wordpress è proprio la possibilità di riuscire a creare un sito web SENZA conoscere html e css.
I temi responsive si utilizzano da un pò e sono caratterizzati da un layout che si modifica automaticamente in funzione del dispositivo mobile che visualizza il sito.
Spesso però anche se il layout responsive è ben fatto alcuni moduli sono superflui per una navigazione da cellulare… oggi vedremo come ho risolto questo problema in uno dei miei siti web.
Se non lo conoscevate segnate il seguente codice, è molto utile e può aiutarvi a non far comparire un modulo sotto determinate risoluzioni.
Display:none per div a bassa risoluzione
Mettiamo ad esempio che avete una frase nella testata, affianco al logo. Visualizzando il tema da desktop è bello, perchè altrimenti la testata sarebbe vuota… ma se la risoluzione della pagina diventa troppo bassa non c’e’ spazio sia per il logo che per la scritta… e non è bello neanche mettere logo sopra e scritta sotto, perchè ci sarebbe uno scroll troppo lungo.
Come risolvere?
Per non far comparire un modulo o un testo sotto una determinata risoluzione basta aggiungere al tag div che lo contiene:
class="togli"
…e poi, nel file css del template definire la classe in questo modo:
@media (max-width: 1023px) {
div.togli
{ display:none !important; }
} In questo caso il div con la classe “togli” non sarà disposto per risoluzioni che vanno da 0 width a 1024. Facile no?
Ovviamente potete utilizzarlo per qualsiasi css, il comando @media è come se fosse un SE.
Se (larghezza massima 1023) allora… attenzione alla parentesi graffa, tutti i css specifici per questa risoluzione devono essere al suo interno!
Vuoi testare ora il tuo sito web responsive? Puoi farlo in modo semplice sul sito Responsivator