W czasie wakacji wiele osób boryka się z problemem spakowania swoich rzeczy do małej, podróżnej walizki. Co wziąć? Jak ułożyć rzeczy, aby maksymalnie wykorzystać miejsce? Podobnie wygląda projektowanie responsywnych tabel. Oto kilka porad, jak poradzić sobie z tym zadaniem.

Responsywność jest obecnie jednym z głównych wymagań przy projektowaniu nowoczesnych stron internetowych. Rosnące znaczenie urządzeń mobilnych i zmieniające się przyzwyczajenia użytkowników sprawiają, że idei responsywności nie można ignorować. Istotą „Responsive Web Design” jest przystosowanie danego serwisu do rozdzielczości różnych ekranów, różnych urządzeń – desktopów, tabletów i smartfonów. Podczas przygotowywania skalowalnej strony napotkać możemy na wszelkiego rodzaju problemy, takie jak kwestia budowy nawigacji, organizacji treści, skalowania grafik i tekstu. Jednym z największych wyzwań z jakim można się zmierzyć projektując responsywną stronę jest natomiast tworzenie skalowalnych tabel.

Tabele są elementem powszechnie spotykanym na stronach wszelakiej maści. Na łamach serwisów e-commerce pojawiają się przy najróżniejszych produktach. Mogą służyć do prezentacji złożonej oferty, zawierać dane techniczne produktu lub zawierać wykaz rozmiarów danego produktu. Wyzwaniem jest utrzymanie łatwego dostępu do danych z jednoczesną możliwością porównywania informacji. W zależności od wielkości tabeli i jej złożoności, przeniesienie danych na ekran małego smartfona może być, jak próba przepchnięcia arbuza przez główkę od szpilki.

W przypadku dużego ekranu komputera stacjonarnego lub laptopa nie ma większych problemów
z prezentacją nawet złożonych tabel. Inaczej ma się sprawa z małymi ekranami urządzeń mobilnych

W przypadku dużego ekranu komputera stacjonarnego lub laptopa nie ma większych problemów  z prezentacją nawet złożonych tabel. Inaczej ma się sprawa z małymi ekranami urządzeń mobilnych

W przypadku dużego ekranu komputera stacjonarnego lub laptopa nie ma większych problemów
z prezentacją nawet złożonych tabel. Inaczej ma się sprawa z małymi ekranami urządzeń mobilnych

Przygotowując się do przeprojektowania tabeli należy skupić się na paru elementach:

  •  jakiego rodzaju jest to tabela, czego dotyczy i jakiego typu dane są w niej zamieszczone?
  •  jak wiele tych danych zawiera tabela?
  •  jak wiele danych faktycznie jest potrzebnych użytkownikowi?
  •  jakie są ograniczenia techniczne?

Tabela do pobrania

Jednym z najłatwiejszych sposobów radzenia sobie z tabelami na urządzeniach mobilnych, jest przenoszenie ich do dokumentu PDF, który można pobrać bezpośrednio ze strony. Gdy użytkownik przegląda stronę na dużym ekranie tabela wyświetla się w całości, lecz gdy rozdzielczość ekranu zmniejsza się do rozmiarów smartfona, tabela jest ukrywana, a jej miejsce zastępuje link do pobrania pliku PDF.

Plusem takiego rozwiązania jest jego prostota i łatwość we wdrożeniu. Nie ma również ryzyka, że tabela rozsadzi skrupulatnie przygotowywany, responsywny układ. Dodatkowo całość może zostać wykonana za pomocą prostych skryptów media query w CSS.

Wadą wykorzystania dokumentu PDF (lub innego rodzaju plików, np. graficznych), jest odsyłanie użytkownika do zewnętrznych materiałów. Istnieje bowiem ryzyko, że użytkownik, który opuści stronę, aby przejrzeć pobrany plik, już na nią nie wróci. Użytkownicy mogą być też – z różnych powodów – niechętni do pobrania samego pliku. Warto tutaj pamiętać, aby link do dokumentu był dobrze opisany, dzięki czemu użytkownik będzie wiedział co pobiera, a sam plik nie ważył zbyt wiele (ta informacja również powinna być częścią opisu). Nie jest to również sposób, który należałoby opisać, jako szczególnie użyteczny, czy też budujący dobre doświadczenie. Z technicznego punktu widzenia, takie podejście pozwala szybko rozwiązań problem z tabelą, ale wymaga dużego zaangażowania od użytkownika, a pobraną tabelę wciąż będzie się ciężko czytało na małych ekranach.

Tabela do przewijania

Kolejnym rozwiązaniem (spośród tych prostszych) jest budowa tabeli przewijanej w poziomie. Gdy rozdzielczość ekranu staje się mniejsza niż szerokość tabeli, zamyka się ją w kontenerze stanowiącym maskę, która nie pozwala wystawać treści tabeli poza obszar strony. Wewnątrz tego kontenera tabele można swobodnie przewijać w poziomie.

Tabela skrolowana w poziomie. Ważne jest, aby użytkownik widział, że tabelę można przewijać

Tabela skrolowana w poziomie. Ważne jest, aby użytkownik widział, że tabelę można przewijać

Tabela z wyborem

Rozwiązanie to utrzymuje użytkownika na stronie i jest dość proste w implementacji. Niestety może zaistnieć sytuacja, że użytkownik nie będzie zdawał sobie sprawy, że tabelę można przewijać, a oprócz tego nie da się zobaczyć całej tabeli jednocześnie. Taki sposób przeglądania tabel można rozwinąć o kolejne udogodnieni dla użytkownika, jak np. blokowana pierwsza kolumna, która pozwala mieć ciągły podgląd najważniejszych danych.

Kolejnym wyjściem jest tworzenie tabel z opcją selekcji danych. Jeśli rozdzielczość ekranu staje się za mała, aby wyświetlić pełnowymiarową tabele, pozostawia się użytkownikowi możliwość wyboru danych, które chce zobaczyć. Zależnie od tego, jakie informacje zawiera tabela, są one grupowane i użytkownik może wybrać, które z nich chce zobaczyć. Należy jednak wziąć pod uwagę, czy dawać użytkownikowi możliwość wyświetlenia wszystkich informacji i jak ma prezentować się tabela w takiej sytuacji. Pewną możliwością jest pozostawienie ograniczonego wyboru, np. maksymalnie trzech kolumn, ale trzeba mieć na uwadze, że utrudni to użytkownikowi wygodne porównywanie wszystkich informacji.

RWD 3

 

Tabela, ale nie do końca

Pewną wariacją takiego selektywnego prezentowania danych, jest odejścia od tworzenia tabeli (jeżeli informacje i dane w niej zawarte na to pozwalają) i stworzenie narzędzia do wyszukiwania przez użytkownika konkretnych komórek.

Sposób egzekucji tej metody zależy w dużej mierze od rodzaju danych, jakie zawiera tabela. Jeśli znajduje się w niej np. zestawienie informacji, spośród których użytkownik potrzebuje tylko jednej konkretnej, np. rozmiar X zależny od danych szerokości Y i wysokości Z, wówczas wybór może dotyczyć tylko tych kategorii (szerokość i wysokość), czego wynikiem jest potrzebny użytkownikowi rozmiar X.

RWD 4

Jeśli żadne inne rozwiązanie się nie sprawdza można jeszcze rozważyć zamianę tabeli na bloki informacji. Poniżej pewnej rozdzielczości wszystkie informacje z powiązanych ze sobą komórek łączą się w jedną. W efekcie możemy jednak otrzymać bardzo długie zestawienie danych, które ciężko się porównuje między sobą. Przydatna w takiej sytuacji może okazać się wyszukiwarka, bądź funkcja filtrowania.

RWD 5

Jeśli znasz więcej ciekawych metod tworzenia responsywnych tabel zostaw komentarz, lub napisz do nas.