Nowoczesne strony www. Część III: kompatybilność z urządzeniami mobilnymi

Kompatybilność witryny web z urządzeniami mobilnymi

Dobre strony internetowe powinny się prawidłowo wyświetlać na każdym urządzeniu obsługującym przeglądarkę www. Pomimo iż osiągnięcie tego celu jest stosunkowo łatwe, to do niedawna zagadnienie to stanowiło temat tabu, nawet wśród osób zawodowo zajmujących się tworzeniem witryn internetowych.

W skutek pojawienia się w sieci wytycznych Google związanych z mobilnością oraz wynikającej z nowej sytuacji zmiany algorytmu pozycjonującego strony w wynikach wyszukiwania na korzyść projektów kompatybilnych z urządzeniami mobilnymi, twórcy witryn internetowych poczuli się mocno zdezorientowani. W związku z gwałtowną zmianą tendencji web oraz kompletną niekompatybilnością większości istniejących już witryn z urządzeniami mobilnymi, popularne stało się wówczas rozwiązanie polegające na tworzeniu osobnej wersji witryny, przeznaczonej na urządzenia mobilne. Google jednak w swoich wytycznych dla webmasterów ostrzega, iż takie rozwiązanie nie jest ani dobre, ani zalecane. Wedle wytycznych Google, związanych z dobrymi praktykami tworzenia stron internetowych, takie rozwiązanie jest wręcz poważnym błędem webmasterskim.

Google udostępnia online bardzo przydatne narzędzie, za pomocą którego można sprawdzić czy dana witryna internetowa jest dostosowana dla urządzeń mobilnych.

Jak w sposób najbardziej efektywny i zgodny z dobrymi praktykami webmasterskimi zaprojektować i stworzyć dobrą witrynę web w pełni dostosowaną dla urządzeń mobilnych?

Otóż postaram się udzielić w tym zakresie kilku podstawowych porad.

Meta znacznik Viewport

Z pomocą w sprawach kompatybilności z urządzeniami mobilnymi przychodzi meta znacznik Viewport.

Strony docelowo responsywne, czyli mające się wyświetlać prawidłowo niezależnie od rozmiarów ekranu urządzenia, powinny zawierać meta znacznik Viewport, który pozwala określić prawidłowe proporcje ekranu. Oto przykładowe i bardzo popularne zastosowanie meta znacznika Viewport:

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

Jakie jest działanie powyższego kodu? Otóż width=device-width dopasowuje szerokość strony do szerokości wyświetlacza, która zależy oczywiście od stosowanego urządzenia, natomiast initial-scale=1.0 ustawia początkowe proporcje strony jeden do jednego w chwili jej załadowania.

Viewport jest dziś bardzo ważnym meta znacznikiem i warto się z nim dobrze zapoznać.

Poniżej przedstawiam konkretny wizualny przykład przydatności meta znacznika viewport:

Strona www bez viewport
Strona www bez viewport
Strona www z viewport
Strona www z viewport

Płynność i proporcjonalność

Kluczowe koncepcje stojące za nowoczesnym i funkcjonalnym projektem to płynność i proporcjonalność, w przeciwieństwie do układów o stałej szerokości. Stosowanie jednostek względnych do pomiarów może ułatwić projektowanie dobrym witryn internetowych oraz zapobiegać przypadkowemu tworzeniu elementów, które są zbyt duże lub zbyt małe dla danego wyświetlacza.

Nie zalecane jest zatem określanie stałych wymiarów elementów HTML. Należy określać tylko i wyłącznie proporcje elementów, co pozwoli na proporcjonalne dopasowanie elementów do możliwości wyświetlacza.

Przykładowe zastosowanie koncepcji płynności i proporcjonalności może wyglądać następująco:

div.pelny { width: 100%; }

Niezalecane jest ustawianie stałych, bezwzględnych rozmiarów dla elementów HTML:

div.pelny { width: 1024px; }

Style dopasowane do urządzenia

Kolejna ważna sprawa o której należy pamiętać to dopasowanie czcionki do wielkości wyświetlacza.

Jeśli czcionka będzie zbyt mała, wówczas treść będzie trudna do odczytania na urządzeniach mobilnych. Z drugiej strony, jeśli ustawimy zbyt dużą czcionkę, to strony będą paskudnie wyglądać na laptopach i komputerach stacjonarnych. Jak więc rozwiązać tego typu problem? Otóż jest na to bardzo proste rozwiązanie.

Stylizacja elementów HTML zależna od rozmiarów wyświetlacza urządzenia to dobra praktyka, której należy się trzymać w celu osiągnięcia pełnej kompatybilności witryny w różnego rodzaju urządzeniami.

W tej kwestii okazuje się bardzo pomocna reguła CSS @media, która służy do definiowania różnych reguł stylu dla różnych typów nośników / urządzeń. A oto przykładowe i podstawowe zastosowanie reguły @media, umożliwiające określenie stylowych różnic dla odmiennych rozdzielczości wyświetlaczy:

@media only screen and ( max-width: 640px ) {
/* tutaj style dla urządzeń o rozdzielczości do 640px */
}
@media only screen and (min-width: 640px ) {
/* tutaj style dla urządzeń o rozdzielczości od 640px */
}

Reguła @media jest dziś szczególnie ważna i przydatna, więc naprawdę warto się z nią dogłębnie zapoznać.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *