Klient szuka „hydraulik awaria” w autobusie, klika Twoją stronę w Google — i widzi mikroskopijny numer telefonu, menu, które nie reaguje, albo formularz, w którym kursor skacze między polami. Wraca do wyników wyszukiwania. Ty widzisz w statystykach „wejście z mobile” i 100% odrzuceń — i zgadujesz, że to „zła reklama”. 📱
Mobile-first to nie modne hasło agencji. To dwa fakty: Google ocenia stronę głównie po wersji mobile, a większość Twoich klientów — lokalnych usług, sklepów, B2C — i tak przegląda ofertę na telefonie. Ten wpis to checklista do samodzielnego audytu strony firmowej i sklepu: co sprawdzić, w jakiej kolejności i gdzie najczęściej uciekają leady.
Mobile to często ten sam klient, który szuka Cię „w okolicy”.
📱 Mobile-first — dwa znaczenia, jeden cel
| Pojęcie | Co to znaczy | Co robisz |
|---|---|---|
| Indeks mobilny Google | Robot Google patrzy głównie na wersję mobilną | Treści, meta i structured data muszą być na mobile — nie ukrywaj oferty tylko na desktop |
| Projekt mobile-first | Najpierw projektujesz pod telefon, potem rozszerzasz na desktop | Testujesz na telefonie przed akceptacją layoutu od agencji |
Cel biznesowy: klient na mobile dowiezie się, zadzwoni, wyśle formularz albo doda do koszyka — bez zoomowania i bez frustracji.
🔍 Test w 15 minut — zanim otworzysz narzędzia
Weź swój telefon (nie tylko emulator). W trybie incognito wejdź na:
- Stronę główną
- Najważniejszą usługę / kategorię sklepu
- Kontakt lub koszyk
Zadaj sobie pytania:
- Czy w pierwszych 3 sekundach wiesz, czym firma się zajmuje?
- Czy telefon lub WhatsApp da się kliknąć jednym tapnięciem?
- Czy menu hamburger otwiera się od razu i da się zamknąć?
- Czy formularz da się wypełnić bez zoomowania?
- Czy nic nie zasłania przycisku CTA (cookie bar, pop-up, chat)?
Jeśli na któreś z pytań odpowiesz „nie” — masz priorytet na ten tydzień. Reszta checklisty to uszczegółowienie.
✅ Checklista mobile-first — strona firmowa
1. Nawigacja i pierwszy ekran
- Logo + krótki nagłówek widać bez scrolla (above the fold).
- Menu mobile: max 2 poziomy — Oferta, O nas, Kontakt, Blog; reszta w stopce.
- Hamburger otwiera i zamyka bez lagów; tło nie blokuje treści na stałe.
- Sticky pasek z telefonem lub „Zadzwoń” — opcjonalnie, ale skuteczne u usług lokalnych.
- Brak poziomego scrolla (treść nie „wychodzi” poza ekran).
2. Czytelność i typografia
- Tekst główny ≥ 16 px; nagłówki wyraźnie większe, z odstępem.
- Kontrast tekstu i tła — szary na jasnoszarym to klasyk, który nie działa na słońcu.
- Akapity krótkie (3–4 linie); listy zamiast ścian tekstu.
- Linki w treści wyróżnione kolorem — nie tylko podkreślenie.
3. Cele dotykowe (tap targets)
- Przyciski i linki w menu: klikalny obszar min. ~48×48 px.
- Odstęp między linkami w stopce — bez „misclicków”.
- Ikony social i telefon — wystarczająco duże pod kciuk, nie 24 px w kącie.
4. Formularze i kontakt
- Pola input duże, z etykietą nad polem (nie tylko placeholder).
- Klawiatura numeryczna przy polu telefonu (
type="tel"). - Przycisk „Wyślij” pełnej szerokości na mobile — łatwy do trafienia.
- Po wysłaniu: komunikat sukcesu widoczny bez scrolla.
- Click-to-call na numerze —
tel:+48123456789.
5. Media i layout
- Obrazy skalowane do szerokości ekranu — bez overflow.
- Wideo / mapa Google: lazy load lub placeholder — nie blokuj sekcji hero.
- Karuzela na mobile — swipe działa; strzałki nie są jedyną opcją.
- Cookie bar nie zasłania całego dolnego paska z telefonem.
6. Szybkość (skrót — szczegóły w CWV)
- Hero lekki — jedno zdjęcie skompresowane, nie slider z pięcioma slajdami 3 MB.
- PageSpeed mobile na stronie głównej — czerwony LCP = priorytet.
- Fonty — max 2 rodziny; bez ładowania 6 wariantów „na zapas”.
🛒 Checklista mobile-first — sklep internetowy
Dodatkowo do punktów powyżej:
Lista i karta produktu
- Miniatura + cena + nazwa czytelne na liście bez zoomowania.
- Filtry collapsible — nie 40 checkboxów nad foldem.
- Sortowanie i liczba wyników widoczne bez ukrytego menu.
- Karta produktu: galeria swipe, cena, dostępność, przycisk „Do koszyka” nad foldem lub tuż pod zdjęciem.
Koszyk i checkout
- Koszyk: edycja ilości i usuwanie bez przechodzenia na desktop layout.
- Koszt dostawy widoczny przed ostatnim krokiem — nie „niespodzianka” w podsumowaniu.
- Checkout możliwie krótki — guest checkout, Apple Pay / Google Pay jeśli platforma pozwala.
- Pola adresu z autouzupełnianiem; walidacja błędów przy polu, nie tylko na górze strony.
Zaufanie na małym ekranie
- Opinie lub liczba ocen przy produkcie — skrócone, nie karuzela 20 ekranów.
- Link do regulaminu i zwrotów w stopce checkoutu — jeden tap.
- Numer infolinii klikalny na etapie „pytanie przed zakupem”.
📊 Priorytety — co naprawić w jakiej kolejności
| Priorytet | Problem | Wpływ |
|---|---|---|
| P1 | Brak klikalnego telefonu / CTA | Utrata leadów od razu |
| P2 | Wolne LCP (hero 3+ s) | Odrzucenia przed treścią |
| P3 | Niedziałające menu mobile | Użytkownik nie znajduje oferty |
| P4 | Formularz / checkout muli | Porzucenie na końcu lejka |
| P5 | CLS — skaczący layout | Misclicki, frustracja |
| P6 | Drobiazgi wizualne | Ważne, ale po P1–P4 |
Przy budżecie ograniczonym: P1 → P2 → P3. Reszta nie pomoże, jeśli nikt nie dochodzi do formularza.
🛠️ Narzędzia — darmowe i wystarczające
- Twój telefon — najważniejszy test; emulator w Chrome (F12 → urządzenie) to uzupełnienie.
- PageSpeed Insights — mobile, 3 URL-e: home, oferta, kontakt/koszyk.
- Google Search Console → Doświadczenie — czy Google widzi problemy mobile na Twoich stronach.
- Analytics — segment mobile: bounce rate vs desktop na tych samych landingach (SEO vs PPC — słaby UX na mobile psuje też Ads).
Nie potrzebujesz drogiego audytu UX, żeby wyłapać 80% błędów — wystarczy telefon i godzina systematycznego klikania.
🚫 Najczęstsze błędy małych firm
„Desktop wygląda super — mobile dogoni później” — większość ruchu organicznego i lokalnego i tak pochodzi z urządzeń mobilnych; „później” = stracone miesiące.
„Mamy aplikację / PWA, strona może być słaba” — klient z Google trafia na stronę, nie do sklepu z aplikacjami.
„Zmniejszymy czcionkę, żeby wszystko zmieścić” — czytelność i konwersja spadają; lepiej skrócić tekst niż font.
„Pop-up z newsletterem na pełnym ekranie mobile” — najszybsza droga do bounce; opóźnij do scrolla lub wyłącz na mobile.
„Testujemy tylko na iPhone w biurze” — sprawdź tańszy Android i słabsze 4G; tam często siedzą Twoi klienci.
„Agencja da responsywność w pakiecie” — responsywność ≠ mobile-first UX; Ty musisz kliknąć i zaakceptować.
🔄 Mobile-first a redesign
Planujesz nową stronę? Testuj mockupy na telefonie przed podpisaniem akceptacji — nie tylko PDF na desktopie. Przy wdrożeniu pamiętaj o mapie URL i przekierowaniach: piękny mobile z nowymi adresami bez 301 też zabija ruch.
Checklistę mobile warto dołączyć do checklisty publikacji obok sitemap i 301.
✅ Checklist — wydruk mentalny przed akceptacją strony
- 📱 Test na własnym telefonie: home, oferta, kontakt (lub koszyk).
- ☎️ Click-to-call i widoczny CTA above the fold.
- 🍔 Menu mobile działa; brak poziomego scrolla.
- 📝 Formularz łatwy do wypełnienia kciukiem; font ≥ 16 px.
- ⚡ PageSpeed mobile — LCP i hero pod kontrolą.
- 🛒 (Sklep) cena, dostawa, koszyk — bez niespodzianek.
- 📊 Porównanie bounce mobile vs desktop w Analytics.
💡 Podsumowanie
Mobile-first checklista to nie lista dla programisty — to lista dla właściciela firmy, który odpowiada za to, czy strona sprzedaje na telefonie. Google indeksuje wersję mobilną, klienci szukają usług w drodze, a konkurencja jest jednym kciukiem dalej.
Nie musisz wdrażać wszystkiego naraz. Zacznij od telefonu, szybkości pierwszego ekranu i działającego menu — to trzy ruchy, które najczęściej odblokowują leady z Google. Reszta checklisty to kolejne iteracje, nie warunek startu.
Następny krok: ustaw timer na 15 minut, wejdź na swoją stronę główną z telefonu i zapisz trzy pierwsze rzeczy, które irytują — od pierwszej z listy zacznij poprawki w tym tygodniu. 📲