Il Blog di FuturaImmagine

Creazione sito responsive, un trucco utilissimo!

 

creazione-sito-responsive

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.

 

creazionesitoresponsive

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?

responsive-layout

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

 

 

 

 

FuturaImmagine è una web-agency specializzata nella creazione di siti web ad alto tasso di conversione. In pratica, aiutiamo le imprese a vendere online attraverso pubblicazioni, corsi di formazione, progetti "done for you" e consulenze di Marketing.

Fondata nel 2005 da Luca Orlandini, è oggi una delle più affermate agenzie di Conversion Marketing e sviluppo web. Per visualizzare gli ultimi progetti e le ultime testimonianze dei nostri clienti ti consigliamo di visitare la pagine dedicata alla Landing Page o allo Sviluppo Web. In questo sito potrai trovare anche i feedback e i progetti web fino al 2012.

Tutti i contenuti sono riservati, la riproduzione anche parziale senza consenso scritto è vietata e sarà perseguita.

Cerca nel sito