Wstęp

Nie powinno być chyba dla nikogo zaskoczeniem, że urządzenia mobilne (smartfony, tablety) są dzisiaj używane tak samo chętnie lub nawet częściej niż tradycyjne komputery stacjonarne czy laptopy. Cechą wspólną tego typu urządzeń zwykle jest mniejszy ekran. W końcu trochę dziwnie by wyglądało taszczenie pod pachą dwudziestocalowego "mobilnego" monitora do naszego smartfona 😉 Dla twórców stron internetowych oznacza to jedno: konieczne jest takie projektowanie serwisów, aby wyglądały dobrze, były czytelne i wygodne w użytkowaniu również na urządzeniach przenośnych. Jak to jednak zrobić? Istnieje kilka strategii.

Powiększenie strony

Pozornie najprostszym rozwiązaniem jest nic nie robić 😉 Nowoczesne urządzenia mobilne posiadają wbudowaną funkcję powiększania strony, z której użytkownik może skorzystać, jeśli tekst jest dla niego za mały, aby można go było wygodnie czytać. Problem w tym, że każdy kto choć raz był zmuszony skorzystać z tego rozwiązania wie, że jest ono szalenie niewygodne.

• Po powiększeniu strony zwykle trzeba wciąż przewijać ją na boki. Do tego niektóre przeglądarki mobilne nie posiadają funkcji automatycznego zawijania tekstu w długich linijkach, które nie mieszczą się na ekranie, co skrajnie utrudnia czytanie.
• Czasami sytuację poprawia obrócenie urządzenia do poziomej orientacji ekranu. Ale zwykle to również nie jest mile widziane - zwłaszcza przez użytkowników smartfonów, którzy nie lubią co chwilę żonglować swoim urządzeniem 😉

Jeśli traktujesz poważnie użytkowników Twojej strony, nie zdawaj się na wbudowany w urządzenia mobilne mechanizm powiększania strony.

Skalowalny szablon

Wcześniej w tym rozdziale został opisany płynny szablon, który dynamicznie dopasowuje się do aktualnej szerokości okna przeglądarki. Jego modyfikacją mogłoby być ustalanie szerokości wszystkich bloków szablonu, a nawet rozmiaru tekstu i marginesów w jednostkach względnych długości - np. procentach, em lub rem. W takiej sytuacji cała strona automatycznie przeskalowałaby się tak, aby nigdy nie trzeba było jej przewijać w poziomie.

Do pewnego stopnia jest to dobre rozwiązania. Jednak w praktyce trudno się spodziewać, aby nawet tylko dwukolumnowy szablon bez problemu zmieścił się na wąskim ekranie smartfona i nadal tekst był wystarczająco czytelny.

Możesz stosować szablon skalowalny tylko w ograniczonym zakresie - np. kiedy Twoja strona składa się tylko z jednej kolumny.

Strona mobilna

Skoro urządzenia mobilne tak bardzo różnią się od tradycyjnych komputerów i laptopów, może warto przygotować dla nich zupełnie osobną wersję strony? Kiedyś był to właśnie podstawowy sposób tworzenia serwisów przeznaczonych dla urządzeń mobilnych.

Koncepcja pozornie jest bardzo prosta: przygotowujemy drugą wersję każdej podstrony w naszym serwisie, która będzie lepiej przystosowana do urządzeń mobilnych. Do najczęstszych tego typu zabiegów można zaliczyć:

• Usunięcie elementów strony, które mogą być mało przydatne użytkownikom mobilnym
• Przesunięcie kolumny menu na początek lub koniec treści bądź umieszczenie jej w otwieranym menu
• Dopasowanie rozmiaru czcionki
• Przygotowanie fizycznie pomniejszonych zdjęć i innych multimediów
• Zapewnienie większej przestrzeni wokół klikalnych elementów menu, tak aby łatwiej je było wskazać palcem na ekranie dotykowym urządzenia bez przypadkowej aktywacji sąsiednich elementów

Niestety problemem tego podejścia jest konieczność osobnego utrzymywania dwóch oddzielnych wersji strony. Za każdym razem kiedy będziemy chcieli wprowadzić coś nowego, trzeba to robić w dwóch miejscach. Nieco ułatwiają to skrypty wykonywane po stronie serwera - np. PHP. Jednak nawet w takim przypadku nie ustrzeżemy się od pewnych niedogodności:

• Użytkownik może przypadkowo trafić na wersję strony nieprzeznaczoną dla jego urządzenia.
• Co prawda dzięki np. wspomnianym już skryptom PHP możemy automatycznie wykryć typ urządzenia użytkownika, który odwiedza naszą stronę i dynamicznie wyświetlić mu odpowiednią jej wersję. Niestety taka detekcja również może być jednak obarczona błędami.
• Nie zawsze można jednoznacznie zaklasyfikować urządzenie do wersji mobilnej. Niektórzy użytkownicy tabletów z wystarczająco dużym ekranem mogą preferować wygląd strony przystosowany dla tradycyjnych komputerów.

Stosuj oddzielną mobilną wersję strony tylko w przypadku, kiedy ma ona oferować diametralnie różną funkcjonalność. W takiej sytuacji mocno zalecane jest również użycie skryptów po stronie serwera (np. PHP) wraz z automatyczną detekcją typu urządzenia.

Responsive Web Design (RWD)

I tym sposobem dochodzimy do metody tworzenia serwisów przystosowanych dla urządzeń mobilnych, która jest najpopularniejsza i zwykle daje zdecydowanie najlepsze rezultaty. Są to strony responsywne (ang. Responsive Web Design - w skrócie RWD).

Przede wszystkim musimy pogodzić się z tym, że wcale nie powinno nam chodzić o to, aby nasza strona wyglądała dokładnie tak samo na każdym urządzeniu. Nie można oczekiwać, że witryna przygotowana do wyświetlania na laptopie czy tradycyjnym komputerze z dużym monitorem będzie tak samo wygodna w odbiorze na małym ekranie smartfona. Strona nie ma wyglądać wszędzie tak samo, ale ma być tak samo wygodna i czytelna na każdym urządzeniu. Oznacza to, że jej wygląd zwykle powinien być diametralnie różny na urządzeniach z dużym ekranem wyposażonych w precyzyjne urządzenie wskazujące np. w postaci myszki komputerowej, a inaczej na małych urządzeniach mobilnych z ekranami dotykowymi. A taki właśnie efekt pozwalają uzyskać Kaskadowe Arkusze Stylów (CSS). Można to zrobić w trzech prostych krokach opisanych poniżej.

Skalowanie

Aby stworzyć stronę responsywną, najpierw musimy wstawić w nagłówku dokumentu, tzn. w dowolnym miejscu pomiędzy znacznikami <head> i </head>, następuje polecenie:

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

Oznacza ono, że przeglądarka mobilna nie musi pomniejszać strony, ponieważ to my zadbamy o to, aby strona była wygodna w odbiorze na urządzeniach przenośnych [zobacz: Skalowanie].

Responsywne obrazki

Następnie powinniśmy zadbać, aby w miarę możliwości wszystkie ilustracje na stronie były responsywne - zobacz: Responsywny obrazek.

Punkty przeskoku

Na koniec pozostaje użycie zapytań mediów w celu zdefiniowania dynamicznych zmian w szablonie strony w zależności od dostępnej szerokości ekranu urządzenia. Zauważmy, że w wielu przypadkach zwykle nie ma potrzeby, aby szablon naszej strony idealnie dopasowywał się do maksymalnej poziomej przestrzeni na ekranie. Na dużych monitorach panoramicznych mogłoby to być nawet niekorzystne, ponieważ tekst w bardzo długich linijkach trudno się czyta. Z tego powodu na wersjach strony przeznaczonych dla tradycyjnych komputerów często można spotkać się z dodatkowymi marginesami po lewej i prawej stronie. Natomiast urządzenia mobilne również często różnią się oferowaną rozdzielczością ekranu i stąd zapewne jedna wersja mobilna nie będzie optymalnym rozwiązaniem.

Zamiast tego wyznacza się tzw. punkty przeskoku (ang. breakpoints). Punkty przeskoku to lista najczęściej używanych szerokości ekranu, przy których zachodzą istotne zmiany w szablonie naszej strony. Istotną zmianą może być na przykład:

• Zmiana typu szablonu ze stałego (który zwykle może być bardziej przydatny na dużych ekranach panoramicznych) na płynny (laptopy i większe tablety)
• Ułożenie menu i treści w jednej kolumnie (smartfony i mniejsze tablety bądź czytniki e-booków) oraz być może zupełne ukrycie niektórych elementów strony, które mogą być mało przydatne na takich urządzeniach

Spróbujmy zebrać całą wiedzę nabytą w tym rozdziale i stworzyć najprostszy szablon responsywny korzystający z niezmiennego kodu HTML przedstawionego na wstępie.

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	background-color: #ccc;
}

#TRESC {
	background-color: #fff;
}

#STOPKA {
	background-color: #888;
}

@media only all and (min-width: 800px) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}

	#TRESC {
		margin-left: 150px;
	}

	#STOPKA {
		clear: both;
	}
}

@media only all and (min-width: 1280px) {
	html, body {
		text-align: center;
	}

	#top {
		width: 1260px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#MENU {
		width: 300px;
	}

	#TRESC {
		width: 960px;
		float: left;
		overflow: hidden;
		margin-left: 0;
	}

	#STOPKA {
		width: 100%;
	}
}

Wyjaśnienie:

1. Na początku powyższego arkusza stylów znajdują się podstawowe reguły przystosowujące stronę dla najmniejszych urządzeń mobilnych. Takie podejście nosi nazwę najpierw urządzenia mobilne (ang. mobile first). Wszystkie bloki na stronie - nagłówek, menu, treść i stopka - znajdują się w jednej kolumnie, której szerokość dynamicznie dopasowuje się do całej dostępnej poziomej przestrzeni okna przeglądarki. Dzięki temu strona powinna być czytelna nawet na najmniejszych ekranach.
2. Pierwszy punkt przeskoku zdefiniowaliśmy na wartości 800px. Jeśli użytkownik dysponuje urządzeniem z przynajmniej tak dużym ekranem, zaprezentujemy mu płynny szablon, w którym menu zostanie ustawione w kolumnie po lewej stronie, a treść dynamicznie dopasuje się do pozostałej dostępnej szerokości okna przeglądarki.
3. Drugi punkt przeskoku został zdefiniowany na wartości 1280px (jest to rozdzielczość HD ready). Od tego momentu nie chcemy już bardziej rozciągać szerokości layoutu, aby nie utrudniać użytkownikowi czytania tekstu w zbyt długich linijkach. W związku z tym użyliśmy stałego szablonu. Jeśli użytkownik będzie dysponował np. ekranem full HD, zobaczy dodatkowe marginesy po lewej i prawej stronie ekranu. Oprócz tego poszerzyliśmy kolumnę menu do 300px, ponieważ teraz mamy wystarczająco dużo miejsca, aby to zrobić.
   Zwróć uwagę, że definiując ten punkt przeskoku nie musieliśmy ustawiać wszystkich deklaracji od podstaw, ponieważ mogliśmy skorzystać tutaj z kaskadowości stylów. Trzeba było tylko wyzerować lewy margines dla bloku z treścią, ponieważ w przeciwnym razie przyjąłby on ustaloną wcześniej wartość 150px. Pozostałe deklaracje, zgodnie z zasadą kaskadowości, zostały przejęte z reguł stylów wpisanych wcześniej w arkuszu stylów.

Oczywiście w miarę potrzeby na swojej stronie możesz zastosować więcej punktów przeskoku. Na przykład być może już przy poziomej rozdzielczości ekranu równej 1080px można by było poszerzyć kolumnę menu do 200px. Pamiętaj jedynie, aby punkty przeskoku umieszczać w arkuszu stylów w taki sposób, aby były uporządkowane w kolejności rosnącej.

Nie musisz wszystkich zmian testować na różnych fizycznych urządzeniach mobilnych. Wystarczy że na komputerze przeciągniesz krawędź okna przeglądarki zmieniając w ten sposób jego szerokość. Strona dynamicznie dopasuje się do nowego rozmiaru - nawet bez potrzeby jej odświeżania.

Analogicznie można przystosować szablon dla trzech kolumn:

html, body {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}

#NAGLOWEK {
	background-color: #888;
}

#MENU {
	background-color: #ccc;
}

#INFORMACJE {
	display: none;
}

#TRESC {
	background-color: #fff;
}

#STOPKA {
	background-color: #888;
}

@media only all and (min-width: 800px) {
	#MENU {
		width: 150px;
		float: left;
		overflow: hidden;
		position: relative;
	}

	#INFORMACJE {
		display: block;
		background-color: #ccc;
		width: 150px;
		float: right;
		overflow: hidden;
		position: relative;
	}

	#TRESC {
		margin-left: 150px;
		margin-right: 150px;
	}

	#STOPKA {
		clear: both;
	}
}

@media only all and (min-width: 1280px) {
	html, body {
		text-align: center;
	}

	#top {
		width: 1260px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	#MENU, #INFORMACJE {
		width: 150px;
	}

	#TRESC {
		width: 960px;
		float: left;
		overflow: hidden;
		margin-left: 0;
		margin-right: 0;
	}

	#STOPKA {
		width: 100%;
	}
}

W tym przypadku w widoku dla najmniejszych urządzeń mobilnych w ogóle ukryliśmy kolumnę dodatkowych informacji zakładając, że zwykle znajdują się tam tylko poboczne treści, które w takiej sytuacji mogłyby zaciemniać odbiór głównej treści. Oczywiście jeśli na Twojej stronie kolumna z dodatkowymi informacjami zawiera istotne treści, które nawet na smartfornach nie powinny zostać pominięte, nie stosuj deklaracji "display: none".