Responsive web design su tabelle di dati

Quando si tratta di Responsive Web Design, dobbiamo considerare con attenzione gli elementi di design e adattarli al particolare contesto, a seconda delle dimensioni dello schermo o dispositivo mobile corrente.

La progettazione reattiva non riguarda solo immagini e layout, ma anche menu di navigazione, video, moduli, dimensione dei caratteri, link e anche le tabelle. Infatti, avete mai pensato a come si dovrebbe adattare una complessa tabella multi-colonna in versione desktop per una comoda visualizzazione su un dispositivo mobile?

Ebbene, i ragazzi di Filament Group con la loro creatività  hanno sviluppato una tecnica per rendere gestibili tabelle di dati rendendo visibile un sottoinsieme delle colonne in base alle dimensioni degli schermi, e anche per consentire all’utente di cambiare facilmente la visibilità  delle colonne.
Essenzialmente, la tecnica consiste nel visualizzare un numero limitato di colonne su schermi più piccoli, fornendo un rapido accesso ai dati nascosti. La tecnica utilizza JavaScript per adattarsi alle dimensioni dello schermo e Respond.js per la compatibilità  cross-browser.

Altro esempio di web design reattivo su tabelle è la soluzione di David Bushell nella visualizzazione del calendario.