--- title: "Responsywność: co to jest? Słownik pojęć" description: "Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści…" url: https://fluostudio.pl/baza-wiedzy/slownik/responsywnosc/ --- [Strony www](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=www) # Responsywność Inaczej RWD, responsive web design, strona responsywna Responsywność to zdolność strony do dopasowania układu do szerokości ekranu. Ten sam serwis na komputerze, tablecie i telefonie pokazuje te same treści, ułożone tak, żeby dało się je wygodnie czytać i obsługiwać. ## W skrócie - Punkty zmiany układu (breakpointy) dobiera się do treści, a nie do modeli telefonów - Treść czytelna bez przewijania w poziomie już przy szerokości 320 px (WCAG) - Pole dotyku przycisku: zalecane co najmniej 44 × 44 px - Na telefonie nie ma najechania kursorem, więc nic ważnego nie może się pod nim chować ## Usługa - [Strony www](https://fluostudio.pl/uslugi/strony-www/) Nową stronę zatwierdzono na dużym monitorze i wszystkim się podobała. Pierwszy klient otwiera ją na telefonie, w przerwie między spotkaniami: menu zasłania pół ekranu, tabela z parametrami ucieka za krawędź, a w przycisk „Zapytaj o ofertę” nie da się trafić kciukiem. Responsywna strona ma jeden adres i jeden kod, ale kilka układów. Na szerokim ekranie trzy kolumny stoją obok siebie, na telefonie jedna pod drugą. Menu chowa się pod ikoną, tabela zamienia się w karty, zdjęcie dostaje inny kadr. ## Więcej niż węższy układ Telefon obsługuje się kciukiem, często jedną ręką, w ruchu i przy słabszym zasięgu. Dlatego na telefonie: - przyciski są na tyle duże, żeby trafić w nie palcem, - formularze proszą o minimum danych i otwierają właściwą klawiaturę, np. numeryczną przy numerze telefonu, - zdjęcia ładują się w rozmiarze dopasowanym do ekranu, a nie w pełnej rozdzielczości z sesji, - nic ważnego nie chowa się pod najechaniem kursorem, bo kursora nie ma. Ostatni punkt łatwo przeoczyć. To, co na komputerze uruchamia kursor, na telefonie musi zadziać się samo. Animacje włączamy przy przewijaniu, a opisy schowane pod kursorem pokazujemy od razu. Inaczej spora część [mikrointerakcji](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) na telefonie przepada. Stronę sprawdza się na prawdziwych telefonach. Zwężone okno przeglądarki nie pokaże, jak strona działa pod kciukiem i na słabym zasięgu. Ciężkie zdjęcia i skrypty wyjdą też w pomiarach [Core Web Vitals](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/). ## Responsywność a mobile first Responsywność opisuje efekt: strona działa na każdym ekranie. [Mobile first](https://fluostudio.pl/baza-wiedzy/slownik/mobile-first/) opisuje kolejność pracy: najpierw projekt na telefon, potem rozbudowa na większe ekrany. Responsywną stronę można zaprojektować od komputera, tylko wtedy wersja na telefon często wychodzi okrojonym dodatkiem. ## Więcej na blogu - [Dobra strona w wersji mobilnej – poznaj najważniejsze zasady mobile UX designu](https://fluostudio.pl/dobra-strona-w-wersji-mobilnej-poznaj-najwazniejsze-zasady-mobile-ux-designu/) ## Zobacz też - [Strony www Mobile first Mobile first to podejście do projektowania stron, w którym zaczyna się od wersji na telefon, a dopiero potem rozbudowuje układ na tablet i komputer. Wymusza wybór tego, co najważniejsze.](https://fluostudio.pl/baza-wiedzy/slownik/mobile-first/) - [Strony www Mikrointerakcja Mikrointerakcja to drobna reakcja interfejsu na jedno działanie użytkownika, np. zmiana przycisku po naciśnięciu albo animacja licznika w koszyku. Pokazuje, że system przyjął polecenie i co dzieje się dalej.](https://fluostudio.pl/baza-wiedzy/slownik/mikrointerakcja/) - [Strony www UI UI (user interface) to interfejs, czyli wszystko, co człowiek widzi na ekranie i czego używa: przyciski, pola formularzy, menu, ikony, typografia i kolory.](https://fluostudio.pl/baza-wiedzy/slownik/ui/) - [Strony www Core Web Vitals Core Web Vitals to trzy wskaźniki Google, które mierzą, jak strona działa u prawdziwych użytkowników. Sprawdzają, jak szybko pokazuje główną treść (LCP), jak szybko reaguje (INP) i czy układ nie skacze (CLS).](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/) - [Strony www Dostępność cyfrowa Dostępność cyfrowa to projektowanie stron i aplikacji tak, żeby mogły z nich korzystać także osoby z niepełnosprawnościami, np. niewidome, słabowidzące, niesłyszące albo obsługujące komputer tylko klawiaturą.](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) - [Identyfikacja wizualna Logo responsywne Logo responsywne to zestaw wersji jednego znaku o różnym stopniu uproszczenia, od pełnej z hasłem po sam sygnet. W każdym miejscu używa się tej wersji, która się w nim mieści i pozostaje czytelna.](https://fluostudio.pl/baza-wiedzy/slownik/logo-responsywne/) - [Strony www Front-end Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje. Powstaje w HTML, CSS i JavaScripcie i działa w przeglądarce.](https://fluostudio.pl/baza-wiedzy/slownik/front-end/) Hasło pojawia się też w: [Siatka projektowa](https://fluostudio.pl/baza-wiedzy/slownik/siatka-projektowa/) ## Strona ma sprzedawać, działać szybko i dawać się łatwo edytować. Porozmawiajmy o Twojej. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)