Spis treści
70% polskiego ruchu internetowego to mobile, ale 80% designerów wciąż zaczyna projekt od desktopa. Skutek: strona „wygląda OK na desktop”, „trochę gorzej na mobile” — i dziwią się, dlaczego konwersja na mobilu jest 3× niższa. Mobile-first to nie trend — to fundamentalne podejście do projektowania.
W skrócie
- 70% ruchu w PL = smartfon. Twoja strona MUSI działać świetnie na mobile.
- Mobile-first = projektujesz od mobile do desktop, nie odwrotnie.
- Daje: szybszą stronę, lepszy UX, wyższą konwersję, lepszy SEO (mobile-first indexing Google).
- Wymaga: przemyślenia priorytetów — co MUSI być na pierwszym ekranie mobilnym.
Po co mobile-first
1. Google indexuje mobilną wersję
Od 2019 Google używa mobile-first indexing — to mobilna wersja decyduje o pozycji w wyszukiwarce, nie desktop. Słaba mobile = niskie pozycje, niezależnie jak ładnie wygląda desktop.
2. Realny ruch jest mobilny
W naszych klientach (50+ sklepów):
– E-commerce: 65–80% mobile
– Strony usługowe: 55–70% mobile
– B2B: 40–55% mobile (niżej, bo praca z biura, ale i tak duże)
3. Mobile to twardszy challenge
- Mniejszy ekran — mniej miejsca na treść
- Słabszy procesor — wszystko musi być lekkie
- Wolniejsza sieć — często 4G zamiast światłowodu
- Touch zamiast mysza — większe target size, brak hover
Jeśli zaprojektujesz dobrze na mobile, na desktop „rozszerzysz” łatwo. Odwrotnie: kompresja desktop do mobile to katastrofa.
7 zasad mobile-first
1. Zacznij projektowanie od najmniejszego ekranu
W Figma / Adobe XD → otwórz nowy projekt → frame 375×667 px (iPhone SE — najmniejszy nadal popularny w 2026).
Zaprojektuj wszystkie kluczowe ekrany na tym formacie. Dopiero potem rozszerzaj do tabletu (768) i desktopa (1280+).
2. Priorytetyzuj treść
Na 375 px mieści się bardzo mało. Każdy element MUSI być potrzebny. Pytanie kontrolne dla każdego elementu na mobile:
„Czy bez tego strona traci wartość dla użytkownika?”
Jeśli NIE — wyrzuć (na mobile). Możesz pokazać na desktopie.
3. CTA na pierwszym ekranie mobile
Na desktopie hero z hasłem może zająć całe 100vh i CTA dopiero w drugim ekranie. Na mobile to NIEDOPUSZCZALNE — CTA musi być widoczne na pierwszym ekranie (above the fold).
Dobra praktyka: mniejszy hero na mobile (60vh max), CTA bezpośrednio pod hasłem, nie w drugim ekranie.
4. Touch targets min. 44×44 px
Apple Human Interface Guidelines: minimum 44 px kwadrat dla każdego klikalnego elementu. WCAG 2.2: 24×24 (mniejsze, ale wciąż bezpieczne).
Najczęstsze błędy:
– Ikony social media w footer 16×16 (FAIL)
– Linki w paragraph 12 px font (FAIL — palec ich nie trafia)
– Buttony „Kup” o szerokości 100 px (FAIL na mobile)
Naprawa: padding wokół klikalnych elementów min. 12 px każdej strony.
5. Jednokolumnowy layout
Multi-column na mobile = klient zoom-uje, frustruje się, wychodzi.
Mobile = jedna kolumna, każda sekcja stack-uje się pionowo. Wyjątki: bento grid (2 kolumny dla małych tile’i), galeria zdjęć (2-3 kolumny).
6. Typografia czytelna na mobile
- Body text: 16–18 px (nie mniej!)
- Line height: 1,5–1,6 (więcej niż desktop)
- Line length: 45–75 znaków (czyli ~30–35 znaków na mobile)
- Headings: mniejsze niż desktop (H1 56 px → 32 px na mobile)
7. Gesty zamiast hover
Hover nie istnieje na touchu. Każdy hover effect musi mieć alternatywę na tap.
Przykład: karta produktu z hover „Quick View”.
– Desktop: pokazuje „Quick View” przy hover
– Mobile: ikona „i” w rogu karty, którą klient kliknie
Breakpointy w 2026
Standardowe breakpointy:
/* Mobile (default) */
/* < 640px */
/* Tablet */
@media (min-width: 640px) { }
/* Tablet landscape / small laptop */
@media (min-width: 768px) { }
/* Desktop */
@media (min-width: 1024px) { }
/* Large desktop */
@media (min-width: 1280px) { }
/* XL desktop */
@media (min-width: 1536px) { }
Mobile-first CSS: zaczynasz pisać style bez media query (defaults dla mobile), potem dodajesz media query dla większych ekranów:
/* Mobile - default */
.button {
font-size: 16px;
padding: 12px 24px;
width: 100%;
}
/* Tablet+ */
@media (min-width: 768px) {
.button {
font-size: 18px;
width: auto;
}
}
NIE odwrotnie! Pisanie „desktop-first” (style desktop, potem @media max-width: 768px ze zmianami dla mobile) to stary, zły schemat.
Mobile-first w WordPress / Elementor
Elementor ma trzy domyślne breakpointy: Desktop, Tablet, Mobile. Niestety domyślnie projektujesz dla desktopa.
Workaround:
- Wymuś sobie kolejność: najpierw kliknij ikonę „Mobile” → projektuj dla 375 px
- Dopiero potem przełącz na „Tablet” i „Desktop”, dostosowując
- Używaj opcji „Hide on Desktop / Tablet / Mobile” — nie wszystko musi być na każdym ekranie
- Mniejsze padding sekcji na mobile (Elementor → Section → Mobile → Padding 20 px zamiast 80 px)
Najczęstsze błędy mobile
Błąd 1: Tekst za mały do przeczytania
Designer projektuje na 13″ MacBook → wszystko mieści się ładnie. Na 375 px ekranie te same elementy są za małe i ściśnięte.
Test: otwórz stronę na realnym telefonie (nie DevTools symulator), bez okularów. Czytelne?
Błąd 2: CTA niewidoczne lub tracone
Klient na mobile często pomija CTA, jeśli jest tylko w hero (potem tylko skrolla, traci kontekst).
Naprawa: sticky CTA bottom — pasek z CTA przylega do dolnej krawędzi ekranu, zawsze widoczny. Standard 2026.
Błąd 3: Pop-upy zasłaniające treść
Google penalizuje „intrusive interstitials” na mobile. Pop-up „Zapisz się do newslettera” zajmujący 80% ekranu = -10–15 pozycji w SERP.
Wyjątki dozwolone:
– Cookie banner (legalny wymóg)
– Pop-up po kliknięciu w button (intencja użytkownika)
– Bottom slide-in (zajmuje 20% ekranu, łatwy do zamknięcia)
Błąd 4: Iframe Google Maps niezoptymalizowany
Iframe na mapie ładuje 800 KB + blokuje scroll na mobile (palec łapie scroll mapy zamiast strony).
Naprawa: statyczny obraz mapy + przycisk „Otwórz w Google Maps” → otwiera natywną aplikację.
Błąd 5: Formularze bez auto-fill
Wpisywanie 8 pól adresu palcem na mobile = klient odpada.
Naprawa:
– autocomplete="email", autocomplete="tel", autocomplete="address-line1" na każdym polu
– Google Places API dla adresu (auto-uzupełnianie z 1 pola)
– Walidacja inline (nie czekaj do submit)
Test mobile — pełna checklist
Otwórz swoją stronę na telefonie i sprawdź:
- [ ] Czytelność tekstu bez zoomu
- [ ] CTA widoczne na pierwszym ekranie
- [ ] Touch targets >24 px każdy
- [ ] Brak horizontal scroll (strona nie „wystaje”)
- [ ] Formularze auto-uzupełniają się
- [ ] Menu mobilne otwiera się klikiem hamburger
- [ ] Nie ma pop-upów przeszkadzających
- [ ] Klikam wszędzie palcem bez frustracji
- [ ] Hero ładuje się <2 sekundy
- [ ] Pełen flow zakupu działa (jeśli sklep)
Co dalej
W tym tygodniu:
- Otwórz swoją stronę na realnym telefonie
- Spisz 10 rzeczy, które frustrują na mobile
- Zacznij od 3 najszybszych do naprawy
- Po naprawie zmierz konwersję mobile vs przed
Każdy nasz projekt to mobile-first — w cenie pakietu Standard (2 000 zł) dostajesz design zaprojektowany od najmniejszego ekranu, testowany na realnych urządzeniach. Sprawdź pakiety.
