KWALIFIKACJA PGF4 - WRZESIEŃ 2014

PYTANIE NR 27.
Do przygotowania stron internetowych firmowej witryny, płynnie dostosowującej się do rozdzielczości ekranu i tak samo dobrze wyglądającej i działającej na różnych urządzeniach: komputerze stacjonarnym, tablecie, smartfonie należy zastosować
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Responsive Web Design to podejście do tworzenia witryn, w którym układ i elementy strony elastycznie dopasowują się do rozmiaru ekranu, dzięki czemu serwis wygląda i działa poprawnie na komputerze, tablecie i smartfonie. Pozostałe propozycje nie są właściwą metodą uzyskania responsywności.

Pełne wyjaśnienie:

Responsive Web Design to podejście projektowo-wdrożeniowe, którego celem jest uzyskanie jednej wersji witryny, która automatycznie dostosowuje wygląd i użyteczność do różnych rozdzielczości oraz proporcji ekranu. Dzięki temu ta sama strona może być wygodna w obsłudze na komputerze stacjonarnym, tablecie i smartfonie, bez utrzymywania kilku odrębnych serwisów.

W praktyce RWD polega na projektowaniu układu w sposób elastyczny: elementy mogą zmieniać swoje rozmiary, kolejność lub rozmieszczenie, aby zachować czytelność i funkcjonalność. Z perspektywy egzaminu kluczowe jest rozpoznanie, że "płynne dostosowanie do rozdzielczości ekranu" oraz "dobre działanie na różnych urządzeniach" opisuje właśnie koncepcję responsywności.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • "pełne generowanie stron we Flashu" nie jest metodą tworzenia responsywnych, nowoczesnych witryn. Jest to podejście historycznie kojarzone z animacją i multimedialnością, ale nie stanowi właściwego standardu budowy układu strony, a ponadto bywa niekompatybilne z wieloma środowiskami.
  • "język XHTML i strukturę opartą o tabele" opisuje dawną praktykę budowania układu stron tabelami. Tabele służą do prezentacji danych tabelarycznych, a nie do elastycznego layoutu. Takie podejście utrudnia dostosowanie do różnych ekranów i zwykle nie zapewnia płynnej responsywności.
  • "język XML i osobne wersje witryny dla różnych kategorii sprzętu" miesza pojęcia: XML jest językiem opisu danych, a tworzenie oddzielnych wersji serwisu oznacza większy koszt utrzymania i ryzyko niespójności. RWD zakłada jedną witrynę dopasowującą się do urządzenia, a nie równoległe serwisy dla różnych klas sprzętu.

Wskazówka egzaminacyjna: gdy w treści pojawia się "jedna strona działająca na wielu urządzeniach" oraz "dopasowanie do rozdzielczości", szukaj odpowiedzi wskazującej na responsywność, a nie na osobne wersje serwisu lub przestarzałe techniki układu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Responsive Web Design (RWD) to sposób projektowania i budowy strony, aby jej układ i elementy dopasowywały się do różnych ekranów (telefon, tablet, komputer). Celem jest jedna witryna, która pozostaje czytelna i funkcjonalna niezależnie od rozdzielczości.
Bo użytkownicy wchodzą na stronę z wielu urządzeń. RWD poprawia czytelność, ułatwia nawigację i zmniejsza ryzyko, że strona "rozjedzie się" na telefonie. Dla firmy oznacza to lepsze doświadczenie odbiorcy i mniejszy koszt utrzymania niż kilka wersji serwisu.
Szukaj sformułowań typu: "płynnie dostosowuje się do rozdzielczości", "dobrze wygląda na komputerze i smartfonie", "działa na różnych urządzeniach". To typowy opis responsywności, czyli jednej strony dopasowującej układ do ekranu.
Nie. Osobne wersje to równoległe serwisy (np. mobilny i desktopowy), które trzeba osobno aktualizować. RWD zakłada jedną witrynę i jeden zestaw treści, a dopasowanie odbywa się przez zmianę układu i prezentacji w zależności od ekranu.
Tabele są przeznaczone głównie do prezentacji danych tabelarycznych, a nie do budowania layoutu. Układ tabelaryczny jest sztywny i trudno go elastycznie przekształcać dla różnych szerokości ekranu. W responsywnych projektach potrzebujesz układu łatwego do skalowania i reorganizacji.
Nie jest to właściwa metoda. Flash był używany do animacji i interaktywnych elementów, ale nie stanowi standardu budowy responsywnego układu strony, a jego wsparcie i kompatybilność w wielu środowiskach są problematyczne. W praktyce stawia się na rozwiązania działające natywnie w przeglądarce.
Oznacza, że elementy strony (kolumny, grafiki, menu) mogą zmieniać rozmiary i układ wraz ze zmianą szerokości ekranu, tak aby zachować czytelność. Użytkownik nie powinien mieć potrzeby powiększania widoku, przewijania w bok ani "szukania" przycisków.
Najczęściej: menu nawigacyjne, kolumny tekstu, tabele danych, banery i zdjęcia o stałej szerokości oraz przyciski zbyt małe dla obsługi dotykiem. Bez responsywności te elementy mogą się nakładać, uciekać poza ekran lub stać się nieczytelne na smartfonie.
Częsty błąd to wybór odpowiedzi "multimedialnej" z przyzwyczajenia (np. Flash) albo utożsamienie dopasowania z tworzeniem kilku wersji serwisu. Inny błąd to mylenie języków opisu danych z metodą budowy układu. Warto czytać, czy pytanie dotyczy wyglądu na wielu ekranach.
Ćwicz analizę makiet w wariantach: telefon–tablet–komputer i naucz się nazywać podejście "jedna strona na wiele urządzeń" jako RWD. Warto też testować istniejące strony, zmieniając szerokość okna przeglądarki i obserwując, jak układ się reorganizuje.
info

Około 67% zdających odpowiada poprawnie na to pytanie. średnie

Według specjalistów z branży: "Pozostałe propozycje nie są właściwą metodą uzyskania responsywności."

Źródła:

  • MDN Web Docs: Responsive design - https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design (dostęp: 2026-03-01)
  • MDN Web Docs: CSS media queries - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries (dostęp: 2026-03-01)
  • Google Developers: Responsive Web Design Basics - https://developers.google.com/web/fundamentals/design-and-ux/responsive (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN dotycząca projektowania responsywnego i układów
  • Wprowadzenie do technik responsywnych w materiałach Google dla deweloperów
  • Kursy podstaw projektowania interfejsów i makiet (UI) dla różnych rozmiarów ekranów

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego