złe działanie dashboardu na tabletach

Złe działanie dashboardu na tabletach wynika z braku responsywności interfejsu dla ekranów pośredniej wielkości.

Dlaczego dashboard traci układ na ekranie tabletu

Złe działanie dashboardu na tabletach najczęściej wynika z niepełnej responsywności interfejsu. Dashboard jest aplikacją lub stroną prezentującą zestawienie danych, wykresów, tabel, filtrów i elementów sterujących. Jeżeli jego układ został zaprojektowany głównie dla szerokiego monitora albo małego ekranu telefonu, tablet może trafić w zakres szerokości, dla którego nie przygotowano osobnych reguł układu. Ekran pośredniej wielkości nie zachowuje się wtedy poprawnie ani jak komputer, ani jak telefon.

Podstawowym parametrem jest szerokość obszaru widoku, czyli viewportu. Nie zawsze odpowiada ona fizycznym wymiarom wyświetlacza, ponieważ znaczenie mają także orientacja urządzenia, skalowanie interfejsu, gęstość pikseli oraz sposób wyświetlania strony przez przeglądarkę. Dashboard może więc otrzymać inną szerokość dostępną dla treści po obróceniu tabletu z układu pionowego do poziomego. Jeżeli komponenty mają ustawione stałe szerokości, elementy zaczynają nachodzić na siebie, są obcinane albo wymuszają przewijanie całej strony w poziomie.

Objawy błędnych reguł responsywnych

Charakterystycznym objawem jest niewłaściwe rozmieszczenie kart z informacjami. Kilka kart może pozostać w jednym wierszu mimo braku miejsca, przez co tekst zostaje zawinięty w nieczytelny sposób, wartości są ukryte, a przyciski wychodzą poza kontener. W tabelach pojawia się poziomy przewijak, ale nie zawsze obejmuje on całą tabelę. Czasem nagłówki kolumn pozostają nieruchome, podczas gdy dane przesuwają się oddzielnie, co utrudnia odczytanie, do której kolumny należy konkretna wartość.

Problemy mogą dotyczyć również wykresów. Biblioteka wykresów może obliczyć rozmiar podczas pierwszego załadowania widoku, a następnie nie przeliczyć go po zmianie orientacji urządzenia lub otwarciu panelu bocznego. W rezultacie wykres ma zbyt dużą szerokość, etykiety osi nachodzą na siebie, legenda zasłania dane albo obszar rysowania zostaje pusty. Podobnie może zachowywać się menu filtrów, które na dużym ekranie jest widoczne stale, ale na tablecie przykrywa zawartość dashboardu.

Nieprawidłowości często ujawniają się dopiero podczas obsługi dotykowej. Elementy interfejsu przygotowane z myślą o wskaźniku myszy mogą mieć zbyt mały obszar aktywny, a funkcje dostępne po najechaniu kursorem nie są oczywiste na ekranie dotykowym. Gest przewijania może zostać przechwycony przez wykres, tabelę lub panel, przez co użytkownik nie może swobodnie przesunąć całej strony. Błąd nie musi oznaczać awarii danych; często dotyczy wyłącznie sposobu ich prezentacji i sterowania.

Sprawdzanie widoku, stylów i zachowania komponentów

Diagnostykę należy rozpocząć od porównania dashboardu w kilku szerokościach viewportu oraz w obu orientacjach tabletu. W narzędziach deweloperskich przeglądarki można obserwować, czy aktywują się reguły CSS zapisane w media queries, czy kontenery zmieniają układ i czy elementy potomne mają możliwość zmniejszania się. Należy sprawdzić właściwości flexbox i CSS Grid, w szczególności minimalne szerokości elementów, sposób zawijania wierszy, wartości gap oraz zachowanie kolumn przy ograniczonej przestrzeni.

Ważne jest także wyszukanie stałych wymiarów zapisanych w stylach lub nadanych bezpośrednio przez skrypt. Stała szerokość karty, tabeli albo wykresu może działać prawidłowo na monitorze, lecz powodować przepełnienie na tablecie. Kontroli wymagają również elementy z pozycjonowaniem absolutnym, wysuwane panele, nagłówki przyklejone do krawędzi oraz kontenery z właściwością overflow. Samo ukrycie poziomego przewijania nie rozwiązuje problemu, ponieważ może tylko zamaskować obcięte dane.

Osobno należy przeanalizować moment obliczania wymiarów. Komponent ładowany w ukrytej zakładce, zwiniętym panelu albo niegotowym kontenerze może otrzymać szerokość równą zeru lub wartość nieaktualną. Po zmianie orientacji powinien zostać wykonany ponowny pomiar i przerysowanie elementu, o ile dana biblioteka tego wymaga. Trzeba również sprawdzić, czy błędny wygląd występuje po zmianie filtrów, odświeżeniu danych i przewinięciu strony. Takie porównanie pozwala odróżnić problem stylów od błędu w logice renderowania.

Przywrócenie czytelności dashboardu na tablecie

Naprawa polega na zaprojektowaniu układu dla rzeczywistego zakresu dostępnej szerokości, a nie na zmniejszeniu całej zawartości. Karty powinny przechodzić do kolejnych wierszy, kolumny tabeli muszą mieć określony sposób przewijania lub reorganizacji, a wykresy powinny korzystać z kontenera, którego rozmiar zmienia się razem z widokiem. Reguły responsywne należy dobierać na podstawie momentu, w którym treść przestaje być czytelna, zamiast przypisywać tabletowi z góry jeden sztywny układ.

W przypadku paneli bocznych użyteczne może być przejście z widocznego stale panelu do kontrolki otwierającej filtry. Nie powinno to jednak powodować utraty wybranych wartości ani zasłaniać głównego wykresu. Przyciski, pola wyboru i przełączniki muszą działać bez polegania na najechaniu kursorem. Dla tabel warto przewidzieć jednoznaczny sposób wskazania, że można przewijać zawartość poziomo, a dla wykresów — ponowne dopasowanie po zmianie orientacji i rozmiaru kontenera.

Po zmianach konieczne jest sprawdzenie dashboardu z różnymi zestawami danych, ponieważ długość etykiet, liczba kolumn i zakres wartości wpływają na układ. Test powinien obejmować ładowanie początkowe, zmianę filtrów, rozwijanie szczegółów, obrót urządzenia, otwieranie klawiatury ekranowej oraz powrót z innej zakładki. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a w przypadku problemu z dashboardem można rozdzielić usterkę sprzętową od nieprawidłowego działania oprogramowania.