Blog SITEIMPULSE RSS

Dlaczego strona internetowa wygląda inaczej na różnych ekranach? (i co z tym począć)

17-06-2014, Kategoria Web Design

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.

galeria
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.

wykres1
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.

wykres2
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.

static-1366x768
układ o stałej szerokości, 1366×768
static-1440x900
układ o stałej szerokości, 1440×900
static-1024x768
układ o stałej szerokości, 1024×768
static-480x800
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.

liquid-1366x768
układ płynny, 1366×768
liquid-1440x900
układ płynny, 1440×900
liquid-1024x768
układ płynny, 1024×768
liquid-480x800
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.

adaptive-1366x768
układ adaptywny, 1366×768
adaptive-1440x900
układ adaptywny, 1440×900
adaptive-1024x768
układ adaptywny, 1024×768
adaptive-480x800
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.

responsive-1366x768
układ responsywny, 1366×768
responsive-1440x900
układ responsywny, 1440×900
responsive-1024x768
układ responsywny, 1024×768
responsive-480x800
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:

  1. 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.
  2. 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 🙂

Dodawanie komentarza

Ta strona wykorzystuje pliki typu cookie. Jeżeli nie wyrażasz zgody na ich zapisywanie, wyłącz ich obsługę w ustawieniach swojej przeglądarki. zamknij
Przeczytaj poprzedni wpis:
Jak znaleźć ludzi chętnych do udostępniania treści z naszego bloga?

Jest to gościnny post napisany przez naszych przyjaciół z Salt Lake City, nawiązujący do naszego poprzedniego postu: "Blog firmowy –...

Zamknij