Elastyczne projektowanie witryn

Elastyczne projektowanie witryn (ang. responsive web design, RWD) to konfiguracja, w której serwer zawsze wysyła taki sam kod HTML do wszystkich urządzeń, a strona odpowiednio wyświetla się na urządzeniu na podstawie zapytań o CSS. Jeżeli wszystkie klienty użytkownika Googlebota mają możliwość indeksowania zasobów strony (CSS, JavaScript, obrazy), nasze algorytmy powinny automatycznie wykryć tę konfigurację.

Elastyczne projektowanie stron umożliwia serwowanie różnym urządzeniom tego samego kodu określającego rozmiar ekranu.

TL;DR

  • Użyj tagu meta name="viewport", by wskazać przeglądarce sposób dostosowywania treści.
  • Zapoznaj się z dokumentacją w witrynie Podstawy pracy w sieci.

Stosowanie metatagu meta name="viewport"

Aby pokazać przeglądarkom, że Twoja strona dostosuje się do różnych urządzeń, w nagłówku dokumentu dopisz ten metatag:

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

Metatag widocznego obszaru wskazuje przeglądarkom, jak dostosować rozmiar i skalowanie strony do szerokości ekranu urządzenia. Jeśli brakuje metatagu widocznego obszaru, przeglądarki mobilne domyślnie będą renderować stronę na szerokości ekranu komputera (z reguły ok. 980 pikseli, ale ten rozmiar różni się w zależności od urządzenia). Następnie przeglądarki mobilne poprawiają wygląd tekstu, zwiększając rozmiar czcionki lub dopasowując zawartość w taki sposób, by na ekranie mieściła się cała treść lub jej odpowiedni fragment.

Dla użytkowników oznacza to, że rozmiary czcionek mogą być niespójne, a poruszanie się po treści lub jej czytanie wymaga dwukrotnego dotknięcia lub powiększenia fragmentu poprzez rozsunięcie palców. Jeśli z witryny trzeba korzystać w ten sposób na urządzeniach mobilnych, możemy ją uznać za mało przyjazną dla takich urządzeń.

Strona po lewej nie ma określonego metatagu widocznego obszaru, dlatego przeglądarka wyświetli ją w szerokości typowej dla komputerów i zeskaluje ją tak, by mieściła się na ekranie, przez co treść będzie mało czytelna. Ta sama strona po prawej ma widoczny obszar dopasowany do szerokości urządzenia – przeglądarka mobilna nie musi nic skalować, a treść strony jest łatwo czytelna.

W przypadku obrazów serwowanych dynamicznie stosuj element <picture>.

Ogólna zasada jest taka: jeśli witryna działa w nowoczesnej przeglądarce (np. Google Chrome czy mobilnej wersji Apple Safari), będzie też działać z naszymi algorytmami.

Dlaczego elastyczne projektowanie stron

Elastyczne projektowanie witryn, które zalecamy, ma wiele zalet:

  • Użycie pojedynczego adresu URL z wybraną treścią ułatwia użytkownikom jej udostępnianie i tworzenie do niej linków.
  • Algorytmy Google precyzyjnie przypisują stronie właściwości związane z indeksowaniem, zamiast sygnalizować istnienie strony mobilnej i w wersji na komputery.
  • Dbanie o kilka stron o tej samej treści jest mniej czasochłonne.
  • Rzadziej zdarzają się typowe błędy spotykane na witrynach mobilnych.
  • Nie trzeba przekierowywać użytkowników, by pokazać im stronę zoptymalizowaną pod kątem urządzenia, co skraca czas jej ładowania. Przekierowywanie na podstawie klienta użytkownika jest podatne na błędy i może obniżyć komfort korzystania z witryny (szczegóły znajdziesz w sekcji Problemy z wykrywaniem klientów).
  • Strona elastyczna (responsywana) oszczędza zasoby robotów Google. Strony elastyczne muszą zostać zaindeksowane przez Googlebota tylko raz, niezależnie od klienta użytkownika. W przypadku innych rozwiązań Googlebot indeksuje je wielokrotnie dla różnych klientów, by odczytać wszystkie wersje treści strony. Ten wzrost wydajności indeksowania witryny pośrednio pozwala nam indeksować więcej treści z witryny, dzięki czemu są one bardziej aktualne.

Jeśli potrzebujesz dodatkowej pomocy związanej z projektowaniem stron elastycznych, w pierwszej kolejności przeczytaj post na naszym blogu Webmaster Central i artykuły w witrynie Podstawy pracy w sieci.

JavaScript

Podczas tworzenia witryn przyjaznych dla urządzeń mobilnych trzeba dokładnie przemyśleć zastosowanie JavaScriptu do zmiany sposobu działania witryny i jej wyświetlania na różnych urządzeniach. JavaScript często stosuje się np. przy wyborze reklamy lub rozdzielczości obrazu, który zostanie wyświetlony na stronie.

W tej sekcji opisujemy różne sposoby wykorzystania JavaScriptu, odnosząc je do naszego zalecenia elastycznego projektowania stron.

Typowe konfiguracje

Trzy najczęstsze zastosowania JavaScriptu w witrynach zoptymalizowanych pod kątem smartfonów to:

  • JavaScript adaptacyjny: w tej konfiguracji wszystkie urządzenia otrzymują te same treści HTML, CSS i JavaScript. Sposób działania lub wyświetlania strony odpowiednio zmienia się podczas wykonywania JavaScriptu na urządzeniu. Zalecamy tę konfigurację, jeśli witryna wymaga JavaScriptu.
  • Wykrywanie łączone: witryna korzysta z JavaScriptu po stronie klienta i technik wykrywania po stronie serwera, by określić możliwości urządzenia. Na tej podstawie serwuje odpowiednie treści.
  • JavaScript serwowany dynamicznie: wszystkie urządzenia otrzymują taki sam kod HTML, ale JavaScript jest serwowany z adresu URL, który dynamicznie określa jego rodzaj w zależności od klienta użytkownika.

Poniżej znajdziesz szczegółowe informacje o tych konfiguracjach.

JavaScript adaptacyjny

W tej konfiguracji adres URL serwuje tę samą zawartość strony (HTML, CSS, JavaScript, obrazy) wszystkim urządzeniom. Dopiero po wykonaniu JavaScriptu na urządzeniu sposób działania i wyświetlania strony odpowiednio się zmienia. To rozwiązanie jest podobne do elastycznego projektowania witryn z zapytaniami o media CSS.

Powiedzmy, że wszystkie urządzenia otrzymują ze strony jednakowy kod HTML z elementem <script> odwołującym się do zewnętrznego adresu URL, z którego serwowany jest JavaScript. Z tego adresu każde urządzenie pobiera taki sam kod JavaScript. W trakcie wykonywania JavaScript wykrywa typ urządzenia i na tej podstawie może coś zmienić na stronie, np. umieścić obraz czy kod reklamy zoptymalizowany pod kątem smartfonów, a nie wersji komputerowej.

Ta konfiguracja jest bardzo zbliżona do elastycznego projektowania stron i nasze algorytmy wykrywają ją automatycznie. Poza tym nie wymaga ona nagłówka HTTP Vary, bo zawartość i zasoby strony nie są dynamicznie serwowane z odpowiednich adresów URL. Ze względu na te zalety zalecamy to rozwiązanie, jeśli witryna wymaga użycia JavaScriptu.

Wykrywanie łączone

Wykrywanie łączone polega na współpracy serwera z JavaScriptem po stronie klienta, by określić możliwości urządzenia i odpowiednio zmienić wyświetlane treści.

Na przykład witryna może zmienić sposób renderowania treści w zależności od tego, czy urządzeniem jest komputer czy smartfon. W tym przypadku witryna może zawierać JavaScript, który sprawdza wymiary ekranu i przekazuje tę informację do serwera. Na tej podstawie serwer aktualizuje lub zmienia kod przesyłany do urządzenia. JavaScript zwykle zapisuje wykryte możliwości urządzenia w pliku cookie, który zostanie odczytany przez serwer, gdy użytkownik urządzenia znowu odwiedzi tę stronę.

Ponieważ serwer wysyła różny kod HTML w zależności od klienta użytkownika, wykrywanie łączone jest uważane za rodzaj konfiguracji dynamicznego serwowania treści. Szczegółowe informacje na ten temat znajdziesz w sekcji na temat dynamicznego serwowania treści. W skrócie: chodzi o to, by po otwarciu strony, której kod HTML różni się w zależności od klienta użytkownika, witryna wysłała w odpowiedzi nagłówek HTTP „Vary: User-Agent”.

JavaScript serwowany dynamicznie

W tej konfiguracji wszystkie urządzenia otrzymują taki sam kod HTML z elementem <script> odwołującym się do zewnętrznego pliku JavaScript, którego zawartość różni się w zależności od klienta użytkownika. Oznacza to, że JavaScript jest serwowany dynamicznie.

W tym przypadku zalecamy, by plik JavaScript wysyłać razem z nagłówkiem HTTP „Vary: User-Agent”. Jest to sygnał dla internetowych pamięci podręcznych i Googlebota, że JavaScript może być różny w zależności od klienta. Googlebot indeksuje wtedy plik JavaScript, udając różne klienty użytkownika.

Wyślij opinię na temat...