Responsiva tabeller

Gällande responsiva tabeller så finns det lite olika angreppssätt:

1. Dölja “mindre viktiga” kolumner. Vid mindre skärmar tar man helt enkelt bort kolumner som man tycker är mindre viktiga. Finns även varianter där man låter användaren välja vilka kolumner han/hon vill se med hjälp av checkboxar och liknande.

2. Göra tabellen scrollbar i sidled, så att man kan scrolla i sidled för att se fler kolumner. Det viktiga är då att om man har en titel i tabellen för varje rad, att titlarna då ligger kvar i vänsterkanten medan man scrollar, så att man förstår vilken rad som är vilken. Det är också viktigt att visuellt signalera att det går att scrolla i sidled så att användaren inte missar det.

3. Dela upp tabellen i flera tabeller som lägger sig under varandra, med ett visst antal kolumner i varje tabell. Detta är väl den minst eleganta lösningen.

Generellt gäller även att man bör fixera tabellens huvud med kolumnrubriker i fönstrets topp när användaren scrollar neråt i tabellen, så att kolumnrubrikerna är synliga även längre ner i tabellen (om den har så många rader att hela tabellen inte får plats på en skärm).

På den här sidan finns några exempel på ovan nämnda varianter: http://elvery.net/demo/responsive-tables/

Och här finns ännu mer läsning i ämnet: http://css-tricks.com/responsive-data-table-roundup/

Mvh

Olof Lönnroth, Interaktionsdesigner
NetRelations

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *