Ponad 60 procent ruchu w internecie pochodzi dziś z urządzeń mobilnych. Strona, która nie jest przyjazna dla telefonów, zawodzi większość odwiedzających, a nie jakiś niewielki wyjątek. Dopracowanie wersji mobilnej to nie dodatkowa funkcja. To podstawa, której oczekuje się od strony firmowej.
Dostosowanie strony do telefonów oznacza zapewnienie odwiedzającym z telefonów takiej samej jakości doświadczenia jak tym z komputerów. Nie okrojonej wersji, która technicznie się ładuje, ale strony, na której tekst jest czytelny, nawigacja działa, obrazy wyświetlają się poprawnie, a formularze naprawdę da się wysłać z telefonu bez irytacji.
Ten artykuł prowadzi przez praktyczne zmiany, które sprawiają, że strona naprawdę jest przyjazna dla telefonów: od nawigacji i tekstu po obrazy, formularze i szybkość.
Co w praktyce znaczy „przyjazna dla telefonów”?
Strona przyjazna dla telefonów to taka, na której każda funkcja działa poprawnie na telefonie bez obejść. Tekst jest czytelny przy domyślnym powiększeniu. Nawigacja otwiera się i zamyka czysto. Przyciski są na tyle duże, że da się w nie trafić, nie dotykając innego elementu. Obrazy ładują się i wyświetlają poprawnie. Formularze da się wypełnić i wysłać bez irytacji.
Różnica między stroną technicznie zgodną z telefonami a naprawdę przyjazną dla nich ma znaczenie. Strona jest technicznie zgodna, jeśli nie psuje się na telefonie. Jest naprawdę przyjazna, jeśli korzystanie z niej na telefonie jest tak naturalne jak na komputerze. Różnica tkwi w szczegółach. Odstępy, rozmiar czcionki, rozmiar obszaru dotyku i czas ładowania decydują o tym, czy doświadczenie jest dobre, czy ledwo działa.
Fundamentem strony przyjaznej dla telefonów jest responsywny projekt, który automatycznie dopasowuje układ do różnych rozmiarów ekranu. Artykuł czym jest responsywny projekt strony wyjaśnia, jak to działa od strony technicznej.
Jak sprawdzić, czy Twoja strona jest przyjazna dla telefonów?
Najpewniejszy test to przejście przez własną stronę na prawdziwym telefonie. Nie w podglądzie mobilnym w przeglądarce. Nie w oknie na komputerze zwężonym do wąskiej kolumny. Na prawdziwym telefonie, kciukami, tak jak robiłby to odwiedzający.
Przejdź przez każdą podstronę. Otwórz nawigację i sprawdź, czy każdy link jest osiągalny. Przeczytaj tekst i upewnij się, że da się go odczytać bez powiększania. Dotknij każdego przycisku i sprawdź, czy reaguje poprawnie. Wypełnij formularze i je wyślij. Sprawdź, czy obrazy ładują się i wyświetlają poprawnie. Sprawdź, czy nic nie wymaga przewijania w poziomie.
Wyszukiwarki udostępniają też bezpłatne narzędzia do testowania wersji mobilnej. Wpisujesz adres URL, a narzędzie wskazuje konkretne problemy, takie jak zbyt mały tekst, elementy do kliknięcia ustawione zbyt blisko siebie albo treść szersza niż ekran. Szersze wskazówki, co sprawdzić przed startem strony, znajdziesz w artykule co warto wiedzieć przed uruchomieniem strony, który opisuje testy mobilne jako część pełnego procesu przed startem.
Jak sprawić, by nawigacja działała na telefonie?
To w nawigacji doświadczenie mobilne psuje się najczęściej. Poziome menu, które rozciąga się na całą szerokość monitora, nie ma co zrobić na ekranie telefonu. Standardowe rozwiązanie to zwijane menu otwierane przyciskiem, zwykle w górnym rogu.
Przycisk menu musi być od razu rozpoznawalny. Ikona z trzema kreskami stała się powszechnie rozumianą konwencją zwiniętych menu. Gdy menu się otwiera, powinno zajmować na tyle dużo ekranu, by dało się je łatwo czytać i w nie trafiać. Pozycje potrzebują wystarczających odstępów w pionie, by palcem trafić w jedną, nie dotykając tej nad nią lub pod nią.
Utrzymuj krótkie menu mobilne. Jeśli nawigacja na komputerze ma wiele pozycji, zastanów się, których najczęściej potrzebują odwiedzający z telefonów, i czy mniej ważne można zgrupować lub usunąć z najwyższego poziomu. Czystsze menu mobilne jest łatwiejsze w użyciu. Artykuł czym jest nawigacja strony opisuje strukturę nawigacji i użyteczność na wszystkich urządzeniach.
Jak powinny wyglądać tekst i czcionki na telefonie?
Tekst łatwy do czytania na komputerze może stać się niewygodnie mały na telefonie, jeśli rozmiar czcionki jest zbyt niski. Powszechnie stosowanym standardem czytelności na telefonie jest minimalny rozmiar czcionki tekstu podstawowego 16 pikseli. Poniżej tego tekst wymaga powiększania, a większość odwiedzających tego nie zrobi.
Znaczenie ma też długość wiersza. Na komputerze wiersz tekstu może mieć 600 do 700 pikseli. Na telefonie ten sam tekst zawija się w znacznie krótsze wiersze. Jeśli odstęp między wierszami jest zbyt mały lub akapity zbyt długie, czytanie na małym ekranie staje się niewygodne. Krótkie akapity, hojne odstępy między wierszami i wyraźne przerwy między sekcjami poprawiają czytelność.
Nagłówki powinny zmniejszać się proporcjonalnie. H1 o wielkości 48 pikseli na komputerze może mieć na telefonie 28 do 32 pikseli. Jeśli nagłówki na telefonie zostają w rozmiarze z komputera, dominują na ekranie i spychają właściwą treść poniżej pierwszego widoku.
Jak obsłużyć obrazy na telefonie?
Obrazy to jedno z największych zagrożeń dla wydajności na telefonie. Obraz w pełnej rozdzielczości, przygotowany na monitor o szerokości 1440 pikseli, jest znacznie większy, niż potrzeba, gdy wyświetla się na ekranie telefonu o szerokości 375 pikseli. Wysyłanie takiego obrazu odwiedzającym z telefonów marnuje transfer i znacząco spowalnia stronę.
Rozwiązaniem jest wysyłanie różnym urządzeniom obrazów odpowiedniego rozmiaru. Większość nowoczesnych kreatorów stron robi to automatycznie: generuje kilka rozmiarów i podaje właściwy w zależności od ekranu. Jeśli zarządzasz obrazami ręcznie, zmniejszaj je do największego rozmiaru, w jakim będą wyświetlane, a nie do największego, jaki potrafi dać Twój aparat.
Zwróć uwagę na to, jak obrazy są kadrowane na telefonie. Szeroki obraz poziomy, który na komputerze wygląda zrównoważenie, na wysokim ekranie telefonu może zostać kadrowany niezręcznie. Obrazy główne i sekcje banerowe to najczęstsze miejsca, w których kadry na komputerze i telefonie wyraźnie się rozchodzą. Artykuł czym jest szybkość strony wyjaśnia wpływ optymalizacji obrazów na ogólną wydajność strony.
Co sprawia, że formularze dobrze działają na telefonie?
Formularze to na telefonie miejsce dużego tarcia. Wypełnianie pól na małej klawiaturze dotykowej jest bardziej męczące niż pisanie na pełnej klawiaturze. Im mniej pól, tym lepiej. Każde dodatkowe pole to okazja do irytacji i powód do porzucenia formularza.
Znaczenie ma rozmiar pól. Pola muszą być na tyle duże, by dało się w nie dokładnie trafić, i na tyle szerokie, by tekst w środku był czytelny. Etykiety powinny być nad każdym polem, a nie tylko jako tekst zastępczy w jego wnętrzu, bo tekst zastępczy znika w momencie, gdy ktoś zacznie pisać.
Ustaw poprawnie typy pól. Pole e-mail powinno wywoływać klawiaturę do e-maili. Pole numeru telefonu powinno wywoływać klawiaturę numeryczną. Pole daty powinno otwierać wybór daty. To drobne ustawienia techniczne, które wyraźnie ułatwiają korzystanie.
Przetestuj każdy formularz na telefonie: wypełnij go w całości i wyślij. Upewnij się, że wysyłka przechodzi i pojawia się komunikat potwierdzenia. Formularz kontaktowy, który wysyła się poprawnie na komputerze, ale nie na telefonie, po cichu traci zapytania, a Ty o tym nie wiesz.
Jak przyjazność dla telefonów wpływa na pozycje w wyszukiwarce?
Wyszukiwarki indeksują najpierw wersję mobilną Twojej strony. Oznacza to, że doświadczenie mobilne jest ważne nie tylko dla odwiedzających z telefonów. To wersja, która decyduje o tym, jak Twoja strona jest rozumiana i oceniana na wszystkich urządzeniach.
Strona, która słabo działa na telefonie, czy to przez wolne ładowanie, zepsute układy czy nieczytelny tekst, wypadnie niżej niż porównywalne strony, które dobrze radzą sobie z telefonami. Odwiedzający, którzy trafiają na stronę mobilną i od razu wychodzą, bo nie działa, wysyłają wyraźny sygnał, że podstrona nie spełniła ich potrzeb. Wysoki współczynnik odrzuceń wśród odwiedzających z telefonów z czasem wpływa na pozycje.
Szybkość strony na telefonie to osobny czynnik. Podstrona, która ładuje się w dwie sekundy na szybkim łączu stacjonarnym, na typowym łączu komórkowym może ładować się sześć sekund lub więcej. Zoptymalizowane obrazy, minimum skryptów blokujących i czysta struktura szablonu przyczyniają się do szybszego ładowania na telefonie. Pełny obraz działania optymalizacji pod wyszukiwarki, także z czynnikami technicznymi, znajdziesz w artykule czym jest SEO.
Jak WEMASY podchodzi do wersji mobilnej
Kreator stron WEMASY używa responsywnych szablonów, które automatycznie dopasowują się do komputera, tabletu i telefonu. Edytor wizualny ma podgląd mobilny, więc w trakcie budowania możesz sprawdzać, jak każda sekcja wygląda na małym ekranie. Optymalizacją obrazów i wydajnością mobilną zajmuje się platforma, bez ręcznej konfiguracji.
Zobacz, co jest w zestawie, na stronie kreatora stron WEMASY albo sprawdź plany na stronie z cennikiem.
Najczęściej zadawane pytania
Skąd mam wiedzieć, czy moja strona jest przyjazna dla telefonów?
Przejdź przez swoją stronę na prawdziwym telefonie. Przetestuj każdą podstronę, każdą pozycję nawigacji, każdy formularz i każdy przycisk. Wyszukiwarki udostępniają też bezpłatne narzędzia do testowania wersji mobilnej, w których wpisujesz adres URL, a one wskazują konkretne problemy. Połączenie ręcznego przejścia i kontroli narzędziem pokaże najważniejsze problemy. Podglądy mobilne w przeglądarce są przydatne podczas pracy, ale nie oddają w pełni doświadczenia na prawdziwym urządzeniu. W kreatorze stron WEMASY możesz to ustawić bezpośrednio na swojej stronie.
Czy mogę dostosować istniejącą stronę do telefonów bez budowania jej od nowa?
To zależy od tego, jak strona została zbudowana. W przypadku stron zbudowanych w nowoczesnych kreatorach często można poprawić wygląd na telefonie, zmieniając ustawienia szablonu, zmniejszając obrazy lub przechodząc na lepszy szablon. Strony zbudowane na własnym kodzie lub starszych platformach mogą wymagać poważniejszej pracy. W niektórych przypadkach odbudowanie na aktualnej platformie jest szybsze i daje lepszy wynik niż próby doprowadzenia starej strony do porządku.
Czy strona przyjazna dla telefonów zajmuje wyższe pozycje w wynikach wyszukiwania?
Wyszukiwarki traktują wersję mobilną Twojej strony jako główną do indeksowania i oceny pozycji. Strona, która dobrze działa na telefonie i szybko się na nim ładuje, zwykle wypada lepiej niż taka zbudowana głównie z myślą o komputerze. Poza korzyścią w pozycjach strona przyjazna dla telefonów dłużej zatrzymuje odwiedzających, zmniejsza współczynnik odrzuceń i lepiej konwertuje. Te sygnały behawioralne wpływają też na długoterminowe wyniki w wyszukiwarce.
Jaki jest minimalny rozmiar czcionki na stronie mobilnej?
Powszechnie zalecanym minimum czytelności na telefonie jest rozmiar czcionki tekstu podstawowego 16 pikseli. Poniżej tego tekst trudno czytać bez powiększania. Nagłówki powinny skalować się proporcjonalnie, by nie przytłaczały ekranu. Odstęp między wierszami wynoszący co najmniej 1,5 rozmiaru czcionki poprawia czytelność na małych ekranach, zwłaszcza przy dłuższych akapitach.
Jak duże powinny być przyciski na stronie mobilnej?
Dla przycisków mobilnych powszechnie zaleca się minimalny obszar dotyku 44 na 44 piksele. Daje to palcowi wyraźny cel i zmniejsza przypadkowe dotknięcia sąsiednich elementów. Przyciski powinny też mieć między sobą na tyle miejsca, by dotknięcie jednego nie zostało odczytane jako dotknięcie czegoś obok. Przyciski wezwania do działania powinny być duże, wyraźnie odróżniać się wizualnie i dać się łatwo dosięgnąć kciukiem bez zmiany chwytu telefonu.