Co to jest responsywne projektowanie stron?
Responsywne projektowanie stron (RWD, Responsive Web Design) polega na tworzeniu witryn, które prawidłowo wyświetlają się na różnych urządzeniach: komputerach, tabletach i smartfonach. Strona automatycznie dopasowuje układ, rozmiary elementów i sposób prezentacji treści do szerokości ekranu.
Najważniejsze zasady RWD
- stosowanie elastycznego układu strony zamiast sztywnych tabel,
- używanie CSS do budowy layoutu,
- dopasowanie obrazów i multimediów do rozmiaru ekranu,
- stosowanie media queries,
- unikanie technologii wymagających wtyczek, np. Flash,
- optymalizacja ładowania zasobów na urządzeniach mobilnych.
Przykład media query
@media (max-width: 600px) {
.container {
width: 100%;
padding: 10px;
}
}
Ten kod zmienia wygląd elementu .container na ekranach o szerokości do 600 pikseli.
Dlaczego tabele są problemem?
Tabele służą głównie do prezentacji danych tabelarycznych, a nie do budowania całego układu strony. Layout oparty na tabelach jest mało elastyczny, trudniej dostosowuje się do małych ekranów i utrudnia poprawne skalowanie treści.
W kontekście egzaminu
Aby dostosować starą stronę do urządzeń mobilnych, należy zastąpić tabelaryczny szablon układem opartym na CSS oraz zrezygnować z Flasha na rzecz nowoczesnych formatów niewymagających wtyczek.