Responsive web design su tabelle di dati
Lunedì 16 Gennaio 2012 - 09:35
di Maico Orazio
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.
Categoria: Web Design | Permalink
Commenti
1
Ho trovato l’articolo e la soluzione proposta molto interessante.
Ho realizzato un plugin jquery che implementa in modo coerente ed ottimizzato il codice proposto da FilamentGroup.
Link al plugin con spiegazione:
http://goo.gl/OOABrLink alla repo pubblica su GitHub:
https://github.com/thepeg/MediaTableCiao!
# - postato da Marco Pegoraro - 19 Gennaio 2012 - 15:57
2
Molto Interessante Marco,
Grazie del plugin!# - postato da rollsappletree - 20 Gennaio 2012 - 11:13