Mateusz Sychowski Dla współczesnych Internautów przeglądanie stron WWW na laptopie, smartfonie czy tablecie jest zupełnie naturalne. Standardowo przyjmuje się, że serwis będzie dobrze wyglądać i poprawnie się wyświetlać zarówno na małych ekranach kieszonkowych urządzeń mobilnych, jak i na ekranie komputera. Jednak - jak to bardzo często bywa w branży nowoczesnych technologii - stworzenie czegoś, co jest proste i oczywiste dla użytkownika, wymaga jednocześnie wielu bardzo zaawansowanych prac ze strony projektantów, programistów oraz developerów. Co ciekawe - tak oczywiste zjawisko, jak dobry wygląd tej samej strony WWW zarówno na smartfonie, jak i na laptopie albo wielkocalowym monitorze z dużą rozdzielczością, to efekt połączenia dwóch naprawdę skomplikowanych technologii: skalowania serwisu oraz responsywności.
Czym tak naprawdę różnią się od siebie małe i duże ekrany?
Wymiary (w calach)
Podstawowa różnica pomiędzy ekranami to wielkość, którą najczęściej mierzy się po przekątnej i podaje w calach (1 cal = 2,54 cm). Alternatywnie można podać również zewnętrzne wymiary ekranu w mm.
Rozdzielczość (w pikselach)
Z punktu widzenia grafiki czy tekstu wyświetlającego się na ekranie, równie ważnym parametrem jest rozdzielczość, czyli liczba pikseli w pionie i w poziomie. Poszczególne piksele pozostają dla naszego oka praktycznie niewidoczne (choć mocno zbliżając twarz do ekranu można zobaczyć ich charakterystyczną, drobną "siateczkę"). Ponieważ jednak oglądamy je z dużej odległości, pojedyncze kolorowe “kwadraciki” stają się niewidoczne i tworzą jednolity obraz. Im są mniejsze i im więcej ich jest, tym lepiej odwzorowane będą wszystkie szczegóły obrazu - dokładnie tak samo, jak w przypadku mozaiki, która ma więcej szczegółów, jeśli tworzące ją elementy są drobniejsze.
Bodaj najpopularniejszą obecnie rozdzielczością, pozwalającą na wyświetlanie obrazu Full HD, jest 1920x1080 px. Natomiast wprowadzona kilka lat temu rozdzielczość 4K wynosi już ok. 3840×2160 px. Dziś nawet bardzo małe urządzenia (takie jak smartfony) oferują użytkownikom ogromną rozdzielczość, ponieważ piksele upakowane są gęsto, a obraz na niewielkim ekranie staje się dzięki temu ostry i wyraźny.
Proporcje (stosunek długości boków)
Trzecią zasadniczą różnicę pomiędzy ekranami - istotną w przypadku responsywnych projektów - stanowią ich proporcje. Obecnie najbardziej lubiany przez użytkowników jest układ panoramiczny (o proporcjach 16:9), ale na niektórych urządzeniach - np. tabletach, charakteryzujących się kształtem ekranu zbliżonym do kwadratu - lepiej sprawdza się układ 4:3.
Dlaczego skalowanie stron WWW jest potrzebne?
Podstawowy (bazowy) projekt strony tworzy się dla rozdzielczości 1920x1080 px (czyli typowej dla 23-24-calowych monitorów). Jednak aby gotowa strona wyglądała dobrze na ekranie innej wielkości, trzeba ją przeskalować, czyli zmienić jej rozdzielczość.
Wyobraźmy sobie duży ekran komputera i mały ekran smartfona, na którym ustawiona byłaby taka sama rozdzielczość: 1920x1080 px. Na ekranie komputera typowy tekst - o wielkości np. 12 pikseli - byłby bardzo dobrze widoczny. Natomiast na ekranie smartfona piksele byłyby wielokrotnie mniejsze, a więc tekst o rozmiarze 12 pikseli stałby się całkowicie nieczytelny. Zatem: gdyby skalowanie nie istniało, na smartfonach widzielibyśmy stronę dokładnie tak samo, jak na komputerze - z tym że strona ta byłaby miniaturowa, czcionka miałaby wysokość na przykład 1mm, a większe elementy (jak nagłówki albo przyciski) - około 2mm.
- Obraz 1: tak wygląda skalowana strona, wyświetlana na trzech różnych urządzeniach: laptopie w rozdzielczości FullHD ze skalą 100% (czyli bez skalowania), a także na tablecie i smartfonie.
Na czym polega skalowanie strony WWW?
Skalowanie polega na zmianie rozdzielczości ekranu, ale jedynie przy wyświetlaniu strony internetowej, czyli bez zmiany globalnych ustawień dla komputera, smartfona czy tabletu. Przeskalowanie wykonuje zatem przeglądarka internetowa zarządzana przez system operacyjny, ponieważ ma ona wbudowane mechanizmy pozwalające na zwiększenie widoczności i czytelności witryny.
Dzięki temu - choć ekran nowoczesnego smartfona utrzymuje przez cały czas swoją bardzo dużą rozdzielczość, np. 1920x1080 px - można wyświetlić na nim stronę internetową tak, jakby ekran miał zaledwie 640x360 px - dzięki czemu piksele są znacznie większe, teksty wyraźniejsze, a przyciski łatwiejsze do kliknięcia. Warto pamiętać, że skalowanie na flagowych telefonach z wysokimi rozdzielczościami sięga obecnie aż 300%! Aby lepiej wyobrazić sobie, jak wygląda efekt skalowania, możesz przyjąć, że każde rzeczywiste 3x3 piksele na ekranie smartfona to “nowy” 1x1 piksel.
Tablety wymagają przeskalowania serwisu o 150%. To oznacza, że strona zaprojektowana dla podstawowej rozdzielczości 1920x1080 px będzie wyświetlana na ekranie tabletu tak, jak gdyby miał on rozdzielczość 1280x720 px.
Natomiast w przypadku małych laptopów wystarczy z reguły przeskalowanie strony o 125% - czyli z 1920x1080px na 1512x982px. Przypomnijmy, że wszystko odbywa się automatycznie w przeglądarce, która ma włączone skalowanie stron, aby użytkownik już nie musiał samodzielnie manipulować wielkością fontów. Warto jednak pamiętać, że ustawienia skalowania na laptopach z preinstalowanym systemem Windows (tzn. takich, które kupowane są już z zainstalowanym systemem) mogą być inne u każdego producenta sprzętu i zależne od wytycznych stosowanych przez konkretną firmę.
Strona responsywna ze skalowaniem
Strona nieresponsywna / bez skalowania
- Obraz 2 przedstawia skalowaną stronę na laptopie o rozdzielczości FullHD ze skalą 125%. Przy szerszej stronie mogłaby ona zmienić układ, tu akurat wystarczyło miejsca, datego strona zmniejszyła jedynie marginesy zewnętrzne, a kontent jest odpowiednio większy. Obok widać tę samą stronę prezentowaną na tablecie i smartfonie.
- Obraz 3 przedstawia skalowaną stronę nieresponsywną (na tablecie i smartfonie), a także responsywną stronę bez skalowania (na laptopie).
Jakie są zalety skalowania stron?
Podsumujmy najważniejsze zalety i cele skalowania stron WWW:
- Pozwala ono zmniejszyć teoretyczną rozdzielczość nawet trzykrotnie. Daje to możliwość dostosowania strony indywidualnie do różnych urządzeń.
- Sprawia, że strona będzie czytelna dla użytkownika nawet na małych ekranach urządzeń mobilnych.
- Eliminuje konieczność przesuwania strony przy użyciu pasków przewijania.
- Daje osobom niedowidzącym możliwość sprawnego przeglądania zawartości stron internetowych.
Jakie są wady skalowania stron? Kiedy warto wyłączyć skalowanie?
- Jeśli przekroczymy pewien próg szerokości ekranu przeglądarki, finalny wygląd strony WWW na skalowanym ekranie może się różnić od tego, jak miała ona wyglądać według planów (czyli na projekcie). Sytuacja taka pojawia się zwłaszcza jeśli użytkownik ogląda stronę na bardzo dużym ekranie. Najczęściej dotyczy to projektów, które mają zaplanowane wypełnienie większości lub całości ekranu po szerokości.
- W wyniku skalowania poszczególne elementy strony mogą wydawać się większe, niż są w rzeczywistości - ponieważ skalowanie powiększa je w sposób sztuczny.
Aby dokładniej to wytłumaczyć, wróćmy do wskazanego wcześniej przykładu strony wyświetlanej na ekranie małego laptopa, z włączonym skalowaniem o 125%. Na takich ekranach strona zbudowana na kontenerze o szerokości mniejszej niż 1512 px wyświetli się niemal tak samo ze skalowaniem, jak i bez - po prostu marginesy boczne zostaną zredukowane do zera. Natomiast strona z większym kontenerem niż 1512 px, przy skalowaniu w tych samych warunkach, będzie wyglądała już całkiem inaczej, niż strona na bez skalowania. Oczywiście w obu przypadkach teksty i pozostała zawartość strony zostaną powiększone o 25%.
Skalowanie a responsywność
Skalowanie pozwala dopasować stronę WWW do mniejszych ekranów, ale nie tylko ono decyduje o tym, że dany serwis dobrze wygląda na każdym urządzeniu. Drugim kluczowym standardem jest responsywność projektu.
Responsywne projektowanie stron (ang. Responsive Web Design, czyli RWD) polega na przygotowaniu serwisu w taki sposób, aby był on użyteczny i wygodny dla użytkowników wielu typów urządzeń. To ważne, bo oprócz różnej wielkości i rozdzielczości ekranów, mamy też - jak pamiętasz z początku tego artykułu - różne proporcje ekranów (jedne są podłużne, inne zbliżają się do kwadratu).
Zwróć uwagę, że kiedy przeglądasz znane i dobrze zaprojektowane serwisy np. na telefonie, ich wygląd zmienia się. Nie chodzi tu tylko o powiększenie napisów czy przycisków (bo za to odpowiada skalowalność), ale o zmianę układu treści. Jeśli na dużym ekranie widzisz obok siebie trzy kafelki, na ekranie smartfona zobaczysz prawdopodobnie zaledwie jeden z nich, a następne ułożone będą kolejno pod spodem, jeden pod drugim. Na pierwszym miejscu powinna znaleźć się najistotniejsza treść, a w dalszej kolejności - ta mniej ważna. Podobnie dzieje się z formularzami lub wyszukiwarkami - element, który na monitorze komputera zajmuje stosunkowo niewielką przestrzeń, na telefonie może zająć nagle całą szerokość jednego z ekranów - i nie będzie to przypadek, ale świadome działanie projektanta, podyktowane celami biznesowymi danej strony!
Warto pamiętać, że fakt, czy dana strona jest responsywna, ma wpływ na jej pozycję na liście wyników wyszukiwania na urządzeniach mobilnych. Czyli: jeśli Twoja strona nie jest przygotowana do wyświetlania na smartfonach lub tabletach, Google nie kwapi się zbytnio do pokazania jej użytkownikom mobilnej wyszukiwarki.
Jak projektuje się strony WWW, aby wyświetlały się dobrze na każdym ekranie?
W ALFA BRAVO naszym standardem jest przygotowywanie każdej strony internetowej tak, by była ona responsywna i przystosowana do skalowania w różnych przeglądarkach. Korzystamy przy tym z najlepszych wypracowanych obecnie standardów oraz szeregu narzędzi (w tym predefiniowanych stylów CSS), które gwarantują pełną zgodność ze wszystkimi popularnymi wielkościami ekranów, systemami operacyjnymi (Windows, macOS, Linux, a także Android oraz iOS), czy przeglądarkami internetowymi. Ogromną zaletą projektowania w oparciu o profesjonalne narzędzia jest znaczne skrócenie czasu potrzebnego na przygotowanie responsywnych, skalowalnych wersji serwisu, a co za tym idzie - znaczne ograniczenie kosztów tej części prac oraz zagwarantowanie zgodności z każdą popularną platformą sprzętową. Mówiąc obrazowo: zamiast wyważać otwarte drzwi, koncentrujemy się wówczas na ważniejszych działaniach, w których żadne narzędzie nie jest w stanie zastąpić doświadczonego programisty i projektanta.
Oczywiście zgodność ze standardami nie wyklucza kreatywności. Predefiniowane narzędzia tworzą - dosłownie - pewne ramy dla stron WWW (tzw. kontenery), ale w zakresie projektu graficznego czy sposobu prezentacji treści mamy wciąż nieskończenie wiele możliwości. Na tym etapie liczą się już takie aspekty, jak UX/UI Design, odpowiadający za przyjazność strony dla użytkownika.
Czy to możliwe, że projekt strony, który akceptujesz, wygląda inaczej, niż w przeglądarce?
Na etapie akceptowania projektu strony WWW możesz odnieść wrażenie, że wygląda i "zachowuje" się ona inaczej, niż znane Ci serwisy internetowe. Tymczasem jest to zupełnie naturalne zjawisko - ale dlaczego tak się dzieje?
Gdy oglądasz projekt w programie graficznym
Kiedy wysyłamy do Ciebie projekt strony WWW, oglądasz go nie w przeglądarce internetowej, ale w aplikacji Adobe XD (służącej nam do projektowania layoutu stron). W programach graficznych nie ma potrzeby skalowania strony - ponieważ ważne jest przede wszystkim, aby zobaczyć grafikę w jej naturalnym rozmiarze. Dlatego kiedy powiększasz projekt, nie dopasowuje się on do wielkości ekranu, tylko zachowuje się dokładnie tak, jak powiększane zdjęcie. A jeśli ustawisz bardzo mocne powiększenie, na bokach ekranu pojawią się nawet suwaki do przewijania.
Gdy oglądasz podgląd stron w przeglądarce internetowej
Podczas procesu akceptowania strony WWW możesz zobaczyć każdą jej wersję - a więc zarówno tę przygotowaną pod kątem standardowych ekranów o rozdzielczości 1920x1080 px, jak wersje przeznaczone do oglądania na mniejszych ekranach:
- po przeskalowaniu o 125% - do rozdzielczości 1512x982 px - dla laptopów o mniejszych ekranach,
- po przeskalowaniu o 150% - do rozdzielczości 1280x720 px - dla tabletów,
- po przeskalowaniu o 300% - do rozdzielczości 640x360 px - dla smartfonów.
Kiedy oglądasz stronę na dużym ekranie, wersja 1920x1080 px wyświetla się prawidłowo (nie ma potrzeby skalowania). Jednak wszystkie pozostałe wersje serwisu (na mniejsze laptopy, tablety, smartfony) Twoja przeglądarka spróbuje przeskalować do odpowiednich rozmiarów ekranu. Nietrudno wyobrazić sobie, że w takiej sytuacji np. wersja strony na smartfona, oglądana na panoramicznym ekranie, będzie wyświetlać się jedynie jako bardzo mały skrawek okna, w dodatku z ogromnymi tekstami. Skalowanie zaczyna działać wówczas jakby "w odwrotnym kierunku", przez co "wariuje". To zresztą sztucznie wykreowany przypadek, bo w czasie normalnego przeglądania stron WWW nie istnieje szansa, aby użytkownik komputera zobaczył wersję przygotowaną na urządzenia mobilne.
Z tego względu, podczas przeglądania projektów strony WWW na potrzeby ich akceptacji, zalecamy tymczasowe wyłączenie skalowania w przeglądarce internetowej. Wówczas zobaczysz każdy z projektów w jego - mniej więcej - naturalnym rozmiarze.
- Obraz 4: porównanie responsywnej strony na tablecie ze skalowaniem (lewy tablet) i bez skalowania (prawy tablet).
