Mobile First

Mobile first — dlaczego dziś to standard, a nie dodatek

Pamiętam czasy, kiedy "wersja mobilna" oznaczała okrojoną kopię strony desktopowej, często z połową treści i nawigacją, która ledwo działała. Wiele firm wciąż tak podchodzi do tematu. Tymczasem ponad 60% ruchu w internecie pochodzi dziś z telefonów. Klient, który szuka firmy, oferty czy cennika, robi to najczęściej w drodze, w przerwie na kawę albo wieczorem na kanapie — na smartfonie.

Poniżej screen z Google Analytics jednego z naszych klientów. Ponad 70% odwiedzin pochodzi z urządzeń mobilnych. To nie wyjątek — u większości firm usługowych widzimy podobne proporcje.

Jeśli strona ładuje się wolno, tekst jest za mały, a przycisk "Wyślij zapytanie" trzeba powiększać palcami, żeby go trafić — ten klient po prostu wychodzi. Nie wraca.

O co chodzi z mobile first

Mobile first to odwrócenie kolejności projektowania. Zamiast budować rozbudowaną wersję desktopową, a potem zastanawiać się, jak ją zmieścić na telefonie, zaczynamy od ekranu telefonu. Mały ekran, obsługa palcem, często kiepski zasięg — to są realne warunki, w jakich ludzie korzystają ze stron.

Brzmi jak ograniczenie, ale w praktyce to ćwiczenie z priorytetów. Na 375 pikselach szerokości nie zmieścisz wszystkiego, więc musisz wybrać: co jest najważniejsze? Numer telefonu, formularz kontaktowy, lista usług? Co może poczekać na wersję desktopową?

I tu zaczyna się magia tego podejścia. Kiedy ustalisz, co jest naprawdę istotne na małym ekranie, łatwo potem dobudować resztę dla tabletu i komputera. W drugą stronę — upychanie bogatego layoutu desktopowego na telefonie — prawie zawsze kończy się kompromisami, które bolą użytkownika.

Mobile first to nie to samo co responsywność

Często słyszę od klientów: "Moja strona jest responsywna, więc jest mobile first". Nie do końca. Responsywność to technika — strona dopasowuje się do szerokości ekranu. Ale jeśli została zaprojektowana najpierw na desktop, a dopiero potem "zmniejszona", to na telefonie może działać, ale raczej nie będzie wygodna.

Typowy scenariusz: masz piękną stronę na komputerze z trzema kolumnami, dużymi zdjęciami stockowymi i rozwijanymi mega-menu. Na telefonie te trzy kolumny układają się jedna pod drugą, tworząc nieskończoną taśmę przewijania. Zdjęcia ładują się w pełnej rozdzielczości, bo nikt nie pomyślał o optymalizacji. Menu wymaga trzech kliknięć, żeby dojść do cennika. Technicznie responsywna? Tak. Wygodna na telefonie? Niekoniecznie.

Mobile first podchodzi do tego inaczej. Wersja na telefonie nie jest kompromisem — jest punktem wyjścia.

Google patrzy na wersję mobilną

Od kilku lat Google stosuje mobile-first indexing. To znaczy, że robot Google ocenia stronę głównie na podstawie jej wersji mobilnej. Wersja desktopowa może wyglądać świetnie, ale jeśli na telefonie brakuje treści, nagłówki są inne, meta opisy niepełne albo dane strukturalne się nie zgadzają — Google to widzi i może obniżyć pozycję w wynikach wyszukiwania.

Spotkałem się z sytuacjami, gdzie klient miał dobrze zoptymalizowaną stronę na desktopie, ale wersja mobilna ukrywała połowę treści za przyciskami "pokaż więcej", które Google nie zawsze poprawnie interpretował. Efekt? Spadek widoczności, mimo że "strona działała na telefonie".

Żeby uniknąć takich problemów, wersja mobilna powinna zawierać te same treści, nagłówki, meta tagi i dane strukturalne co desktopowa. Robot Google musi mieć dostęp do wszystkich zasobów potrzebnych do wyrenderowania strony — żadnych blokad w robots.txt, żadnych ukrytych sekcji.

Co z tego ma firma

Na małym ekranie nie ma miejsca na bałagan. Każdy element musi mieć powód, żeby tam być. I to jest właśnie zaleta mobile first z perspektywy biznesu - zmusza do porządku.

Użytkownik na telefonie chce zrobić jedną z kilku rzeczy: znaleźć numer telefonu, sprawdzić ofertę, wysłać zapytanie albo kupić produkt. Jeśli na te działania trafia w ciągu kilku sekund, szansa na konwersję rośnie. Jeśli musi przewijać, szukać i zgadywać — zamyka stronę.

Jest jeszcze kwestia szybkości. Projektowanie od mobile naturalnie skłania do lekkości: mniej skryptów, mniejsze grafiki, prostszy kod. Szybsza strona to lepsze doświadczenie użytkownika i lepsze wyniki w Google. Dwa w jednym.

Najczęstsze błędy, które widzę

Przez lata pracy nad stronami firmowymi widziałem sporo powtarzających się problemów:

Ukrywanie treści na mobile. Klient ma obszerny opis usługi na desktopie, ale na telefonie pokazuje się tylko pierwszy akapit. Reszta znika albo chowa się za akordeonem. Google tego nie lubi, użytkownik też nie.

Za małe przyciski. Palec to nie kursor myszy. Przycisk o wysokości 30 pikseli, otoczony innymi klikalnymi elementami, to przepis na frustrację. Standardy mówią o minimum 44 pikselach — i mają rację.

Ciężkie grafiki. Zdjęcie 2000x1500 pikseli, które na telefonie wyświetla się w 375x250, ale waży tyle samo. Strona ładuje się 5 sekund na LTE. Połowa użytkowników odchodzi przed załadowaniem.

Skomplikowana nawigacja. Trzy poziomy menu, rozwijane podmenu, mega-menu z ikonkami — na desktopie wygląda profesjonalnie, na telefonie jest koszmarem. Dobra nawigacja mobilna jest płaska i prowadzi użytkownika do celu w dwóch kliknięciach.

Niespójne meta dane między wersjami. Inny title na desktopie, inny na mobile. Brak danych strukturalnych w wersji mobilnej. Błędne tagi canonical. To techniczne detale, ale potrafią skutecznie zepsuć widoczność w Google.

Jak podejść do tego w praktyce

Zacznij od pytania: co użytkownik chce zrobić na mojej stronie? Nie co ja chcę mu pokazać, ale czego on szuka. Dla firmy usługowej to zazwyczaj kontakt i oferta. Dla sklepu — produkty i koszyk. Dla bloga — treść i czytelność.

Potem zaprojektuj układ na telefon. Jedna kolumna, krótkie bloki tekstu, wyraźne nagłówki, widoczny przycisk akcji. Nic więcej na start. Dopiero gdy to działa dobrze na małym ekranie, rozbuduj o dodatkowe elementy dla tabletu i komputera — boczne kolumny, większe galerie, bardziej rozbudowane sekcje.

Na koniec — testuj. Nie w symulatorze przeglądarki, tylko na prawdziwym telefonie. Kliknij każdy przycisk kciukiem. Wypełnij formularz jedną ręką. Sprawdź, ile czasu zajmuje załadowanie strony na połączeniu 4G. Dopiero wtedy wiesz, czy strona jest naprawdę gotowa.

Mobile first to po prostu rozsądek

Nie traktuję mobile first jako trendu czy modnego hasła. To po prostu logiczne podejście do projektowania stron w czasach, gdy większość ludzi przegląda internet na telefonie. Zaczynasz od tego, co najważniejsze, budujesz prostą i szybką podstawę, a potem dodajesz resztę. Efekt: strona, która dobrze działa wszędzie, a nie tylko na monitorze w biurze.

Jeśli Twoja strona firmowa powstała "od desktopu" i czujesz, że na telefonie mogłoby być lepiej — warto to przemyśleć. Czasem wystarczy korekta layoutu i optymalizacja grafik, czasem trzeba zaprojektować stronę od nowa z myślą o mobile.

Chętnie porozmawiamy o tym, jak to wygląda w przypadku Twojej strony. Zapraszamy do naszego biura w Olsztynie przy ul. 1 Maja 13 — usiądziemy przy kawie, przejrzymy stronę na telefonie i powiemy wprost, co można poprawić.