Un sito web reattivo ( RWD , inglese responsive web design : responsive web design ) è un sito web il cui design mira attraverso diversi principi e tecniche per fornire una comoda consultazione su schermi di dimensioni molto diverse. L'utente può così consultare lo stesso sito web attraverso un'ampia gamma di dispositivi (monitor di computer, smartphone , tablet, televisione, ecc.) Con lo stesso comfort visivo e senza dover utilizzare lo scroll orizzontale o lo zoom avanti / indietro sui dispositivi touch tra cui, manipolazioni che a volte possono degradare l' esperienza dell'utente , sia di lettura che di navigazione. Un sito Web reattivo è un esempio di plasticità dell'interfaccia .
Il concetto di web reattivo ripensa il modo di progettare i percorsi di navigazione in Internet, poiché non si tratta più di progettare tanti percorsi quante sono le famiglie di terminali, ma di progettare un'interfaccia reattiva. Pertanto, le fonti di informazione e le basi tecniche non vengono duplicate. Ciò genera economie di scala nella progettazione e nella manutenzione dei siti.
Un sito web progettato sul principio RWD utilizza la tecnologia delle media query CSS3 , un'estensione della regola per adattare il layout all'ambiente di consultazione grazie ad una griglia fluida in cui sono disposti i diversi contenuti della pagina. @media
Il concetto di RWD, come descritto da Ethan Marcotte, si basa sui tre elementi tecnici sopra menzionati.
Se le media queries sono spesso proposte come l'elemento tecnico principale del responsive web design, per Marcotte E. vengono utilizzate solo per apportare alcune modifiche all'interfaccia quando l'uso di griglie fluide non consente una soluzione. adattabilità del prodotto.
Questa "sacra trinità", come la chiama Raphaël Goetter, viene talvolta criticata, alcuni Considerando che la griglia fluida non è necessaria per avere un prodotto completamente reattivo.
Per facilitare la creazione di modelli reattivi per il web, e quindi risparmiare tempo, ci sono molti framework in CSS responsive ( Bootstrap , Foundation, Gumby, Skeleton…).
Il concetto di RWD è portato con la proliferazione di terminali per la consultazione di siti web. Esistono due diversi approcci alla progettazione di siti Web reattivi che dovrebbero essere tenuti in considerazione.
A partire dalla versione desktop del sito, alcuni elementi che compongono la pagina web vengono gradualmente riformattati al diminuire della larghezza dello schermo, quando non vengono semplicemente rimossi. Si tratta di adattare il design alla definizione più debole dello schermo. Il caso più frequente e più significativo è il passaggio da un sito con più colonne in versione desktop, a uno solo in versione mobile.
Questo metodo viene talvolta messo in discussione nella comunità dei web designer, poiché in realtà uno smartphone caricherà la versione desktop del sito Web e la versione mobile, e quindi scaricherà dati e immagini di stile non necessari che possono essere pesanti da una rete cellulare.
Il concetto di mobile first può essere considerato come un modo di pensare in cui si privilegerebbe la costruzione di un'interfaccia ergonomica per terminali mobili prima di stabilire l' ergonomia per un terminale “ desktop ”. Questo pensiero mira a migliorare l' esperienza dell'utente (UX).
Lo sviluppo di un'interfaccia ergonomica sotto il vincolo di un piccolo spazio espositivo costringe a purificare il più possibile gli elementi visibili dall'utente finale. Una tendenza che ritroviamo sempre di più nell'ergonomia delle interfacce web.
Questo pensiero è sempre più favorito dagli strumenti destinati alla creazione di siti web. Ad esempio, Wordpress e Drupal CMS sono progettati per integrare questa opzione " mobile first ". Il costante aumento delle vendite di “ dispositivi connessi intelligenti ” (PC, smartphone e tablet) ha aumentato l'interesse a produrre modelli RWD per la maggior parte degli strumenti di gestione dei contenuti . Il CMS di Joomla! offre anche modelli di design che integrano la dimensione responsive.
Per andare oltre, i nuovi sistemi di gestione dei contenuti integrano il " responsive web design " nel loro design. Alcuni CMS come Rubedo integrano nativamente sistemi di layout utilizzando Fluid Grid e consentono (grazie ai Media Queries) di definire gli elementi delle pagine che verranno visualizzate in base al media utilizzando semplici checkbox.
Il responsive web design può essere applicato ad altri usi di quel sito web. Tutto ciò che utilizza le tecnologie web può essere considerato reattivo. È quindi possibile progettare e-mail HTML reattive, applicazioni HTML5 mobili reattive o applicazioni Facebook Responsive .