Jak sprawdzić responsywność swojej strony internetowej?

W przypadku wielu stron internetowych zdarza się tak, że większość ich ruchu pochodzi z telefonów, czy tabletów. Z tego względu niektóre wyszukiwarki już lata temu wprowadziły aktualizacje, które mają na celu wywindować w górę strony, które spełniają standardy responsywności i są przyjazne także dla użytkowników urządzeń z mniejszymi ekranami. Budując swoją stronę internetową, warto więc pomyśleć o tym, by wyświetlała się poprawnie nie tylko na ekranach komputerów.

Responsywność strony internetowej można wdrożyć na co najmniej dwa sposoby. Można utworzyć szablon, który wraz z jego zwężaniem będzie automatycznie dopasowywał się do rozdzielczości ekranu, albo dedykowaną wersję mobilną na subdomenie (np. m.webporady.pl). Pierwszy sposób jest trochę prostszy, zwłaszcza w przypadku, w którym będziemy chcieli później rozwijać taką stronę. Nie będzie ona wówczas stanowić dwóch oddzielnych witryn.

Jak przystosować swoją stronę do wyświetlania na urządzeniach mobilnych?

Zdecydowanie najłatwiej jest skorzystać z gotowych frameworków, czy bibliotek, takich jak np. Bootstrap, który oferuje system Grid. Wystarczy podzielić swoją stronę na skalowane kolumny, które będą automatycznie zwężały się wraz ze zmniejszaniem rozdzielczości. Tego typu rozwiązania bardzo często oferują także gotowe komponenty np. do menu. Dzięki temu będziemy mogli w prosty sposób wdrożyć chociażby navbar, którego elementy będą rozwijały się dopiero na życzenie użytkownika, po naciśnięciu specjalnego przycisku.

Dość dobrym sposobem jest też przepisanie kodu CSS swojej witryny. Główne założenie jest takie, żeby szerokości elementów nie były podawane w pixelach, a procentowo (ewentualnie można skorzystać z media query). Chodzi o to, żeby te wartości nie były stałe i mogły w prosty sposób dopasowywać się do mniejszych rozdzielczości.

Jak sprawdzić responsywność strony?

Zdecydowanie najprościej można to zrobić za pomocą samej przeglądarki. W Chrome wystarczy będąc na danej stronie nacisnąć przysisk F12 lub prawy przycisk myszy i Zbadaj. Wówczas w oknie, które powinno nam się pojawić, możemy nacisnąć na ikonkę telefonu i tabletu.

Po jej kliknięciu będziemy mogli zobaczyć, w jaki sposób nasza strona wyświetla się na poszczególnych urządzeniach mobilnych lub na konkretnych rozdzielczościach. Chodzi o to, by wszystko było łatwo dostępne i widoczne, oraz żeby strona się nie rozjeżdżała (np. uaktywniając dodatkowego scrolla na jej szerokości). Alternatywnie możemy po prostu zwężać okno naszej przeglądarki, efekt powinien być identyczny.

Ciekawym rozwiązaniem jest też test optymalizacji mobilnej, który pozwala na sprawdzenie responsywności za pomocą dedykowanego narzędzia od Google. Wystarczy wprowadzić adres strony i odczekać kilka chwil na przeprowadzenie całego testu.