Responsive Design… e il sito web è navigabile (anche) da telefonino

Che cosa è esattamente il web design reattivo?

Il termine Responsive Web Design (RWD) viene utilizzato per indicare una particolare tecnica di Web design per la realizzazione di siti web in modo che le pagine adattino automaticamente il layout per fornire una visualizzazione ottimale in funzione dell’ambiente nei quali vengono visualizzati (pc su desktop con diverse risoluzioni, tablet, smartphone, cellulari di vecchia generazione, web tv) riducendo al minimo all’utente la necessità di ridimensionamento e scorrimento, in particolare quello orizzontale.

L’era digitale è qui per restare, e noi dobbiamo adattarci per poter competere. La crescita di smartphone, tablet e netbook è in aumento ogni anno. Il lavoro di un web designer moderno sta diventando un po’ più difficile.

Il Responsive Design è la soluzione per un sito adatto a tutti i device

Il Responsive Design, che in italiano viene (malamente) tradotto con progettazione web reattiva, adattiva o responsiva, è tuttavia la soluzione più moderna per creare il vostro nuovo sito internet navigabile in modo confortevole con ogni tipo di dispositivo e qualsiasi risoluzione dello schermo.

Il Website Design Responsive non è una novità, già da tempo si poteva scegliere un layout fluido (in alternativa a quello statico) per lo sviluppo di un sito web. Oggi un ulteriore passo avanti si è compiuto utilizzando le immagini scalabili e layout regolabili. Tutto ciò è in base al tipo o screen-size (risoluzione di schermo) si utilizza durante la navigazione del sito web desiderato. Ci sono tre elementi molto importanti nel web design reattivo.

• Layout flessibili
• Immagini flessibili
• Media query

Layout flessibili

Il primo passo dovrebbe essere quello di creare un layout flessibile: al variare della larghezza del browser, griglie fluide si ridimensionano automaticamente e rendono responsivo il contenuto se necessario.

Immagini flessibili

Non è così ovvio come sembra, ma le immagini che si adattano (scalano) automaticamente sono indispensabili per il Responsive Design di un sito web. Ci sono diversi modi per realizzare ciò: è possibile ridimensionare l’immagine dopo che è stata caricata, al volo, utilizzando (spesso ma non sempre) come base l’immagine utilizzata al 100% per il layout più grande (quello studiato per una navigazione da monitor standard, da desktop); è inoltre possibile ritagliare dinamicamente l’immagine, con script caricati sul server che “preparano” automaticamente tutte le dimensioni necessarie dell’immagine caricata, necessarie ai vari layout per i diversi formati di schermo (monitor da desktop, iPad, iPhone, tablet e smartphone generici). Con entrambi i metodi, si abilitano automaticamente dimensioni differenti di un’immagine quando si scende al di sotto di una larghezza specifica (in pixel) dello schermo.

Media query

Le Media Query hanno un comportamento simile ai commenti condizionali. Ad esempio, si può avere un foglio di stile per un display di grandi dimensioni e nel frattempo fornire un foglio di stile diverso per i dispositivi mobili con una larghezza differente (più piccola) dello schermo. Le media query consentono ai progettisti di creare layout multipli utilizzando lo stesso contenuto. Per ottenere la scalabilità, nei fogli di stile CSS, le media query vengono utilizzati per applicare uno stile di pagina diverso in base a determinati parametri, come il min-width e orientation .
Un esempio di media query in style.css:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
body {
margin-top: 20px;
}
}


Ovvero, quando, per navigare all’interno del sito internet descritto da questo foglio di stile css, si utilizza un dispositivo con orientamento verticale e non orizzontale (orientation: portrait) con una larghezza di schermo compresa tra 1024px e 768px, il body avrà un margine superiore di 20px.

Per vedere concretamente come si comportano le media query, nell’aggiornare dinamicamente il layout grafico di un sito internet, potete visitare la Live Demo dei bellissimi temi-modello WordPress con design reattivo, che forniamo compresi anche nei nostri Promo pack. Questi siti web saranno belli da vedere ed eleganti nel presentare i contenuti su qualsiasi dimensione di schermo. Ma non dovete crederci sulla parola, provatelo voi stessi!
Se state utilizzando un desktop con un monitor standard, potete simulare dimensioni più piccole ridimensionando voi stessi la finestra del browser; magicamente il layout si trasforma e si adatta al diminuire delle dimensioni della finestra.

Conclusione

Il Responsive Website Design è molto importante per qualsiasi realtà di comunicazione on line, professionale e non solo, che abbia necessità di un sito web moderno e sempre fruibile.

Ricordate che i visitatori che si servono di un browser mobile sono in costante aumento. Per noi di EM3DESIGN rendere la loro esperienza piacevole, semplice e facile è un must.

Non è più ammissibile sostenere che Responsive Design sia solo una moda inventata dei web designer. Bisogna piuttosto ammettere che un sito web sviluppato con un design adattativo contribuisce in modo significativo a risolvere i problemi di progettazione associati alle diverse risoluzioni.

Come sempre, il nostro obiettivo è quello di ispirarvi, spingervi e spingerci oltre. Vi mostriamo altri esempi suggestivi di web design reattivo mettendo a confronto la re-distribuzione (automatica) dei contenuti nei vari dispositivi. Sempre… una Buona visione!