Dlaczego wersja na telefon jest dziś wersją główną
Google działa w trybie, który nazywa mobile-first indexing. Do indeksowania i oceny strony używa jej wersji mobilnej, odwiedzanej przez robota, który przedstawia się jako smartfon. Przejście na ten model Google ogłosiło jako zakończone w 2023 roku.
Konsekwencja jest prosta: jeśli coś jest widoczne tylko na komputerze, a na telefonie zostało ukryte albo usunięte, wyszukiwarka może tego w ogóle nie wziąć pod uwagę. Strona, która na telefonie jest okrojoną wersją, traci więc nie tylko wygodę, ale też część widoczności.
Drugi powód jest bardziej ludzki. Wielu klientów pierwszy raz zobaczy Twoją firmę właśnie na telefonie — po wyszukaniu w Google, po kliknięciu linku w mediach społecznościowych albo w Profilu Firmy w Google. Często w biegu, jedną ręką, przy słabszym zasięgu. Jeśli wtedy strona sprawia kłopot, rzadko dostaje drugą szansę.
Responsywność, mobile first, wersja „m.” — co to znaczy
Te pojęcia często się mieszają, a opisują różne rzeczy.
- Strona responsywna to jedna strona pod jednym adresem, której układ sam dopasowuje się do szerokości ekranu. Na komputerze kolumny stoją obok siebie, na telefonie układają się jedna pod drugą. Google uznaje to rozwiązanie za najłatwiejsze we wdrożeniu i utrzymaniu.
- Osobna wersja mobilna to oddzielna strona, zwykle pod adresem w rodzaju m.twojafirma.pl. Kiedyś popularna, dziś sprawia więcej kłopotu niż pożytku: dwie wersje treści do pilnowania, dwa zestawy adresów i ryzyko, że na telefonie czegoś zabraknie.
- Mobile first to podejście do projektowania. Zaczynam od najmniejszego ekranu i odpowiadam na pytanie: co klient musi zobaczyć i zrobić, gdy ma przed sobą tylko kawałek ekranu? Dopiero potem rozbudowuję układ dla tabletu i komputera.
Responsywność jest dziś standardem i nie powinna być dopłatą. Mobile first to już kwestia jakości projektu. Strona może być technicznie responsywna, a mimo to niewygodna na telefonie — bo zaprojektowano ją na duży monitor i tylko „ściśnięto” do mniejszego ekranu.
Ta sama treść na telefonie i na komputerze
Skoro Google patrzy na wersję mobilną, obie wersje powinny mieć tę samą zawartość. W swoich wskazówkach Google wymienia kilka konkretów. Na telefonie i na komputerze powinny być:
- te same treści, łącznie z nagłówkami,
- te same tytuły i opisy stron,
- te same dane strukturalne,
- te same opisy alternatywne zdjęć,
- te same ustawienia dla robotów, na przykład znaczniki blokujące indeksowanie.
Nie znaczy to, że na telefonie wszystko musi być widoczne naraz. Długie sekcje można zwinąć w rozwijane bloki, a szeroką tabelę zamienić na listę. Ważne, żeby główna treść była w kodzie strony od początku, a nie doładowywała się dopiero po kliknięciu — tego Google wprost odradza.
Mobile first nie oznacza też „mniej treści na telefonie”. Oznacza lepszą kolejność: najważniejsze informacje na górze, szczegóły niżej.
Jak zaprojektować stronę na telefon — praktyczna lista
Pierwszy ekran
Na telefonie pierwszy widok to kilka linijek tekstu. Muszą się w nich zmieścić odpowiedzi na trzy pytania: co robisz, gdzie działasz i jak się z Tobą skontaktować. Duże zdjęcie, które na komputerze wygląda efektownie, na telefonie potrafi zająć cały ekran i zepchnąć ofertę niżej. Czasem lepiej je przyciąć albo przenieść.
Tekst i czytelność
- tekst czytelny bez powiększania, w wyraźnym kontraście z tłem,
- krótsze akapity — ten sam akapit na wąskim ekranie robi się kilka razy dłuższy,
- nagłówki, które pozwalają przewinąć stronę wzrokiem i znaleźć swoją sekcję,
- brak przewijania w bok: nic nie może wystawać poza ekran, także tabele i długie adresy e-mail.
Przyciski i linki dla kciuka
Według zaleceń web.dev, serwisu zespołu Chrome w Google, przyciski i linki powinny mieć co najmniej około 48 pikseli, czyli mniej więcej 9 milimetrów — tyle, ile opuszka palca. Między sąsiednimi elementami warto zostawić około 8 pikseli odstępu. Inaczej klient trafia nie w to, co chciał.
Numer telefonu powinien być klikalny, a przycisk kontaktu łatwy do znalezienia: w nagłówku albo na końcu każdej sekcji z ofertą.
Menu
Na telefonie menu zwykle chowa się pod ikoną. To w porządku, o ile ikona jest rozpoznawalna, a najważniejsza akcja — telefon lub przycisk zapytania — nie jest ukryta razem z resztą. Jeśli w menu jest kilkanaście pozycji, to sygnał, że warto uporządkować strukturę strony, a nie tylko zmniejszyć czcionkę.
Formularze
- tylko niezbędne pola, bo każde dodatkowe pole na telefonie męczy bardziej niż na komputerze,
- pola dopasowane do treści: przy numerze telefonu pojawia się klawiatura numeryczna, przy adresie e-mail klawiatura ze znakiem @,
- działające autouzupełnianie, żeby nie trzeba było ręcznie wpisywać imienia i adresu,
- komunikaty o błędach przy konkretnym polu, widoczne bez szukania,
- przycisk wysyłki, którego nie zasłania klawiatura.
Więcej o tym, jak ułożyć formularz, żeby ludzie go wypełniali, piszę w artykule o formularzu kontaktowym.
Okienka i komunikaty
Wyskakujące okno z zapisem na newsletter, które na komputerze zajmuje część ekranu, na telefonie zasłania wszystko. Google w swoich wskazówkach dotyczących doświadczenia strony zaleca unikanie natrętnych okienek, które utrudniają dostęp do treści. Baner cookies jest potrzebny, ale też powinien być zwarty i dawać się szybko obsłużyć.
Szybkość na telefonie
Telefon ma zwykle słabszy procesor niż komputer i mniej stabilne łącze. Strona, która na biurowym komputerze ładuje się błyskawicznie, na telefonie w autobusie może się ciągnąć. Dlatego Google raportuje wskaźniki szybkości osobno dla telefonów i komputerów — i to te mobilne częściej wypadają gorzej.
Najwięcej daje tu przygotowanie zdjęć w kilku rozmiarach, żeby telefon nie pobierał obrazu przeznaczonego na wielki monitor, oraz ograniczenie skryptów, które obciążają procesor. Szczegóły opisuję w artykule o tym, jak sprawdzić i poprawić szybkość strony.
Jak przetestować stronę na telefonie
Kiedyś Google miał osobny test optymalizacji mobilnej i raport o obsłudze na urządzeniach mobilnych w Search Console. Oba zostały wycofane pod koniec 2023 roku. Dziś do oceny służą inne narzędzia, a przede wszystkim — zwykły telefon.
Test, który zrobisz sam w 10 minut
- Otwórz stronę na swoim telefonie, na danych komórkowych.
- Sprawdź, czy w pierwszym widoku wiesz, co firma robi i jak się z nią skontaktować.
- Przeczytaj jeden akapit bez powiększania.
- Dotknij numeru telefonu — czy otwiera się połączenie?
- Otwórz menu i przejdź do dwóch podstron.
- Wypełnij i wyślij formularz tak, jak zrobiłby to klient.
- Obróć telefon poziomo i sprawdź, czy nic się nie rozjeżdża.
- Poproś kogoś o to samo na innym telefonie, najlepiej starszym i z mniejszym ekranem.
Narzędzia
- PageSpeed Insights — wyniki dla urządzeń mobilnych pokazują szybkość i podpowiedzi, co poprawić.
- Lighthouse w przeglądarce Chrome — test wydajności, dostępności i dobrych praktyk. W narzędziach dla programistów można też podejrzeć stronę w rozmiarze różnych telefonów.
- Google Search Console — raport Core Web Vitals dla telefonów oraz sprawdzanie adresu URL, które pokazuje, jak Google widzi konkretną podstronę.
Podgląd w zmniejszonym oknie przeglądarki to dobry początek, ale nie zastąpi prawdziwego urządzenia. Nie pokaże, jak strona reaguje na dotyk, jak działa klawiatura w formularzu ani jak zachowuje się na słabym łączu.
Najczęstsze błędy wersji mobilnej
- treści ukryte na telefonie, bo „się nie zmieściły”,
- tabela z cennikiem, którą trzeba przewijać w bok,
- numer telefonu zapisany jako obrazek albo nieklikalny tekst,
- przyciski tak małe lub tak blisko siebie, że trafia się w sąsiedni,
- okienko z ofertą, które zasłania cały ekran zaraz po wejściu,
- karuzela, której slajdy na telefonie są nieczytelne,
- osadzone mapy i filmy, które przechwytują przewijanie i utrudniają przejście dalej,
- testowanie strony wyłącznie na komputerze projektanta.
Jak projektuję strony na telefon
Każdą stronę zaczynam od widoku mobilnego. Najpierw ustalam, co klient musi zobaczyć i zrobić na małym ekranie, a potem rozbudowuję układ dla większych. Przed publikacją sprawdzam stronę na prawdziwych telefonach: czytam, przewijam, klikam i wysyłam formularz.
Responsywność jest w cenie każdej strony, którą robię, tak samo jak szybkość i formularze. Strona od zera z 5–8 widokami zaczyna się od 5 990 zł netto, a odświeżenie istniejącej, z nowym wyglądem i wygodną wersją mobilną, od 3 490 zł netto. Jeśli Twoja obecna strona dobrze wygląda na komputerze, ale męczy na telefonie, często wystarczy właśnie odświeżenie, bez budowy od zera.