Responsive Web Design

Słownik kwalifikacji AUD.05 - Realizacja projektów graficznych i multimedialnych

Co to jest Responsive Web Design?

Responsive Web Design (RWD) to sposób projektowania i tworzenia stron internetowych tak, aby ich układ, wygląd i funkcje automatycznie dopasowywały się do różnych rozdzielczości ekranu oraz typów urządzeń: komputerów, tabletów i smartfonów.

Celem RWD jest przygotowanie jednej wersji strony, która działa poprawnie na wielu urządzeniach, zamiast tworzenia osobnych witryn dla telefonu, tabletu i komputera.

Najważniejsze cechy RWD

  • elastyczny układ strony, np. oparty na procentach, flexbox lub grid,
  • dopasowanie elementów do szerokości ekranu,
  • skalowanie obrazów i multimediów,
  • stosowanie zapytań medialnych CSS, czyli media queries,
  • czytelność tekstu i wygodna obsługa na ekranach dotykowych.

Przykład zastosowania

.container {
  width: 90%;
  margin: auto;
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

W tym przykładzie układ menu może zmienić się na pionowy na mniejszych ekranach, np. na tablecie lub smartfonie.

Dlaczego RWD jest poprawną odpowiedzią?

W pytaniu chodzi o stronę, która dostosowuje się do różnych rozdzielczości i działa poprawnie na komputerze, tablecie oraz telefonie. To dokładnie opisuje Responsive Web Design.

Nie należy wybierać rozwiązań opartych na tabelach, Flashu ani osobnych wersjach witryny dla każdego urządzenia, ponieważ są to metody przestarzałe, mniej elastyczne lub trudniejsze w utrzymaniu.