Mobile commerce - optymalizacja sklepu dla telefonów

Typowa sytuacja:
- Desktop conversion: 3%
- Mobile conversion: 1.5%
- Mobile traffic: 70%
- = tracisz ogromną sprzedaż

Problemy mobile:
- Strona projektowana dla desktop
- Za wolne ładowanie (mobile = często 3G/4G)
- Małe przyciski, trudno kliknąć
- Skomplikowana nawigacja
- Checkout nie dostosowany
- Pop-upy blokujące ekran

Zachowania mobile users:
- Przeglądają, porównują
- Mniej cierpliwości (3s max na ładowanie)
- Często przerywają, wracają później
- Kupują prostsze produkty impulsowo

Touch-friendly elementy:
- Przyciski min. 44x44px (Apple guideline)
- Odstępy między klikalnymi elementami
- Większy tekst (min. 16px base)

Nawigacja:
- Hamburger menu (kontrowersyjne ale standard)
- Sticky header z koszykiem
- Wyszukiwarka widoczna
- Breadcrumbs dla orientacji

Strona produktu:
- Zdjęcia pełnej szerokości, swipe gallery
- Sticky "Dodaj do koszyka"
- Accordion dla długich opisów
- Warianty jako przyciski (nie dropdown)

Koszyk:
- Mini-cart (slide-in, nie nowa strona)
- Edit quantity inline
- Usuń jednym kliknięciem

Eliminuj:
- Hover effects (nie ma hover na touch)
- Zbędne animacje (wolne)
- Multi-column layout na małych ekranach

Dlaczego kluczowa:
- 53% opuszcza stronę >3s ładowania
- Google preferuje szybkie strony (ranking)
- Mobile często na wolniejszym połączeniu

Metryki:
- LCP (Largest Contentful Paint): <2.5s
- FID (First Input Delay): <100ms
- CLS (Cumulative Layout Shift): <0.1
- Google PageSpeed Insights: >70 mobile

Optymalizacje:
- Lazy loading obrazów
- WebP format (30% mniejszy)
- Critical CSS inline
- Defer non-critical JS
- CDN (Cloudflare)
- Cache (LiteSpeed Cache, WP Rocket)

Hosting:
- Szybki serwer (LiteSpeed)
- Blisko użytkowników (EU dla PL)
- HTTP/2, HTTP/3

AMP:
- Accelerated Mobile Pages
- Ultra szybkie, ale ograniczone
- Dla bloga/content, nie dla sklepu

Uproszczenie:
- Jeszcze mniej pól niż desktop
- Autouzupełnianie numeru karty (kamera)
- One-tap payment (Apple Pay, Google Pay)

Wpisywanie danych:
- Odpowiednie typy inputów (tel, email)
- Klawiatura numeryczna dla kodu pocztowego
- Autofill adresu (Google Places)

Progress:
- Widoczny progress bar
- Numerowane kroki
- Możliwość cofnięcia

Payment:
- BLIK (6 cyfr, szybko)
- Apple Pay / Google Pay (one-tap)
- Zapisane karty

Po zakupie:
- Potwierdzenie na ekranie
- Link do śledzenia (nie wymagaj logowania)

Nie tylko resize okna:
- Chrome DevTools (F12 → Toggle device)
- To tylko symulacja!
- Nie uwzględnia: wydajności, połączenia, touch

Prawdziwe urządzenia:
- Testuj na iPhone i Android
- Różne rozmiary ekranów
- Różne przeglądarki (Safari, Chrome mobile)

Narzędzia:
- BrowserStack (emulacja wielu urządzeń)
- Google PageSpeed Insights (mobile score)
- Google Mobile-Friendly Test
- Hotjar/Clarity (nagrania sesji mobile)

User testing:
- Poproś 5 osób o zakup na telefonie
- Obserwuj gdzie mają problemy
- Feedback > analytics

Metryki do śledzenia:
- Bounce rate mobile vs desktop
- Conversion rate mobile vs desktop
- Pages per session mobile
- Cart abandonment mobile