tabelka na stronach responsywnych

http://webroad.pl/html5-css3/3187-przesuwane-tabelki-czyli-sposob-na-responsywnosc-tabel-na-stronie-internetowej

apewnienie użytkownikom urządzeń mobilnych wygodnego i szybkiego przeglądania stron internetowych to dzisiaj już standardowy wymóg. Responsive Web Design to jeden z fundamentów współczesnej sieci, a rosnąca ilość użytkowników tabletów i smartphone’ów zmusza nas do tego by nie zapominać o użytkownikach tychże urządzeń. O ile technologia poszła na tyle do przodu, że RWD stało się możliwe i w podstawach nawet relatywnie łatwe do implementacji to jednak pozostał jeden element HTML, który jakby nie zauważał tych zmian… tabelki. To najczęściej one powodują problemy na stronach mobilnych, ale i na to jest sposób!

“Ukrywamy” tabelkę

Sposobem sprawiającym, iż tabelki wyświetlą się na urządzeniu mobilnym w sposób ergonomiczny i nie psujący layout’u strony jest użycie prostej sztuczki sprowadzającej się do owinięcia naszego delikwenta (czyt. tabelki) div’em z właściwością overflow-x:scroll.

Jak to wygląda w praktyce?

Zamysł jest banalny – musimy owinąć tabelkę w div, który przy odpowiednim stylowaniu zasłoni treść wychodzącą poza niego. Domyślnie każdy div rozciąga się na całą dostępną przestrzeń. W ten sposób jeśli trafi do wnętrza elementu dostosowującego się do szerokości okna przeglądarki widoczna część tabelki nigdy nie “rozwali” nam układu strony, gdyż zostanie ukryta.

Jeśli użytkownik będzie chciał zobaczyć resztę danych w tabelce wystarczy że przesunie suwak (czy w wypadku telefonów i tabletów przesunie treść palcem).

CSS potrzebny dla naszego owijającego div‘a jest następujący:

Raczej nie chcemy aby na ekranach komputerów pojawiał się bezużyteczny scrollbar, więc możemy użyć mediaqueries aby zastosować powyższy CSS tylko wtedy gdy będzie potrzebny. ‘Roboczo’ założymy, że jeśli ekran ma mniej niż 960px szerokości mamy do czynienia z urządzeniem mobilnym.

Oczywiście nadal może się tak zdarzyć, że przy większych szerokościach ekranu niż 960px tabelka ‘wyleje się’ poza owijającego ją div‘a ze względu na ilość treści, która się w niej znajduje. Aby temu przeciwdziałać możemy przyjąć większy niż 960px breakpoint albo znowu pomajstrować przy CSS.

Powyższy kod zapewni, że tabelka nie przekroczy szerokości owijającego ją div‘a, lecz jest to już tylko uwaga na marginesie bo nie ma to znaczenia z punktu widzenia naszego rozwiązania. Ważne jest tylko aby te style nie były aplikowane dla elementów HTML poniżej pewnej rozdzielczości, gdyż sprawiłyby one, że tabelka wyglądała by po prostu źle, a nasze rozwiązanie nie działało by w zamierzony sposób. Dlatego własnie użyliśmy mediaqueries.

W tym momencie pełny kod CSS powinien wyglądać tak:

That’s all folks… No prawie wszystko… Jest kilka rzeczy, które pomogą nam ulepszyć to rozwiązanie.

Automatyzacja

W tym momencie nasze rozwiązanie działa, ale niestety nie jest zbyt poręczne jeśli chcemy je stosować wielokrotnie na stronie internetowej. W końcu musielibyśmy ręcznie owijać każdą tabelkę w div co jest czasochłonne i mało efektywne.

Z pomocą przychodzi nam JavaScript. Przy pomocy prostego skryptu możemy zautomatyzować czynność przydzielania div‘a z odpowiednią klasą do tabelki i dzięki temu nie będziemy tracić czasu na żmudną pracę. Dla uproszczenia zakładamy, że w projekcie używamy już jQuery:

Teraz każda tabelka zostanie owinięta div’em o klasie .rwd-table

Kiedy należy używać?

Jak już wspomniałem to rozwiązanie warto używać jedynie dla urządzeń mobilnych, gdyż nie ma sensu pokazywać użytkownikowi scrollbar’a, dla którego nie ma żadnego zastosowania a tak własnie będzie w przypadku urządzeń desktopowych.

Pierwsze zaproponowane rozwiązanie tego problemu to użycie mediaqueries.

Jego mankament jest jednak taki, że tak na prawdę stosujemy tutaj uproszczenie zakładając, że kiedy okno przeglądarki ma mniejszą szerokość niż 960px mamy do czynienia z urządzeniem mobilnym. Jak znalazł wydaje się aby użyć w tej sytuacji media type ‘handheld’, ale niestety istnieją problemy z kompatybilnością (właściwie jej brakiem) – dla ciekawych więcej informacji na ten temat.

Dlatego jeśli zastanowić się dobrze to rozwiązanie przedstawione na początku wcale nie jest złe… Przecież wiele osób używających komputerów nie używa przeglądarek rozciągniętych na pełną szerokość monitora, co jest już dość powszechnie znanym faktem, a po drugie nawet jeśli używają to przecież mogą chcieć zmniejszyć wielkość okna przeglądarki, prawda? Wydaje się, więc że nasze ‘robocze’ założenia mogą śmiało zachować swoją ważność.

Alternatywnie jeśli zależy komuś na tym by jednak skupić się tylko i wyłącznie na urządzeniach mobilnych to należy sięgnąć po techniki rozpoznawania urządzenia i serwować odpowiedni kod CSS w zależności od tego z jakim urządzeniem mamy do czynienia. Osobiście jednak uważam, że byłby to w tym wypadku przerost formy nad treścią.

Problem z Mac OS

Niestety rozwiązanie problemu responsywności tabelek w postaci ‘przesuwanej tabelki’ ma pewien mankament związany z systemem operacyjnym Mac OS. Od czasu Mac OS X Lion scrollbar’y na stronach są domyślnie ukryte. Może to rodzić pewne kłopoty ponieważ nasza ukryta, przesuwana tabelka może po prostu wyglądać jak kawałek urwanej treści a nie jak tabelka…

Nie mam do końca pewności jakie (i czy w ogóle jakieś) problemy związane z użytecznością pojawiają się w związku z takim zachowaniem, ale wiem, że niektórzy zwracają uwagę na tę kwestię dlatego postanowiłem od razu zaserwować rozwiązanie.

Źródło rozwiązania

Powyższy kod zapewnia nam kontrolę nad suwakami w przeglądarkach z silnikiem webkit, ale niesety problem pozostaje aktualny w przypadku przeglądarki Firefox… Jeśli dla was lub waszego klienta jest to baaardzo duży problem to możecie też pokuśić się o rozwiązanie oparte o tzw. custom scrollbar. Dobrym przykladem jest jScrollPane. Sama idea działania będzie podobna, ale implementacja takiego rozwiązanie wymagać będzie większej ilości kroków związanych z odpaleniem dodatkowych skryptów – zainteresowanych zapraszam do dokumentacji pluginu 🙂

Jeszcze jednym rozwiązanem tej sytuacji jest umieszczenie jakiegoś wizualnego wskaźnika umożliwiającego zrozumienie, iż tabelkę można przesunąć. Jest to właściwie sztuczka mająca na celu zasugerowanie odwiedzającemu możliwość zobaczenia dalszje ukrytej treści. Rozwiązanie mogłoby wyglądać tak:

rwd-table

Naszą wskazówkę musimy umieścić na górze żeby odwiedzający od razu mógł się zorientować, że tabelka nie jest po prostu uciętą treścią i że na dole będzie mógł znaleźć suwak. Taki efekt możemy osiągnąć w bardzo prosty sposób:

Natomiast w HTML naszej strony musimy jeszcze dodać:

Aby pozycjonować absolutnie div o klasie scroll-this jedynie we wnętrzu div‘a o klasie rwd-table temu ostatniemu należy nadać następujący styl:

Natomiast dla uzyskania przestrzeni nad tabelką musimy dodać ten kod:

Jest to szybki i prosty sposób na uwolnienie się od potencjalnego problemu braku zrozumienia naszych intencji przez użytkowników. Oczywiście w prawdziwych projektach zachęcam do wymyślenia ciekawszej szaty graficznej 🙂

Webdesign & UX

Przyznam, że dość często stosuję ‘przewijane tabelki’, gdyż uważam że sprawdzają się bardzo dobrze w przypadku małych i średnich (kryterium podziału raczej intuicyjne) tabelek a zarazem są proste w implementacji i łatwe do zrozumienia i używania dla użytkowników.

Najważniejsze jest, że tabelka nie traci swojego charakteru i układu co sprawia, że zestawione dane stają się łatwiejsze do czytania. Z drugiej zaś strony html’owe przewijane tabele nie psują układu naszych mobilnych stron www dzięki czemu nie oszpecają starannie przygotowanych layout’ów.

Nie jest to jednak rozwiązanie, które można zastosować w przypadku dużych, tabelarycznych zestawień. W takich wypadkach trzeba szukać bardziej rozbudowanych rozwiązań.

A jakie Wy macie sposoby na responsywność tabelek?

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s