Designerzy mówią "mobile-first". Developerzy implementują "mobile-only". Klient na iPadzie i potem na 4K monitorze widzi puste pola i rozjeżdżający się układ. Oto 12 zasad, które rozwiązują to raz na zawsze.

1. Trzy breakpointy to za mało

Mobile/Tablet/Desktop to przeszłość. Współczesne: 360, 480, 768, 1024, 1280, 1440, 1920, 2560+. Min 5-6 breakpointów.

2. Fluid typography z clamp()

font-size: clamp(1rem, 2.5vw, 1.5rem) — tekst skaluje się płynnie zamiast skokowo. Magia jednej linii CSS.

3. Container queries > media queries

Komponenty reagują na swój kontener, nie na okno przeglądarki. Card w sidebar może wyglądać inaczej niż w main content. CSS @container.

4. CSS Grid + Flexbox to standard

Zapomnij o float i margin hacks. Grid do layoutów, Flexbox do komponentów.

5. Touch targets min 44x44px

Apple HIG, Material Design — wszyscy się zgadzają. Mniejsze guziki = frustracja na mobile.

6. Hamburger menu nie zawsze odpowiedź

Na 768px+ pokaż pełne menu. Hamburger ukrywa funkcjonalność — używaj tylko, gdy NIE MA miejsca.

7. Obrazy responsywne ze srcset i sizes

Nie wysyłaj 4K obrazka na telefon. z multiple sources albo srcset + sizes.

8. Pamiętaj o landscape mobile

iPhone położony na bok ma ~390x844 → 844x390. Twój hero z full-height nagle zajmuje 3 ekrany. Zabezpiecz.

9. Foldable devices (Galaxy Z Fold)

1768x2208 rozłożony. Wąski 530x2208 złożony. Sprawdź. To real świat 2026.

10. Dark mode + responsywność

Media query (prefers-color-scheme: dark). Min 4.5:1 kontrast nawet w dark mode.

11. Reduce motion dla accessibility

@media (prefers-reduced-motion: reduce) — wyłącz animacje. Część użytkowników dostaje zawrotów głowy.

12. Test na realnym sprzęcie

Chrome DevTools to nie wszystko. Pożycz Androida-budżetowca, starszy iPada. Tam zobaczysz problemy z performance i UX.

Kluczowe wnioski

  • Min 5-6 breakpointów dla nowoczesnego web.
  • Fluid typography z clamp() = magia.
  • Container queries > media queries dla komponentów.
  • Touch targets 44x44px obowiązkowo.
  • Testuj na realnym sprzęcie, nie tylko w DevTools.

Potrzebujesz wsparcia z tematu tego artykułu?

Zobacz: Projektowanie Stron