27. Dostosowywanie strony do urządzeń mobilnych

W poprzednim rozdziale ukończyliśmy pracę nad wersją naszej witryny przeznaczoną dla szerokich ekranów monitorów komputerowych. Przetestowaliśmy ją i nieskromnie stwierdziliśmy, że w tego typu urządzeniach nasze strony prezentują się znakomicie.

A jak wyglądają na mniejszych urządzeniach? Sprawdźmy to. Najlepszym sposobem jest oczywiście wyświetlenie strony na smartfonie, ale musielibyśmy ją wysłać na serwer i w swoim urządzeniu wpisać jej adres lub musielibyśmy podłączyć telefon do komputera, aby przesłać do niego stronę bezpośrednio.

Te metody są zbyt kłopotliwe, więc zadowolimy się znacznie prostszą metodą, która polega po prostu na zmianie rozmiaru okna przeglądarki lub użyciu specjalnych narzędzi dla programistów, które są dostępne we wszystkich popularnych przeglądarkach. Poniżej jest pokazana strona o Feynmanie wyświetlona w zmniejszonym oknie Firefoksa:

Już samo zmniejszenie okna przeglądarki ujawniło nam liczne problemy z naszą stroną, ale narzędzia dla programistów zawierają dodatkowe opcje, które mogą się przydać.

Narzędzia dla programistów przeglądarek

Jeśli prosta zmiana rozmiaru okna Ci nie wystarcza, możesz użyć narzędzi dla programistów przeglądarek internetowych. W większości z nich włącza się je naciśnięciem klawisza F12 lub klikając prawym przyciskiem myszy w dowolnym miejscu na stronie i z menu podręcznego wybierając opcję Zbadaj lub podobną.

Poniższy zrzut ekranu przedstawia na przykład okno narzędzi dla programistów Firefoksa:

Położenie okna narzędzi dla programistów można zmienić. W tym przypadku zostało umieszczone na dole okna przeglądarki. Zawiera ono wiele bardzo przydatnych narzędzi pomocnych w pracy nad stroną internetową, np. po lewej stronie znajduje się okienko z regułami CSS odnoszącymi się do elementu p, który został wybrany na stronie.

W tej chwili interesuje nas jednak coś innego – ikona przedstawiająca dwa urządzenia mobilne, znajdująca się w prawym górnym rogu tego okienka. Kiedy ją klikniesz, zostanie włączony symulator urządzeń mobilnych, taki jak widać na poniższej ilustracji:

Na górze okna znajdują się różne opcje, m.in. lista rozwijana pozwalająca wybrać konkretne urządzenie, które chcemy symulować, pola do wpisania wybranych szerokości i wysokości urządzenia czy przycisk do zmiany orientacji (na pionową lub poziomą).

Ten sposób symulowania rozmiaru urządzenia jest o tyle lepszy od poprzedniego, że nie zmusza nas do zmiany rozmiaru okna przeglądarki, w której pracujemy. Wybierz metodę, która Ci bardziej odpowiada.

Powyższe zrzuty ekranu dobitnie pokazują, że nasze strony nie wyglądają dobrze w urządzeniach mobilnych. Nawet na bardzo wąskim ekranie kolumny kontenera środkowego znajdują się obok siebie, przez co dla każdej z nich pozostaje za mało miejsca, elementy menu głównego się „pomieszały”, a co najgorsze, pojawił się pasek przewijania bocznego, który jest uważany za jedną z najgorszych możliwych rzeczy na stronach internetowych.

Koniecznie musimy poprawić te wszystkie aspekty albo każdy użytkownik smartfona, który wejdzie na naszą stronę, ucieknie z niej czym prędzej w popłochu.

Pracę zaczniemy od spełnienia pewnej obietnicy, która została złożona na początku tego kursu – w końcu wyjaśnię dokładnie, do czego służy element meta viewport.

Element meta viewport

Słowo viewport oznacza obszar widoku, czyli obszar w oknie przeglądarki, w którym jest widoczna treść strony internetowej. Czasami wyrenderowana strona jest większa od tego obszaru i wówczas przeglądarka wyświetla paski przewijania, aby umożliwić użytkownikowi obejrzenie całej treści (tak się stało też na naszej stronie).

Przeglądarki urządzeń mobilnych mają do dyspozycji niewielką powierzchnię obszaru widoku, więc w wielu z nich zaimplementowano algorytm generowania w pamięci specjalnego wirtualnego obszaru widoku (ang. virtual viewport) który zazwyczaj jest większy od rzeczywistego.

Taka przeglądarka najpierw renderuje stronę w wirtualnym obszarze widoku, a następnie ją zmniejsza i dopiero po tych zabiegach wyświetla ją w oknie. Ma to na celu zapewnić lepszy wygląd w urządzeniach mobilnych stron, które nie są do nich dostosowane.

Jeśli jednak strona jest już dostosowana do urządzeń mobilnych za pomocą tzw. zapytań medialnych, to ten wirtualny mechanizm tylko przeszkadza.

Powiedzmy na przykład, że ekran naszego urządzenia ma szerokość 500 pikseli, a jego przeglądarka generuje wirtualny obszar widoku o szerokości 800 pikseli. W takim przypadku specjalne reguły przeznaczone dla ekranów o szerokości do 800 pikseli nigdy nie zostaną zastosowane, ponieważ taka jest szerokość wirtualnego obszaru widoku.

Właśnie ten problem rozwiązuje znacznik meta viewport. Ma on wiele ustawień i parametrów, ale jeśli tworzysz stronę dostosowaną do urządzeń mobilnych, to w zdecydowanej większości przypadków wystarczy umieścić go w nagłówku dokumentu w następującej postaci:

<meta name="viewport" content="width=device-width, initial-scale=1">

Parametr width=device-width oznacza, że strona ma być renderowana zgodnie z szerokością urządzenia, a nie wirtualnego obszaru widoku, natomiast parametr initial-scale=1 oznacza, że ma być wyświetlona w skali 1 do 1, czyli ani powiększona ani pomniejszona.

Po umieszczeniu powyższego znacznika meta viewport w nagłówku dokumentu możemy przejść do dostosowywania naszej strony do urządzeń mobilnych. Służą do tego tzw. zapytania medialne.

Zapytania medialne

Zapytania medialne (ang. media queries) to wprowadzona w CSS3 technika, która umożliwia włączanie wybranych reguł CSS w zależności od tego czy są spełnione określone warunki dotyczące typu urządzenia i parametrów jego ekranu lub obszaru prezentacji treści.

Do tego celu używa się specjalnej reguły o nazwie @media, np.:

@media screen and (max-width: 768px) {…}

Ta reguła odnosi się do ekranów o szerokości do 768 pikseli.

Ogólna budowa reguły @media jest bardzo prosta. Składa się ona ze słowa kluczowego @media, słowa kluczowego określającego typ mediów (w przykładzie screen, czyli ekran) operatora logicznego (w przykładzie and) oraz parametrów wybranego typu mediów (w przykładzie max-width: 768px).

Jeśli chodzi o typy mediów, to obecnie zalecane jest używanie tylko trzech: all, print i screen:

• all – wszystkie urządzenia
• print – druk i podgląd wydruku w programach
• screen – różnego rodzaju ekrany

Operatory logiczne służą do tworzenia bardziej rozbudowanych zapytań medialnych. Gdybyśmy na przykład chcieli utworzyć regułę @media dla ekranów o szerokości od 200 do 400 pikseli, moglibyśmy napisać coś takiego:

@media screen and (min-width: 200px) and (max-width: 400px) {…}

Dostępne są cztery operatory logiczne: and, not, only i or (lub ,):

• and – muszą być spełnione wszystkie warunki, aby reguła została zastosowana. W ostatnim przykładzie urządzeniem musi być ekran o rozmiarze nie mniejszym niż 200 pikseli i nie większym niż 400 pikseli.
• not – oznacza negację, czyli odwrotność tego, co normalnie oznaczałoby zapytanie medialne.
• only – ma znaczenie tylko dla starych przeglądarek. Zapobiega tylko częściowemu stosowaniu źle lub nie w pełni obsługiwanych zapytań medialnych.
• or lub , – umożliwia połączenie kilku zapytań medialnych w jedną regułę. Gdybyśmy w powyższym przykładzie operatory and zamienili na przecinki, to reguła byłaby stosowana zawsze, gdy urządzeniem byłby ekran, gdyby urządzenie miało przynajmniej 200 pikseli szerokości oraz gdyby urządzenie miało nie więcej niż 400 pikseli szerokości – musiałby być spełniony przynajmniej jeden z tych warunków.

Ta wiedza na temat zapytań medialnych wystarczy nam, aby uczynić z naszej witryny o ciekawych ludziach dzieło sztuki także na urządzeniach mobilnych.

Dostosowywanie naszej witryny do urządzeń mobilnych

Zapytania medialne stanowią podstawę techniki o nazwie projektowanie responsywnych stron internetowych (ang. responsive web design – RWD). Słowo „responsywne” to kalka z języka angielskiego oznaczająca strony, które reagują na parametry urządzenia, na którym są wyświetlane.

Obecnie nasza witryna nie jest responsywna, ale właśnie zamierzamy to zmienić. Zdefiniujemy regułę @media, w której umieścimy reguły dostosowujące jej wygląd do urządzeń o szerokości do 768 pikseli, a kiedy urządzenie będzie miało większą szerokość, zostaną zastosowane nasze „normalne” ustawienia. Oto ona:

@media screen and (max-width: 768px) {}

Teraz wystarczy w klamrze wpisać normalne reguły CSS, które chcemy zastosować, gdy ktoś wyświetli naszą stronę na ekranie o szerokości nie większej niż 768 pikseli.

Oczywiście zapytania medialne mogą być bardziej szczegółowe i mogą obejmować kilka przedziałów szerokości. Nam jednak do celów edukacyjnych wystarczy tylko ten jeden punkt kontrolny.

Ogólnie rzecz biorąc projektowanie strony dla urządzeń mobilnych w dużym stopniu polega na zamianie układu elementów na „bardziej pionowy”. Elementy, które w wersji szerokiej znajdują się obok siebie, w wersji dla urządzeń mobilnych zazwyczaj są ułożone jeden nad drugim.

Odrębną sprawą są obrazy graficzne. Bardzo dobrym rozwiązaniem jest utworzenie kilku wersji rozmiarowych każdej grafiki i wybieranie odpowiednich w zależności od rozmiaru ekranu urządzenia.

Pozostawimy to jednak jako ćwiczenie do samodzielnego wykonania, a na razie po prostu wyłączymy wyświetlanie tych obrazów, które psują nam estetykę stron.

Pracę zaczniemy od strony głównej oraz sekcji stałych, czyli nagłówka i stopki strony.

Strona główna

W treści strony głównej wystarczy zrobić porządek z dużą ilustracją po lewej stronie tekstu oraz zmniejszyć dopełnienie elementu main:

@media screen and (max-width: 768px) {
.featured {
    display: none;
  }
  #home main {
    padding: 0 20px;
  }
}

Efekt zastosowania tych ustawień jest następujący:

Już jest nieźle, ale widać jeszcze parę drobnych problemów. Na samej górze znajduje się niepotrzebny biały pas wzdłuż górnej krawędzi strony, elementy menu wyglądałyby lepiej, gdyby ułożyły się jeden nad drugim, grube obramowanie elementu body przy tej szerokości nie wygląda atrakcyjnie oraz przydałoby się sprawić, aby litera i w podtytule strony nie odłączała się od następnego słowa.

Na dole mamy tylko analogiczny problem, jak z literą i w nagłówku, tylko z literą O.

Za biały pas na górze odpowiada górne dopełnienie elementu body, a elementy menu możemy ustawić jeden nad drugim przez zamianę elementów listy, które je reprezentują, z powrotem na blokowe:

body {
  border: none;
  padding: 0;
}
#main-header nav ul li {
  display: block;
}
#main-header nav ul li:hover div {
  display: none;
}

Przy okazji wyłączyliśmy menu rozwijane, które też w wersji mobilnej się nie przyda. Zamiast niego powinniśmy zdefiniować specjalne menu mobilne, tzw. menu hamburgerowe, ale na razie poprzestaniemy na najprostszych rozwiązaniach.

Teraz nasza strona główna wygląda tak:

Problem „wiszących liter” zniknął, ale tylko dlatego, że zmieniła się szerokość obszaru widoku. Jeśli nic z tym nie zrobimy, to na innym urządzeniu może wrócić.

Jego rozwiązanie jednak nie leży w gestii CSS tylko w gestii HTML, a dokładnie polega na zastosowaniu encji HTML reprezentującej tzw. spację niełamliwą (ang. non-breaking space), która ma postać  , za interesującymi nas literami:

i techniki
O nas

Zamień odpowiednie fragmenty tekstu na swoich stronach na powyższe fragmenty i problem zniknie. Teraz litery i oraz O będą traktowane jak jeden wyraz w połączeniu z znajdującymi się za nimi słowami.

Stronę główną, nagłówek i stopkę możemy uznać za załatwione. Teraz przechodzimy do podstron.

Podstrony

Na początku rozdziału pokazana jest strona o poświęcona Feynmanowi na ekranie o małej szerokości. Delikatnie mówiąc, nie wygląda atrakcyjnie, ale zaraz to zmienimy.

Aby pasek boczny przesunął się pod element main, wystarczy wyłączyć pozycjonowanie elastyczne zawierającego je kontenera #site-content:

#site-content {
    display: block;
  }

Jeśli zdjęcia bohaterów naszych artykułów nie wyglądają atrakcyjnie, wyłączamy je:

#site-content article img {
  display: none;
}

Następnie ustawiamy szerokość elementu main na 90% dostępnego miejsca i środkujemy go:

#site-content main {
  width: 90%;
  margin: 0 auto;
}

Teraz zmieniamy ustawienia paska bocznego. Dostosowujemy jego szerokość, dopełnienie i margines, ustawiamy wyrównanie tekstu do środka, definiujemy górną krawędź obramowania, aby oddzielić wizualnie pasek boczny od treści głównej oraz wyłączamy „pływanie” grafik:

#sidebar {
  width: 100%;
  padding: 20px 20px 0 20px;
  margin: 0;
  text-align: center;
  border-top: 2px dotted #b4b0b0;
}
#sidebar section img {
  float: none;
}

Po zastosowaniu tych ustawień nasza strona wygląda o niebo lepiej:

W ten sposób ukończyliśmy prace nad naszą witryną. Możesz jeszcze samodzielnie, w ramach ćwiczeń, utworzyć strony O nas i Współpraca, do czego gorąco Cię zachęcam.

Tutaj możesz pobrać kompletną witrynę Ciekawi ludzie w formie archiwum ZIP do testów, nauki, wykorzystania we własnych projektach i dowolnych innych celów.

Zakończenie pracy nad przykładową witryną nie oznacza jednak końca naszej wspólnej nauki. Po prostu pozostały nam do poznania już tylko takie elementy, które nie znajdują zastosowania w tym serwisie – a przynajmniej ja takiego nie znajduję. Jeśli masz inne zdanie, śmiało możesz je dodać.

W następnym rozdziale poznasz kolejną ważną i często używaną grupę elementów HTML oraz garść związanych z nimi własności CSS – nauczysz się tworzyć tabele.

Podsumowanie

• Stronę internetową należy przetestować na różnych urządzeniach, aby sprawdzić, czy wszędzie dobrze wygląda.
• Różne szerokości ekranu można symulować przez zmianę rozmiaru okna przeglądarki lub za pomocą narzędzi dla programistów dostępnych we wszystkich popularnych przeglądarkach.
• W wielu przeglądarkach narzędzia dla programistów można włączyć przez naciśnięcie klawisza F12 lub kliknięcie prawym przyciskiem myszy w dowolnym miejscu strony i wybranie pozycji Zbadaj lub podobnej z menu podręcznego.
• Element meta vieport umożliwia dostosowanie wyglądu strony na urządzeniach mobilnych.
• Zapytania medialne (w postaci reguły @media) służą do tworzenia wersji strony przeznaczonych dla urządzeń o różnej szerokości ekranu i o różnych właściwościach.
• Często używane punkty kontrolne szerokości ekranu: 320 – 480 pikseli, 481 – 768 pikseli, 769 – 1024 pikseli, 1025 – 1200 pikseli oraz od 1201 pikseli.
• Niektórzy projektanci zalecają zaczynanie projektowania stron od wersji dla urządzeń mobilnych.

Ćwiczenia

1. Zdefiniuj dodatkowe punkty kontrolne w swoim arkuszu stylów i dostosuj wybrane aspekty wyglądu strony dla każdego z nich.
2. Obejrzyj na ekranie o małej szerokości formularz kontaktowy utworzony przez siebie w poprzednim rozdziale i sprawdź, czy wymaga dostosowania do urządzeń mobilnych. Jeśli tak, napisz odpowiednie reguły CSS.