Per fare subito chiarezza: 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. Oggi è impossibile creare un sito web senza un’attenta riflessione sul design responsive. Ovvero su quelle tecniche che ti permettono di rendere il tuo progetto web adatto a qualsiasi schermo.

Pensa alle prime volte che hai navigato con uno smartphone: qual era l’operazione più noiosa? Ad esempio zoomare con indice e pollice lo schermo per leggere il testo, manovra che portava i margini fuori dal monitor. Risultato? Trenta minuti per leggere pochi paragrafi. E scoprire altre risorse del sito? I link della navigazione erano impossibili da trovare e cliccare. Sembra un brutto sogno, vero? O la descrizione di un passato lontano. In realtà esistono ancora molti siti web che non rispondono alle esigenze dei vari dispositivi.

Realizzazione siti web responsive non è un’operazione complicata, anzi, è alla portata di tutti, anche se occorre qualche semplice accorgimento tecnico. In questa breve guida, vi spiegherò come creare un sito Web Responsive nella maniera corretta.

Occorre subito dire che, grazie ad un sito del genere, è possibile adattare la risoluzione del computer a qualsiasi supporto elettronico, quindi anche ai tablet e agli smartphone. Il Web Responsive nasce verso la fine del 2011 ed è ancora in fase di perfezionamento. Con l’aumento dei dispositivi portatili si è cercato, con il web reattivo, di fornire una migliore risoluzione agli utenti, sempre più numerosi, di quei siti in grado di essere visualizzati anche su display più piccoli.

Se preferisci affidare però tutto a dei professionisti, contatta CreazioneSitiWeb.

Innanzitutto, la parte principale su cui si deve operare sono le media queries. Si tratta di un sistema che esegue porzioni di codice CSS, ovvero un linguaggio utilizzato per la realizzazione di siti web, quando la risoluzione dello schermo è inferiore rispetto ad un determinato numero di pixel che normalmente si trovano in un computer. Per realizzare tutto ciò, occorre per prima cosa lavorare su una struttura di default abbastanza semplice, che può essere modificata con poche regole CSS dalle media queries.

Una volta impostata quest’ultima il sito si adatta per quattro volte, rendendosi quindi fruibile da qualsiasi supporto. Successivamente, se la risoluzione è quella di un tablet, con una larghezza inferiore a 980 pixel, la larghezza di sidebar deve essere diminuita. Se la larghezza del device scende al di sotto dei 767 pixel, si deve linearizzare i contenuti e la sidebar deve essere collocata sotto il contenuto principale, su due colonne, mentre il menu dev’essere nascosto e mostrato solo tramite un tasto posizionato in alto a destra.

L’ultimo passo prevede l’inserimento dell’HTML, importantissimo per la visualizzazione dello slider nella sidebar. Tutte le immagini, i link e le altre parti che compongono il sito vengono ridimensionate in base alle dimensioni dello schermo. In questo modo, si ottiene un sito che si adatta perfettamente sia ai grandi schermi, che a quelli più piccoli. Infine, seguendo queste indicazioni, è possibile creare un sito Web Responsive in grado di poter essere consultato su qualsiasi schermo e capace di adattarsi allo strumento che si ha a disposizione. Il responsive è ormai essenziale per avere sempre con se il proprio sito preferito.