Dlaczego strona internetowa wygląda inaczej na różnych ekranach? (i co z tym począć)
Monitory stacjonarne, laptopy, netbooki, tablety, smartfony a nawet telewizory. Tyle urządzeń a każde z nich występuje w wielu wersjach o różnej wielkości wyświetlacza. W przypadku urządzeń mobilnych w grę wchodzi jeszcze orientacja (pion/poziom).
Weźmy jeszcze pod uwagę fakt, że przecież nie ma obowiązku korzystania z przeglądarki internetowej w zmaksymalizowanym oknie. I w ten sposób uzyskujemy niewyobrażalną liczbę wielkości okna, w jakim może być wyświetlana strona WWW.
Autor zdjęcia: Robert Couse-Baker
Przeglądarki
Dodatkowym utrudnieniem są różnice w implementacji standardów internetowych przez producentów przeglądarek. Jest ich całkiem sporo, ale aktualnie liczy się 5 marek, które zdominowały wspólnie 90% rynku: Firefox, Chrome, Internet Explorer, Opera, Safari.
Na szczęście, z wersji na wersję różnice maleją i te obserwowane pomiędzy najnowszymi wersjami przeglądarek nie stanowią już dużego kłopotu dla web developerów. Co nie znaczy, że można je zignorować.
Ale w tą kwestię nie będziemy się zagłębiać przyjmując, że webmaster czy agencja po prostu musi sobie z tym poradzić.
Rozdzielczości
Popularność poszczególnych rozdzielczości (rozmiarów w pikselach) ekranu zmienia się wraz z rozwojem technologii. Przez długie lata królowała 1024×768, ale jesienią 2011 roku oddała koronę rozdzielczości 1366×768, która utrzymuje się na pierwszym miejscu do dzisiaj – z całkiem sporą przewagą nad drugim miejscem, które w praktyce zajmują ex aequo 1280×800 i 1280×1024.
Najpopularniejsze rozdzielczości w latach 2007-2014. Źródło: gemiusRanking
Ale przy budowie stron internetowych o stałej szerokości (patrz rozdział „Projektowanie” poniżej) nie bierze się pod uwagę najbardziej popularnej rozdzielczości, tylko najniższą rozdzielczość, która wciąż jest w powszechnym użytku.
Do końca 2007 roku była to rozdzielczość 800×600 pikseli i budowane w tym czasie strony miały szerokość około 750px. Na współczesnych ekranach o szerokości 1300 pikseli i więcej takie strony wyglądają zabawnie – pozostawiając olbrzymie marginesy po bokach strony.
W 2008 roku pałeczkę rozdzielczości minimalnej przejęła 1024×768 i strony o stałej szerokości „urosły” do około 960 pikseli.
„Życie” rozdzielczości 1024×768 zostało przedłużone przez netbooki oraz tablety i jej udział wciąż utrzymuje się powyżej 5%. Część twórców WWW wciąż stara się „zmieścić” w 960 pikselach, inni postanowili już zignorować takie ekrany i celuje w około 1200px.
25 najpopularniejszych rozdzielczości w maju 2014. Źródło: gemiusRanking
Ekrany mobilne
W kategorii urządzeń mobilnych (tablety i smartfony) obserwujemy wyścig technologiczny w kierunku upchania jak największej liczby pikseli na jak najmniejszej przestrzeni. W ten sposób pojawiają się 5-calowe ekrany z rozdzielczością FullHD (1080x1920px), czyli przewyższającą wiele monitorów „dorosłych” komputerów.
Na szczęście tak wysoka gęstość pikseli ma zastosowanie głównie w video i fotografii – strony internetowe wyświetlane są „w powiększeniu” – są automatycznie skalowane do szerokości zdefiniowanej w jej kodzie (viewport). W ten sposób, na ekranie o szerokości 1080 pikseli strona mobilna tworzona z myślą o szerokości 320px zostanie odpowiednio „rozciągnięta” i będzie wyglądać dobrze.
Projektowanie
Jak zbudować stronę internetową, żeby wyglądała dobrze w każdej rozdzielczości?
Dodam, że „dobrze” nie oznacza tu bynajmniej „tak samo”.
Istnieją 4 główne podejścia do projektowania – układu elementów na stronie internetowej:
Układ o stałej szerokości
Wspomniany wcześniej – najprostszy i najbardziej popularny układ, w którym strona ma stałą szerokość, niezależnie od wielkości okna przeglądarki.
Projektujący ma pewność, że strona się nie zmienia. W wyższych rozdzielczościach niż wyjściowa strona wygląda dobrze, ale nie wykorzystuje optymalnie całej dostępnej przestrzeni – im większa szerokość okna, tym większe marginesy po bokach.
Gorzej w niższych szerokościach niż wyjściowa – strona po prostu nie mieści się na ekranie.

układ o stałej szerokości, 1366×768

układ o stałej szerokości, 1440×900

układ o stałej szerokości, 1024×768

480×800
Układ płynny
Szerokości elementów nie są określone w pikselach tylko procentowo, strona „rozciąga” się na całą szerokość ekranu. To bardzo proste (nie „inteligentne”) dostosowywanie się do wielkości okna, więc efekt końcowy jest bardzo różny.
To dobry układ dla projektów ubogich w grafikę – np. dla forów internetowych.

układ płynny, 1366×768

układ płynny, 1440×900

układ płynny, 1024×768

480×800
Układ adaptywny
To tak naprawdę zestaw kilku osobnych układów (na przykład 5), przygotowanych dla różnych rozdzielczości. W zależności od szerokości okna, wczytywany jest inny szablon – przypisany do określonego zakresu szerokości.

układ adaptywny, 1366×768

układ adaptywny, 1440×900

układ adaptywny, 1024×768

480×800
Układ responsywny
Responsive Web Design (RWD) to bardziej zaawansowana technika, dająca najlepsze efekty i rekomendowana nawet przez Google. Jest połączeniem układu adaptywnego i płynnego – składa się z kilku osobnych układów, z których każdy w obrębie określonego zakresu szerokości jest płynny.

układ responsywny, 1366×768

układ responsywny, 1440×900

układ responsywny, 1024×768

480×800
Wykorzystane powyżej ilustracje poszczególnych układów w różnych rozdzielczościach pochodzą ze strony liquidapsive.com, na której możesz „na żywo” zobaczyć różnice pomiędzy układami.
Praktyka
W praktyce najczęściej spotykane są następujące trzy rozwiązania:
- układ o stałej szerokości, czyli zupełne zignorowanie użytkowników mobilnych
- układ adaptywny, składający się z 2-4 zestawów szablonów:
- dla komputerów
- dla smartfonów
- dla tabletów w układzie pionowym (nie zawsze)
- dla tabletów w układzie poziomym (rzadko, ponieważ w tej sytuacji często serwowana jest wersja dla komputerów)
- układ responsywny.
Testowanie
Najprostszym sposobem na sprawdzenie, jak zachowuje się strona w różnych rozdzielczościach jest otwarcie jej na komputerze wyposażony w monitor o stosunkowo wysokiej rozdzielczości a następnie stopniowe zmniejszanie szerokości okna przeglądarki.
Niestety w ten sposób nie zawsze uda się sprawdzić wygląd strony na urządzeniach mobilnych – układ adaptywny (a czasem również responsywny) serwuje odpowiednie szablony często nie tylko na podstawie szerokości okna ale również w oparciu o informacje o przeglądarce (wykrywanie urządzeń mobilnych).
Mało kto dysponuje wieloma rodzajami urządzeń i to z różnymi wielkościami wyświetlaczy – tutaj z pomocą przychodzą wyspecjalizowane aplikacje takie jak Browserstack.
Decyzje
Wybór rozwiązania (układu) wbrew pozorom nie jest trudny – zależy od sytuacji wyjściowej.
Przede wszystkim – zapomnij o układzie o stałej szerokości. Już teraz ponad 10% całego ruchu internetowego jest generowane przez urządzenia mobilne a liczba ta dynamicznie rośnie. Nikt nie może sobie pozwolić na ignorowanie mobile.
Czysty układ płynny (jeden zestaw szablonów) możesz wykorzystać w przypadku serwisów czysto tekstowych – aplikacji, paneli administracyjnych itd. Ale nawet tam nie będzie on idealny, ponieważ nawigacja, która jest wygodna w obsłudze na komputerze, rzadko sprawdzi się na urządzeniu mobilnym.
Układ adaptywny (czyli różne szablony dla różnych zakresów szerokości) poleciłbym Ci w dwóch sytuacjach:
- Jeżeli w Twoim serwisie forma jest równoważna (albo ważniejsza) treści – kreacja zawiera dużo grafiki i położenie każdego elementu względem innych ma kluczowe znaczenie. Wtedy po prostu musisz zachować pełną kontrolę nad każdym układem, co do piksela.
- Twój serwis obecnie nie obsługuje urządzeń mobilnych, ale wersja na komputery jest w porządku i nie chcesz jej zmieniać. Wtedy możesz po prostu dobudować wersje mobilne jako alternatywne zestawy szablonów.
We wszystkich pozostałych sytuacjach, budując serwis internetowy od nowa, nie wahaj się i pójdź drogą responsywną. Wdrożenie skonsumuje ona trochę czasu i kosztów, ale efekt odpłaci się dobrym wyglądem i łatwą obsługą na każdym urządzeniu.
Komentarze (1)
sabur 11-09-2017 napisał(a):
Dobry artykuł, świetnie przedstawia problem 🙂