KWALIFIKACJA PGF4 - CZERWIEC 2019

PYTANIE NR 38.
Które strony internetowe są dostosowane do prawidłowego wyświetlania na ekranach różnych urządzeń tj.: monitor komputera, laptop, tablet czy telefon?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Strony "responsywne" (responsive web design) automatycznie dopasowują układ i elementy interfejsu do różnych rozmiarów i rozdzielczości ekranów.
Dlatego poprawnie wyświetlają się na monitorze, laptopie, tablecie i telefonie, bez konieczności tworzenia osobnych wersji strony dla każdego urządzenia.

Pełne wyjaśnienie:

Określenie "responsywne" dotyczy stron WWW, których układ i wygląd dostosowują się do szerokości i parametrów ekranu urządzenia. W praktyce oznacza to, że te same treści mogą być czytelne i wygodne w obsłudze zarówno na dużym monitorze, jak i na małym ekranie telefonu (np. zmienia się układ kolumn, rozmiary grafik, rozmieszczenie menu).

Odpowiedź "interaktywne" jest niepoprawna, bo interaktywność opisuje możliwość działania użytkownika (np. kliknięcia, formularze, animacje, elementy sterujące), a nie to, czy strona poprawnie skaluje się na różnych ekranach. Strona może być interaktywna i jednocześnie nierespnsywna.

Odpowiedź "statyczne" także nie pasuje: "statyczna" odnosi się do sposobu generowania/zmieniania treści (często brak dynamicznych zmian po stronie serwera lub aplikacji), a nie do dopasowania layoutu do urządzenia. Statyczna strona może być responsywna lub nie.

Odpowiedź "informacyjne" opisuje cel lub typ serwisu (np. strona z informacjami), a nie cechę techniczną związaną z wyświetlaniem na różnych urządzeniach. Serwis informacyjny również może być responsywny albo nie.

W nauce do egzaminu warto zapamiętać: responsywność = dopasowanie układu do ekranu i wygody użytkownika na różnych urządzeniach.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Strona responsywna to serwis WWW, którego układ automatycznie dopasowuje się do szerokości ekranu i urządzenia (telefon, tablet, komputer). Dzięki temu tekst, menu i grafiki pozostają czytelne oraz wygodne w obsłudze bez tworzenia osobnych wersji strony.
W projektach graficznych i multimedialnych odbiorcy często oglądają treści na telefonach. Responsywność zmniejsza ryzyko "rozjechanego" layoutu, zbyt małych przycisków i nieczytelnej typografii, co poprawia odbiór portfolio, landing page i galerii zdjęć.
"Responsywna" opisuje dopasowanie układu do różnych ekranów. "Statyczna" dotyczy sposobu działania strony (treść zwykle nie jest generowana dynamicznie). Strona statyczna może być responsywna, jeśli jej CSS i layout są zaprojektowane tak, by zmieniać układ na różnych szerokościach.
Nie. Interaktywność oznacza, że użytkownik może wchodzić w interakcje (np. formularze, przyciski, animacje), ale nie gwarantuje poprawnego dopasowania do różnych ekranów. Responsywność to osobna cecha związana z układem i skalowaniem elementów.
Najczęściej problemy dotyczą menu (zbyt szerokie), kolumn (nie mieszczą się), galerii zdjęć (miniatury za małe/za duże), przycisków (trudne do kliknięcia palcem) oraz typografii (zbyt drobny tekst). To obniża użyteczność i ocenę projektu.
Najprościej otworzyć stronę na smartfonie i ocenić czytelność oraz obsługę. Dodatkowo można użyć narzędzi deweloperskich w przeglądarce (tryb urządzeń mobilnych) i sprawdzić różne szerokości ekranu, obrót oraz zachowanie menu i galerii.
Oznacza to, że układ i elementy strony zmieniają się tak, by pasowały do szerokości okna lub ekranu. Przykładowo układ wielokolumnowy na komputerze może przechodzić w układ jednokolumnowy na telefonie, bez utraty czytelności treści.
Częsty błąd to wybór "interaktywne" lub "informacyjne", bo brzmią nowocześnie i ogólnie pozytywnie. Uczniowie czasem mylą cechy funkcjonalne strony z cechą układu. Warto szukać słowa kluczowego: dopasowanie do różnych urządzeń = responsywność.
Tak. W praktyce grafiki i materiały wideo również powinny skalować się i układać tak, by nie wychodziły poza ekran oraz nie powodowały przewijania poziomego. W projektach multimedialnych to kluczowe, bo treści wizualne dominują i silnie wpływają na odbiór.
Ucz się definicji pojęć i kojarz je z konkretną cechą: responsywne = dopasowanie do ekranów, interaktywne = działania użytkownika, statyczne = sposób generowania treści, informacyjne = cel serwisu. Pomaga też oglądanie przykładów stron na telefonie i komputerze.
info

Około 81% zdających odpowiada poprawnie na to pytanie. średnio łatwe

Źródła:

  • MDN Web Docs: "Responsive design" (sekcja o dopasowaniu layoutu do różnych urządzeń), https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design (dostęp: 2026-02-27)
  • MDN Web Docs: "Viewport meta tag" (kontekst poprawnego wyświetlania na urządzeniach mobilnych), https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag (dostęp: 2026-02-27)
  • W3C: "Responsive Web Design (RWD)" – materiały wprowadzające do koncepcji projektowania responsywnego, https://www.w3.org/wiki/Responsive_Web_Design (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN: dział Responsive design i CSS layout
  • Materiały Google dotyczące projektowania na urządzenia mobilne i viewport
  • Podręczniki i kursy z podstaw projektowania WWW oraz UX/UI (część o responsywności)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego