Kupujemy nowy telefon, przenosimy dane, otwieramy ulubiony portal informacyjny i nagle coś wydaje się nie tak. Przycisk, który zawsze był pod kciukiem, teraz jest nieco wyżej. Zdjęcie, które na starym urządzeniu wypełniało cały ekran, tutaj ma dziwne puste marginesy po bokach. Nawet kolory wydają się inne – bardziej nasycone lub przeciwnie, nienaturalnie blade. To nie jest błąd w działaniu urządzenia ani awaria strony internetowej. To fascynujący efekt uboczny tego, jak skomplikowanym organizmem stał się współczesny internet.
Zrozumienie, dlaczego ta sama strona wygląda inaczej na dwóch różnych telefonach, wymaga spojrzenia pod maskę technologii, którą nosimy w kieszeni. Nie chodzi tylko o to, że jeden ekran jest większy od drugiego. Diabeł tkwi w szczegółach: w tym, jak procesor interpretuje kod, jak przeglądarka zarządza obrazem i jak producenci sprzętu definiują to, co nazywamy pikselem.
Piksel pikselowi nierówny
Największym mitem dotyczącym ekranów jest przekonanie, że rozdzielczość podawana w specyfikacji (np. 1080×2400) bezpośrednio przekłada się na to, ile treści zobaczymy. W rzeczywistości świat technologii mobilnych posługuje się dwoma rodzajami pikseli: fizycznymi i logicznymi.
Piksele fizyczne to te mikroskopijne punkciki na matrycy, które świecą. Z kolei piksele logiczne (często nazywane punktami lub dp) to jednostki, których używają programiści do projektowania wyglądu strony. Gdyby strona internetowa wyświetlała się w skali 1:1 względem pikseli fizycznych na nowoczesnym telefonie z ekranem o ogromnym zagęszczeniu punktów, tekst byłby tak mały, że potrzebowalibyśmy lupy, aby go przeczytać. Dlatego telefony stosują skalowanie.
Dwa telefony o identycznej przekątnej ekranu mogą mieć różne Device Pixel Ratio (DPR), czyli współczynnik mówiący o tym, ile fizycznych pikseli składa się na jeden piksel logiczny. Jeśli jeden telefon ma współczynnik 2, a drugi 3, ta sama grafika o szerokości 300 pikseli może zająć fizycznie inną przestrzeń na ekranie, co wpływa na ogólny odbiór kompozycji strony. To właśnie dlatego na jednym urządzeniu widzimy pięć linijek tekstu, a na drugim, o niemal identycznych wymiarach, mieści się ich siedem.
Przeglądarka jako tłumacz kodu
Strona internetowa to w uproszczeniu zestaw instrukcji napisanych w językach HTML i CSS. Przeglądarka internetowa (jak Chrome, Safari czy Samsung Internet) pełni rolę tłumacza. Problem polega na tym, że każdy tłumacz ma swój styl i nieco inaczej interpretuje te same zdania.
Sercem każdej przeglądarki jest silnik renderujący. W świecie Apple (iPhone) króluje silnik WebKit. W świecie Androida większość przeglądarek opiera się na silniku Blink (część projektu Chromium). Choć oba dążą do standardów, istnieją subtelne różnice w tym, jak obliczają one marginesy, jak wygładzają czcionki czy jak radzą sobie z nowoczesnymi efektami wizualnymi, takimi jak rozmycia czy cienie. W efekcie ten sam przycisk może mieć nieco inne zaokrąglenie rogów lub minimalnie inny odcień cienia na Safari niż na Chrome.
Co więcej, producenci telefonów często dodają własne nakładki na przeglądarki. Samsung Internet czy przeglądarki wbudowane w telefony Xiaomi mogą mieć własne ustawienia optymalizacji, które wymuszają na stronach określone zachowania, np. automatyczne powiększanie tekstu, jeśli algorytm uzna go za zbyt mały dla użytkownika.
Proporcje ekranu i nieszczęsne wycięcia
Kiedyś sprawa była prosta: telefony miały ekrany o proporcjach 16:9. Dzisiaj mamy do czynienia z prawdziwą dżunglą: 19:9, 20:9, a nawet 21:9 w przypadku niektórych modeli. To sprawia, że strony internetowe muszą być responsywne (RWD – Responsive Web Design), czyli elastyczne jak guma.
Projektant strony ustala tzw. punkty kontrolne (breakpoints). Na przykład: „jeśli ekran jest szerszy niż 400 pikseli, wyświetl zdjęcia w dwóch kolumnach, jeśli węższy – w jednej”. Jeśli jeden telefon ma 395 pikseli szerokości logicznej, a drugi 405 pikseli, użytkownicy zobaczą zupełnie inny układ strony, mimo że trzymają w dłoniach urządzenia, które wizualnie wydają się niemal identyczne.
Do tego dochodzą elementy konstrukcyjne: notche (wycięcia na aparat), dziurki w ekranie oraz zaokrąglone rogi. Przeglądarki muszą decydować, czy pozwolić stronie „wejść” pod aparat, czy raczej dodać bezpieczne marginesy (tzw. safe areas). iPhone z dużym wycięciem na FaceID wymusi na stronie inne marginesy boczne w trybie poziomym niż telefon z małym oczkiem aparatu na środku, co kompletnie zmienia sposób, w jaki rozkłada się treść.
Technologia matrycy a percepcja kolorów
Nawet jeśli układ elementów jest identyczny, strona może wyglądać inaczej ze względu na samą technologię wyświetlacza. Mamy dwa główne obozy: LCD (IPS) oraz OLED (w tym AMOLED).
Ekrany OLED potrafią całkowicie wyłączyć poszczególne piksele, uzyskując idealną czerń. Ekrany LCD zawsze muszą być podświetlone od spodu, więc czerń jest tam raczej bardzo ciemnym szarym. To sprawia, że strony w tzw. trybie ciemnym (Dark Mode) wyglądają na ekranach OLED znacznie bardziej kontrastowo i efektownie.
Dodatkowo każdy producent kalibruje ekrany inaczej. Samsung często stawia na bardzo żywe, nasycone barwy (tryb żywy), podczas gdy Apple celuje w bardziej naturalne, stonowane odcienie (standard P3). Istnieje też funkcja taka jak True Tone w iPhone’ach, która dostosowuje temperaturę barwową ekranu do oświetlenia w pokoju. Jeśli czytasz tę samą stronę na iPhone z włączonym True Tone przy żółtej żarówce i na telefonie z Androidem z ustawionym trybem chłodnym, białe tło strony na jednym będzie kremowe, a na drugim lekko niebieskawe.
Ustawienia użytkownika – czynnik ludzki
Często zapominamy, że sami mamy ogromny wpływ na to, jak wyglądają strony. Systemy operacyjne pozwalają na zmianę rozmiaru systemowej czcionki. Jeśli w ustawieniach telefonu ustawiliśmy czcionkę na „dużą”, większość nowoczesnych przeglądarek automatycznie powiększy tekst na wszystkich stronach internetowych.
To powoduje reakcję łańcuchową: większy tekst zajmuje więcej miejsca, więc nagłówki, które miały mieścić się w jednej linii, nagle łamią się do dwóch. To z kolei spycha zdjęcia niżej, a przyciski menu mogą zacząć na siebie nachodzić. To, co dla jednej osoby jest czytelnym artykułem, dla innej, z powiększoną czcionką, staje się długą listą elementów do przewijania.
Warto też wspomnieć o trybach oszczędzania danych lub oszczędzania energii. Niektóre telefony, gdy poziom baterii jest niski, mogą ograniczać pobieranie grafik w wysokiej rozdzielczości lub wyłączać skomplikowane animacje na stronach, aby odciążyć procesor. W efekcie strona staje się bardziej surowa i statyczna.
Dlaczego to w ogóle jest dopuszczalne?
Można by pomyśleć, że w idealnym świecie każda strona powinna wyglądać wszędzie tak samo. Jednak w rzeczywistości ta różnorodność jest siłą internetu. Filozofia Progressive Enhancement (stopniowe ulepszanie) zakłada, że treść powinna być dostępna dla każdego, niezależnie od tego, czy ma telefon za 500 zł z ciemnym ekranem LCD, czy najnowszego flagowca za 6000 zł.
Strona internetowa nie jest sztywnym obrazkiem jak plik PDF czy wydrukowana gazeta. Jest bardziej jak płyn, który wlewa się do naczynia, jakim jest Twój telefon. Przyjmuje jego kształt, dostosowuje się do jego ograniczeń i wykorzystuje jego atuty. Choć różnice w wyglądzie mogą nas czasem dziwić, są one dowodem na to, że sieć jest żywym, elastycznym organizmem, który stara się dostarczyć nam informacje w najlepszy możliwy sposób, biorąc pod uwagę narzędzie, którym się w danej chwili posługujemy.
Następnym razem, gdy zauważysz, że strona u znajomego wygląda inaczej, nie szukaj błędu. To po prostu technologia, która w ułamku sekundy podjęła tysiące decyzji, by dopasować kod do konkretnego kawałka szkła i metalu, który trzymasz w dłoni.
