Szybka odpowiedź: responsywność strony to jej zdolność do dopasowania układu do szerokości ekranu – od telefonu, przez tablet, po monitor. Strona responsywna ma jeden adres i jedną treść, a zmienia się tylko sposób wyświetlania. Dla SEO to ważne, bo Google indeksuje i ocenia strony na podstawie ich wersji mobilnej (mobile-first indexing). Na telefonach liczy się też szybkość, mierzona wskaźnikami Core Web Vitals. Responsywność sprawdzisz w narzędziach deweloperskich przeglądarki, w PageSpeed Insights i – najlepiej – na prawdziwym telefonie.
Stan na październik 2026 r. Artykuł przepisałem i uzupełniłem o aktualne dane i techniki – pierwsza wersja ukazała się w 2023 r.
- 1. Co to jest responsywna strona internetowa?
- 2. Ilu użytkowników przegląda strony na telefonie?
- 3. Responsywność a SEO – jak to wpływa na pozycję w Google
- 4. Responsywność a wygoda użytkowników i sprzedaż
- 5. Jak zrobić responsywną stronę – techniki na 2026 rok
- 6. Jak sprawdzić responsywność strony?
- 7. Najczęstsze błędy w responsywności
- 8. Responsywność w WordPressie
- 9. Podsumowanie
- 10. FAQ – najczęściej zadawane pytania
- Źródła i dalsza lektura
1. Co to jest responsywna strona internetowa?
Responsywny projekt strony (RWD, Responsive Web Design) to sposób budowania stron, w którym ten sam kod i ta sama treść automatycznie dopasowują się do ekranu. Na telefonie kolumny układają się jedna pod drugą, menu chowa się pod ikoną, a obrazy zmniejszają się do szerokości ekranu. Na komputerze te same elementy stoją obok siebie.
Technicznie opiera się to na trzech elementach opisanych m.in. w kursie MDN o responsywnym projektowaniu:
- elastyczny układ – siatki CSS Grid i Flexbox zamiast sztywnych szerokości w pikselach,
- elastyczne obrazy – grafiki skalujące się do kontenera, w kilku rozmiarach (
srcset), - zapytania o media (media queries) – reguły CSS, które zmieniają układ od określonej szerokości ekranu.
Do tego dochodzi jedna linia w sekcji <head>, bez której przeglądarka na telefonie udaje szeroki ekran komputera:
<meta name="viewport" content="width=device-width, initial-scale=1">
Przykład prostej reguły „mobile-first”: domyślnie jedna kolumna, a od 768 px – dwie.
.uslugi { display: grid; gap: 24px; }
@media (min-width: 768px) {
.uslugi { grid-template-columns: 1fr 1fr; }
}2. Ilu użytkowników przegląda strony na telefonie?
Według StatCounter we wrześniu 2026 r. urządzenia mobilne odpowiadały w Polsce za ok. 44% odsłon stron, a komputery za ok. 56%. To średnia dla całego internetu. W usługach lokalnych, gastronomii czy branży beauty przewaga telefonów bywa dużo większa, a w B2B – mniejsza. Dlatego zawsze patrz na statystyki własnej strony, np. w Google Analytics 4.
Nawet jeśli większość Twoich klientów siedzi przy komputerze, Google i tak patrzy na wersję mobilną. O tym w następnym rozdziale.
3. Responsywność a SEO – jak to wpływa na pozycję w Google
Mobile-first indexing
Google indeksuje strony robotem udającym smartfon. W dokumentacji Search Central wprost zaleca się, żeby wersja mobilna zawierała tę samą treść co wersja na komputer – te same teksty, nagłówki, obrazy z opisami i dane strukturalne. Treść ukryta na telefonie albo uboższa „wersja m.” może zaszkodzić widoczności.
Core Web Vitals
Drugim powodem jest szybkość i wygoda. Google mierzy je wskaźnikami Core Web Vitals:
| Wskaźnik | Co mierzy | Dobry wynik |
|---|---|---|
| LCP | czas pojawienia się głównej treści | do 2,5 s |
| INP | szybkość reakcji na dotknięcie lub kliknięcie | poniżej 200 ms |
| CLS | przesuwanie się elementów podczas ładowania | poniżej 0,1 |
Na telefonach, przy słabszym procesorze i zasięgu, te wskaźniki wypadają zwykle gorzej niż na komputerze. Dlatego responsywność to nie tylko „czy się mieści”, ale też czy strona działa szybko.
Co z testem optymalizacji mobilnej?
Google wycofał osobne narzędzie „Test optymalizacji mobilnej” i raport „Obsługa na urządzeniach mobilnych” w Search Console. Dziś stronę sprawdzisz w Lighthouse (w Chrome) i w PageSpeed Insights, które pokazują też dane od prawdziwych użytkowników.
4. Responsywność a wygoda użytkowników i sprzedaż
Strona, którą trzeba powiększać palcami, traci klientów szybciej niż wolna. Na telefonie liczą się szczegóły:
- klikalny numer telefonu i przycisk „Wyznacz trasę” w widocznym miejscu,
- krótkie formularze z odpowiednim typem pól (np. klawiatura numeryczna przy telefonie),
- przyciski wystarczająco duże – wytyczne WCAG 2.2 zalecają co najmniej 24×24 px dla celu dotyku,
- czytelny tekst bez powiększania – w praktyce co najmniej 16 px,
- brak przewijania w poziomie i wyskakujących okien zasłaniających treść.
5. Jak zrobić responsywną stronę – techniki na 2026 rok
- Mobile-first – projektuj i pisz CSS najpierw dla najwęższego ekranu, a potem rozszerzaj układ zapytaniami
min-width. - Grid i Flexbox zamiast sztywnych szerokości i pozycjonowania absolutnego.
- Płynna typografia – funkcja
clamp()pozwala płynnie skalować nagłówki między telefonem a komputerem. - Zapytania kontenerowe (container queries) – komponent dopasowuje się do szerokości swojego kontenera, a nie całego ekranu. To idealne rozwiązanie dla kart czy boksów, które pojawiają się w różnych miejscach strony (MDN).
- Responsywne obrazy –
srcsetisizes, nowoczesne formaty WebP i AVIF oraz atrybutywidthiheight, żeby nic nie skakało. W WordPressie pomoże w tym darmowa wtyczka Netgold AVIF Converter. - Testy na prawdziwych urządzeniach – symulator w przeglądarce nie pokaże wszystkiego, np. działania klawiatury ekranowej.
6. Jak sprawdzić responsywność strony?
| Narzędzie | Co sprawdzisz |
|---|---|
| tryb urządzenia w Chrome DevTools (F12 → ikona telefonu) | wygląd strony na różnych szerokościach ekranu |
| PageSpeed Insights | wyniki Core Web Vitals na telefonie i komputerze, także od prawdziwych użytkowników |
| Lighthouse w Chrome | wydajność, dostępność, dobre praktyki i SEO |
| Google Search Console → Podstawowe wskaźniki internetowe | podstrony z problemami na urządzeniach mobilnych |
| Twój telefon i telefon kogoś z rodziny | prawdziwe wrażenia: tekst, przyciski, formularze |
7. Najczęstsze błędy w responsywności
| Błąd | Skutek | Jak naprawić |
|---|---|---|
| brak meta viewport | strona na telefonie wygląda jak pomniejszona wersja z komputera | dodaj meta viewport w <head> |
| tabele i obrazy szersze niż ekran | przewijanie w poziomie | max-width: 100%, przewijane kontenery dla tabel |
| treść ukryta na telefonie | Google może jej nie uwzględnić | pokaż treść, zmień tylko układ |
| za małe przyciski i linki obok siebie | pomyłki przy dotyku | większe odstępy, min. 24×24 px |
| ciężkie slidery i wideo w tle | wolne ładowanie, słaby LCP | statyczny obraz w odpowiednim rozmiarze |
| pop-up zasłaniający całą stronę | irytacja, szybkie wyjście | mniejszy baner lub wyświetlanie z opóźnieniem |
8. Responsywność w WordPressie
Praktycznie wszystkie współczesne motywy WordPress są responsywne, ale „responsywny motyw” nie oznacza jeszcze responsywnej strony. Wszystko psują zbyt szerokie tabele, wklejone z zewnątrz kody czy ręcznie ustawione szerokości bloków. Edytor blokowy i bloki takie jak Spectra pozwalają ustawiać odstępy, rozmiary fontów i układ osobno dla komputera, tabletu i telefonu. Warto z tego korzystać, zamiast liczyć na to, że układ z komputera „jakoś się zmieści”.
Jeśli dopiero wybierasz motyw, zajrzyj do poradnika jak wybrać szablon WordPress. Więcej ogólnych zasad znajdziesz w artykule projektowanie stron internetowych – 10 wskazówek.
9. Podsumowanie
Responsywność strony to dziś warunek konieczny, a nie dodatek. Google ocenia wersję mobilną, użytkownicy telefonów nie mają cierpliwości do powiększania i przewijania na boki, a szybkość na słabszych urządzeniach przekłada się na pozycje i zapytania. Projektuj mobile-first, pokazuj tę samą treść na wszystkich urządzeniach, dbaj o rozmiar przycisków i obrazów i testuj na prawdziwym telefonie.
Każdą stronę internetową, którą wykonuję, projektuję najpierw na telefon i testuję na kilku urządzeniach. Jeśli Twoja obecna strona źle wygląda na smartfonie, napisz do mnie – sprawdzę, co da się poprawić bez budowania wszystkiego od nowa.
