nieczytelne tabele / listy

Nieczytelne tabele i listy to układy rozjeżdżające się na wąskich ekranach, wymagające poziomego przewijania.

Jak powstaje problem z nieczytelną tabelą lub listą

Nieczytelna tabela albo lista pojawia się wtedy, gdy układ strony został zaprojektowany dla szerokiego ekranu, ale nie przewidziano sposobu prezentowania treści na smartfonie lub małym laptopie. Tabela może mieć wiele kolumn, długie nagłówki, adresy internetowe, identyfikatory, ceny albo opisy, których nie da się skrócić bez utraty znaczenia. Jeżeli każdy element zachowuje stałą szerokość, suma szerokości kolumn przekracza szerokość okna przeglądarki. W efekcie strona rozszerza się poza ekran i pojawia się poziomy pasek przewijania.

Podobne zjawisko dotyczy list. Problem może wynikać z długich pozycji, zagnieżdżonych list, numeracji, ikon umieszczonych obok tekstu albo elementów ustawionych w jednym wierszu za pomocą właściwości CSS display: flex lub white-space: nowrap. Gdy tekst nie może się zawijać, pojedyncza pozycja wypycha cały kontener poza obszar widoczny na ekranie. Nieczytelność nie zawsze oznacza błąd danych. Często dane są prawidłowe, lecz sposób ich rozmieszczenia nie odpowiada dostępnej przestrzeni.

Różnica między zawijaniem tekstu a przewijaniem całego układu

W prawidłowo przygotowanej tabeli tekst w komórkach może zostać zawinięty do kilku wierszy, o ile nie zmienia to znaczenia informacji. Pomagają w tym między innymi właściwości CSS overflow-wrap, word-break oraz odpowiednio ustawiona szerokość kolumn. Długi adres URL, nazwa pliku lub ciąg znaków bez spacji wymaga osobnej kontroli, ponieważ zwykłe zawijanie tekstu może nie zadziałać w oczekiwany sposób. Należy też sprawdzić, czy element nadrzędny nie ma ustawionego white-space: nowrap albo minimalnej szerokości większej niż szerokość ekranu.

Poziome przewijanie może być uzasadnione w przypadku tabel, których nie da się sensownie przekształcić bez utraty relacji między kolumnami. Wtedy przewijany powinien być ograniczony kontener tabeli, a nie cała strona. Typowym rozwiązaniem jest umieszczenie tabeli w elemencie z właściwością overflow-x: auto i pozostawienie szerokości tabeli większej niż kontener. Dzięki temu nagłówek strony, menu i pozostała treść nadal pozostają w granicach ekranu. Błędne jest natomiast zastosowanie poziomego przewijania do głównego elementu dokumentu, ponieważ użytkownik musi przesuwać całą stronę, aby odczytać pojedyncze fragmenty.

Projektowanie tabel i list dla różnych szerokości ekranu

Responsywny układ powinien reagować na rzeczywistą szerokość widoku, a nie tylko na konkretny model urządzenia. W praktyce wykorzystuje się zapytania medialne CSS, które zmieniają układ po przekroczeniu określonej szerokości. Tabela może na szerokim ekranie zachować klasyczny układ kolumnowy, a na wąskim ekranie otrzymać mniejszą liczbę widocznych kolumn, układ blokowy albo kontrolowany obszar przewijania. Przy zmianie układu trzeba zachować jednoznaczne przypisanie wartości do nagłówków. Samo zmniejszenie czcionki nie rozwiązuje problemu, jeśli tekst staje się trudny do odczytania lub kolumny nadal przekraczają szerokość ekranu.

Listy wymagają sprawdzenia odstępów, wcięć, numeracji i elementów dodatkowych. Długa pozycja powinna mieć możliwość zawijania, a ikona lub przycisk nie powinny wypychać tekstu poza kontener. W przypadku listy funkcji albo parametrów często czytelniejszy jest układ dwóch bloków: nazwa po lewej i opis poniżej lub obok, zależnie od szerokości ekranu. Przydatne jest także testowanie powiększenia strony, orientacji poziomej i pionowej oraz dużych rozmiarów czcionki. Układ, który działa tylko przy standardowej skali widoku, może nadal być nieczytelny dla osoby korzystającej z powiększenia systemowego lub przeglądarkowego.

Sprawdzenie strony i wpływ błędnego układu na pracę komputera

Diagnostyka nieczytelnych tabel i list zaczyna się od porównania wyglądu strony na kilku szerokościach okna. Należy sprawdzić, czy poziomy pasek przewijania dotyczy tylko konkretnego elementu, czy całego dokumentu, a następnie ustalić, który element ma nadmierną szerokość. W narzędziach deweloperskich przeglądarki można obserwować model pudełkowy elementu, jego szerokość, marginesy, dopełnienia oraz reguły CSS odpowiedzialne za przepełnienie. Warto również sprawdzić obrazy, przyciski, pola formularzy i osadzone ramki, ponieważ tabela lub lista może być tylko elementem wypchniętym przez szerszy komponent.

Sam problem układu strony nie oznacza uszkodzenia laptopa ani komputera PC, ale może być mylony z problemem wyświetlania. Jeżeli wszystkie strony są przesunięte, obraz jest powiększony, część pulpitu znika albo zmiana rozdzielczości wpływa na cały system, trzeba dodatkowo sprawdzić ustawienia skalowania, sterownik grafiki, rozdzielczość ekranu i działanie konkretnej przeglądarki. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, dlatego w razie wątpliwości można zlecić sprawdzenie, czy źródłem problemu jest strona internetowa, konfiguracja systemu, przeglądarka czy sprzęt odpowiedzialny za wyświetlanie obrazu.