Jak przystosować stronę internetową do przeglądarek mobilnych

Urządzenia mobilne, takie jak smartfony i tablety, generują ponad połowę całego ruchu w Internecie. Badania BrightEdge z 2014 roku wykazały, że ponad 25 % odwiedzanych witryn nie jest odpowiednio zoptymalizowanych pod te urządzenia, co może skutkować utratą średnio 68 % ruchu. Dostosowanie własnej strony do przeglądarek mobilnych wymaga planowania i testów, ale sam kod zazwyczaj nie jest trudny, szczególnie jeśli znasz CSS. Korzystając z platformy takiej jak WordPress, nie musisz programować wcale.

Popularne platformy

Od czasu premiery iPhone’a twórcy systemów CMS, takich jak WordPress, Joomla czy Drupal, wprowadzili wsparcie dla projektowania mobilnego. Drupal już w standardowej instalacji oferuje tematy przyjazne urządzeniom mobilnym. Wszystkie wymienione platformy posiadają motywy, które automatycznie przełączają się, gdy wykryją dostęp z przeglądarki mobilnej. Niektóre szablony są od razu responsywne – reagują na dotyk tak samo, jak na kliknięcia myszą, nie zmieniając znacząco wyglądu witryny na różnych urządzeniach.

Korzystanie z CSS i HTML

Dla stron opartych na czystym HTML użyj arkusza stylów CSS, aby wyświetlać wersję mobilną, gdy strona jest otwierana w przeglądarce mobilnej. Zamiast wykrywać konkretne modele urządzeń, częściej stosuje się media queries, czyli reguły określające układ w zależności od szerokości ekranu w pikselach. Możesz przygotować oddzielny styl dla dużych ekranów, tabletów i telefonów. Dzięki CSS kod jest napisany tylko raz – w pliku stylów – a każda strona wymaga jedynie jednego odwołania do tego pliku.

Interaktywne funkcje dotykowe

Jeśli Twoja strona korzysta z JavaScript lub HTML5, musisz zadbać o obsługę zdarzeń dotykowych – nie tylko w przeglądarkach mobilnych, ale także na rosnącej liczbie dotykowych komputerów stacjonarnych. Warto dodać obsługę gestów, np. w jQuery zdarzenie tap zastępuje kliknięcie myszą. W niektórych przypadkach możesz chcieć wyłączyć domyślne zachowania przeglądarki, takie jak przybliżanie dwoma palcami czy przewijanie, używając event.preventDefault().

Testowanie i weryfikacja

Najlepszym sposobem testowania mobilnej wersji jest użycie własnego smartfona lub tabletu – sprawdź wygląd, układ, reakcję na gesty oraz jakość obrazów. Możesz także emulować urządzenia w przeglądarce desktopowej. W Google Chrome naciśnij F12, otwórz panel deweloperski, przejdź do zakładki „Emulation” i wybierz model, np. Google Nexus lub iPad.