Jak sprawdzić, czy Twoja strona internetowa dobrze działa na smartfonie?

Odpowiedź na to pytanie wiąże się bezpośrednio z najważniejszymi trendami w kwestii sposobu przeglądania internetu, które można zaobserwować już od kilku lat. Jak podaje portal Statista, aktualnie już niemal 60% ruchu sieciowego pochodzi właśnie ze sprzętów mobilnych. To liczba, która sukcesywnie wzrasta już od dawna – jeszcze w 2013 roku jej wartość znajdowała się dopiero w okolicach 30%.

Tego typu zmiany mają ogromny wpływ na wiele aspektów biznesu, szczególnie w kontekście projektowania stron. Jednocześnie nie można pominąć faktu, że smartfony charakteryzują się znacznie innymi proporcjami ekranu niż laptopy czy sprzęt klasy PC. Podczas gdy standard dla komputerów to poziomy layout (w proporcjach takich jak 16:9, 16:10 czy 21:9), w przypadku urządzeń mobilnych mamy do czynienia z pionowym układem. Sam fizyczny rozmiar ekranu jest z kolei znacznie mniejszy – nawet w przypadku takiej samej rozdzielczości. To oznacza, że wymagania wobec czytelności oraz projektu strony są zupełnie inne, co zdecydowanie należy wziąć pod uwagę przy tworzeniu strony dla swojej firmy czy sklepu.

Dodatkowo warto zaznaczyć, że dostosowanie się do urządzeń mobilnych to sposób, by skutecznie dotrzeć ze swoją ofertą do znacznie większego grona odbiorców. Mowa nie tylko o osobach, które przeglądają internet wyłącznie z użyciem smartfona. Dla wielu klientów lub czytelników urządzenia mobilne będą po prostu wygodniejsze. Odpowiedni projekt pozwoli zatem zwiększyć zaoferowanie proponowanymi towarami czy usługami, tym samym poprawiając wyniki finansowe firmy.

Warto także zaznaczyć, że strony dostosowane do urządzeń mobilnych można podzielić na dwa różne typy: witryny responsywne (RWD – responsive web design) oraz mobile-first. Czym różnią się te dwa podejścia do projektowania stron, a co je łączy? Pod względem podobieństw należy wskazać przede wszystkim podstawowe założenie, jakim jest wyświetlanie treści w czytelny sposób bez względu na rodzaj urządzenia. Cel ten jest jednak realizowany nieco inaczej:

• strony responsywne dostosowują swój układ do ekranu;
• strony mobile-first są opracowywane z myślą w pierwszej kolejności o urządzeniach mobilnych, przeważnie zachowują identyczny layout również na komputerach.

W pierwszym przypadku podstawą jest dynamiczna prezentacja zawartości. W tym celu stosuje się różnego rodzaju frameworki lub reguły „media” w kodzie HTML, które pozwalają opisać odrębne reguły CSS zależne od rozmiaru ekranu. Strony mobile-first charakteryzują się z kolei statycznym układem, który jest dostosowany głównie do smartfonów; często wyróżnia je także uproszczona nawigacja oraz mniejsze grafiki.

Aby zweryfikować, czy strona dobrze wyświetla się na urządzeniach mobilnych, można skorzystać z kilku metod. Najprostszą z nich będzie po prostu odwiedzenie witryny na smartfonie. Taka czynność pozwoli jednak tylko na dość podstawową weryfikację – należy pamiętać, że w zależności od modelu urządzenia strona może prezentować się nieco inaczej.

Kolejnym sposobem jest skorzystanie z narzędzi wbudowanych w przeglądarkę internetową. Chrome, Firefox, Safari, Opera, Edge i inne popularne programy tego typu oferują tzw. narzędzia dla programistów, które pozwalają m.in. na sprawdzenie układu strony na różnych sprzętach. Proces ten opiera się jednak wyłącznie na określeniu docelowej rozdzielczości – oznacza to, że nie będziemy w stanie określić wpływu systemu operacyjnego czy aplikacji na wygląd witryny. W ten sposób można zweryfikować głównie zastosowane reguły CSS.

Najskuteczniejszą metodą będzie wykorzystanie dedykowanych narzędzi dostępnych online. Tego typu rozwiązania są oferowane na wielu witrynach – zdecydowanie najpopularniejszym z nich jest test Google. W tym przypadku całość zajmuje około 30 sekund, a na koniec otrzymujemy komunikat o użyteczności strony na urządzeniach mobilnych lub listę aspektów, które należy poprawić. Narzędzie sprawdza m.in. komunikaty konsoli JavaScript, ładowanie zasobów oraz dostosowanie kodu HTML do smartfonów i tabletów.

Istnieje szereg czynników, które mogą wiązać się z niepoprawnym układem witryny na smartfonach i tabletach. Wiele z nich dotyczy kodu HTML i CSS, który bezpośrednio odpowiada za wyświetlanie strony. Należy unikać przede wszystkim określania dokładnych wymiarów poszczególnych elementów dostosowanych do konkretnego rodzaju urządzeń. Zamiast tego znacznie lepiej sprawdzą się rozmiary podawane jako część ekranu lub proporcja danego fragmentu strony. Do tego należy unikać m.in. niepoprawnych przekierowań, nieaktywnych linków oraz elementów spowalniających ładowanie strony. Są to jednak czynniki, o których warto pamiętać bez względu na to, czy projektujemy stronę pod kątem użyteczności na komputerze, czy na smartfonach.

Warto zwrócić uwagę również na odnośniki. Wiele witryn stosuje osobne subdomeny lub konkretne ścieżki prowadzące do zasobów mobilnych. Istotne będzie uniknięcie sytuacji, w których linki dostępne w wersji komputerowej prowadzą do podstron dla smartfonów i na odwrót. To czynnik, który nie tylko zmniejszy użyteczność strony, lecz także osłabi jej pozycjonowanie w wyszukiwarkach internetowych. Nie bez znaczenia będzie też sam rodzaj zawartości – dotyczy to m.in. wtyczek, które mogą nie być obsługiwane przez przeglądarki mobilne. Aby zweryfikować wyświetlanie stron na smartfonie, najlepszym sposobem będzie skorzystanie z dedykowanych narzędzi online.