Il design di un sito web è responsive quando adatta automaticamente il layout e l’aspetto del sito in base alle dimensioni della finestra di visualizzazione, e quindi al tipo di dispositivo utilizzato per consultare il sito (computer, tablet o smartphone).Per visualizzare il rendering di un sito web responsive sullo schermo di uno smartphone, non devi far altro che ridimensionare la finestra del browser web per simulare le dimensioni dello schermo del cellulare. Questa operazione è diversa dai siti mobile, che si basano sullo “user agent”, e quindi sul tipo di dispositivo mobile utilizzato, per scegliere quale aspetto applicare per un determinato utente.
Vantaggi del design reattivo
- Il contenuto del sito è identico indipendentemente dal terminale utilizzato dal cliente: questo evita di dover gestire più contenuti per ogni tipo di dispositivo di destinazione.
- I costi di sviluppo sono inferiori ai costi di sviluppo di soluzioni dedicate di tipo sito mobile o mobile application.
Svantaggi
- Il design reattivo non consente una versione mobile totalmente diversa dalle versioni per computer o tablet. In alcuni casi, l’ergonomia specifica per i dispositivi mobili può essere un fattore chiave delle prestazioni invece del design reattivo.
- Tecnicamente è ancora piuttosto complicato da mantenere: ogni intervento su un elemento di design deve essere testato per validarne l’aspetto in dimensioni più piccole.
Come si realizza un sito responsive?
A differenza di un sito mobile, i siti responsive utilizzano gli stessi file html / css , indipendentemente dal terminale utilizzato per leggere la pagina. Il concetto di responsive design si basa su tre elementi principali:
- L’utilizzo delle cosiddette griglie flessibili, che, ridimensionando lo schermo, posizioneranno opportunamente gli elementi della pagina. Chiaramente si tratta di posizionare gli elementi esclusivamente con blocchi <div>. I valori relativi verranno utilizzati molto anche per esprimere la dimensione di questi elementi (es. una percentuale invece di una larghezza fissa in pixel).
- Ridimensionamento adattivo dei supporti in modo che non fuoriescano dallo schermo.
- “Media query”, che ad esempio consentono di applicare dichiarazioni condizionali in un file CSS , a seconda delle dimensioni dello schermo.
Esempio
Per vedere se un sito è reattivo, tutto ciò che devi fare è ridurre le dimensioni della finestra del browser Internet e osservare i cambiamenti.